Mengubah Tampilan Archive Gadget Bawaan Blogger

Rasanya membosankan datang saat saya melihat tampian gadget bawaan blogger yang begitu-begitu saja. Templatenya sudah keren tapi gedgetnya masih jadul. Setelah berfikir dan mempertimbangkannya dengan matang, saya rasa saya harus merubah sedikit tampilan gadget saya sekarang.

Saya melihat sebuah widget arsip di salah satu blog WordPress yang membuat saya tertarik. Diblog tersebut juga pernah merilis pengembangan widget arsip tersebut, sayangnya hanya belaku untuk blog WordPress dan tidak bisa diterapkan di blogger. Akhirnya karena saya tidak bisa membuat gadget archive bagus seperti itu, saya mencobanya dengan css berikut dan ini cukup mirip. Bisa anda lihat hasilnya seperti gambar diatas atau lihat widget arsip saya di samping kanan posting ini. Cukup bagus bukan? anda hanya perlu menambahkan Font Awesome ke bagian atas (Header) templates anda.

Baca juga: Cara Membuat Archive Page Sederhana di Blogger

Contoh! inilah Font Awesome yang saya gunakan:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Lalu cukup menambahkan css berikut:

<style type='text/css'>
/* Archive Year Header */
#ArchiveList ul > li > a.post-count-link {
    font-size: 18px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 38px;
    background-color: #F5F5F5;
    box-sizing: border-box;
    letter-spacing: 1px;
}

/* Archive Month Header */
#ArchiveList ul ul li a.post-count-link {
    font-size: inherit;
    width: auto;
    margin: 0 5px 0;
    padding: 8px 25px;
    line-height: 1;
    background: transparent;
    text-transform: uppercase;
}

#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: white;
    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';
    position: absolute;
    top: 3px;
    left: 10px;
}

#ArchiveList ul li {
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 30px !important;
    text-transform: none;
}

#ArchiveList ul {
    margin: 0 0 2px !important;
}

span.post-count {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #8C8C8C;
}
</style> 

Anda bisa meletakan css di atas dimana saja, sesuai yang anda inginkan.

Hanya itu! Beritahu saya jika css ini bekerja diblog anda dan jika memiliki pertanyaan silakan tulis di komentar :)