Membuat Archive Blog Keren Dengan Mudah

Cara Merubah Tampilan Archive Blog Agar Lebih Menarik

Pada tulisan ini saya akan memberikan contoh merubah tampilan Archive atau arsip di bloger menjadikannya lebih menarik dan tidak monoton. Biasanya kita sendiri merasa bosan dengan tampilan widget yang tidak menarik atau sangat membosankan dipandang. Hal itu disebabkan widget yang kita gunakan itu masih standart tanpa modifikasi CSS. Tentu saja bagi sebagian besar orang atau juga semua orang memiliki selera seni yang akan diterapkan dalam beberapa pekerjaannya dalam bidang apapun. Tampilan yang monoton ternyata sering kali membuat jenuh user dan cenderung untuk memilih sumber lain yang lebih menarik dari segi desain walaupun esensi pada tulisan website tersebut sama. Artinya untuk seseorang yang suka mencari informasi dan membaca artikel-artikel akan mempengaruhi selera baca. Mengingat desain dan paduan warna yang baik merupakan faktor pendukung kepada para user untuk merasa nyaman. Itu saja sedikit review dari saya, sekarang kita lanjut ke topik pembahasan yang saya kutipkan pada judul artikel ini.

Pertama pastikan anda suda berada di Dashboard Blog anda.

Masuk ke Tata Letak à Tambahkan Gadget à Arsip blog

Jika anda sudah memasang widget arsip sebelumnya lanjutkan ke langkah selanjutnya

Silahkan anda pilih Template à Edit HTML

Kemudian silahkan anda Cari kode ini ]]></b:skin>

Selanjutnya Copy-Paste Script ini tepat Diatas Atau Sebelum ]]></b:skin>

/* Widget Arsip */
#ArchiveList ul > li > a.post-count-link{font-size:18px;width:100%;margin:0;padding:0 15px;
line-height:38px;background-color:#f6f6f6;box-sizing:border-box;letter-spacing:1px}
#ArchiveList ul ul li a.post-count-link{width:auto;margin:0 5px;padding:8px 25px;
background:transparent;text-transform:uppercase;font:12px merriweather sans;font-weight:700}
#ArchiveList .zippy{visibility:hidden}
#ArchiveList ul li a.toggle{position:absolute;top:0;left:0;width:100%;display:block;
height:38px;z-index:5}
#ArchiveList ul ul li a.toggle{position:absolute;top:0;left:0;width:30px;height:24px;
display:block;z-index:0}
#ArchiveList .toggle{position:relative}
#ArchiveList ul ul .zippy{color:#fff;visibility:visible;text-shadow:none}
#ArchiveList ul ul .zippy:before{content:'\f105';font-family:FontAwesome;
position:absolute;top:3px;left:12px;padding:4px;line-height:1;font-size:12px;color:#8C8C8C}
#ArchiveList ul ul .toggle-open:before{content:'\f107';
font-family:FontAwesome;position:absolute;top:3px;left:10px}
#ArchiveList ul li{padding:0!important;text-indent:0!important;margin:0!important;
position:relative;background:none}
#ArchiveList ul .post-count-link{padding:10px 0;display:inline-block;margin:0 5px}
#ArchiveList ul ul .posts li{padding:0 5px 5px!important;
margin:0 5px 5px 20px !important;text-transform:none;border-bottom:1px 
solid #f0f0f0;font-size:12px}  #ArchiveList ul ul .posts li:before
{content:'\f0da';font-family:FontAwesome;padding-right:5px;}
#ArchiveList ul{margin:0 0 2px!important}
span.post-count{position:absolute;right:7px;top:7px;color:#666;background:#fff;
padding:5px 5px 0;width:24px;height:24px;border-radius:3px;
border:1px solid #ffc1c1;font:10px arial;vertical-align:middle;text-align:center}

Kemudian pilih Pratinjau Untuk melihat Perubahannya, Jika tidak ada masalah silahkan anda Simpan dan lanjutnkan Merubah TampilanWidget Popular Posts