CARA MODIFIKASI WIDGET ARCHIVE BLOG MENJADI KEREN

Tutorial blog kali ini akan membahas tentang bagaimana Cara Modifikasi Widget Archive Blog Menjadi Kerendengan memanfaatkan effect show hide dari bawaan default blogger tanpa menambahkan javascript lagi.

Banyak cara sebenarnya membuat tampilan widget arsip atau widget archive agar terlihat keren sesuai apa yang kita inginkan, dan pada dasarnya hanya sekedar edit atau modifikasi style css bawaan default blogger yang terkesan kurang menarik bahkan membosankan apalagi bagi blogger yang lebih mengedepankan tampilan suatu blog.

baca juga:

Cara Memasang Widget Multi Tab 3 Kolom Pada Sidebar

Cara Modifikasi Widget Archive Blog Menjadi Keren

1. Login pada Akun Blogger anda dan pastikanMembackup template terlebih dahulu.

2. Masuk ke Tata Letak / Layout  >> Tambah Gadget >> Arsip Blog (apabila anda sudah memasang widget arsip abaikan langkah ini)

3. Lanjut masuk Template >> Edit HTML.

4. Copy kode dibawah ini diatas kode ]]></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}

5. Simpan Template anda, dan silahkan melihat hasilnya. 


Apabila anda mengalami kendala dalam menerapkan tutorial ini silahkan anda bertanya pada kotak komentar, semoga tutorial Cara Modifikasi Widget Archive Blog Menjadi Kerenbermanfaat bagi anda....

Tweet