Cara Mudah Modifikasi Keren Widget Arsip Blog

Cara Mudah Modifikasi Keren Widget Arsip Blog - Bosan dengan tampilan arsip blog yang monoton sebatas tampilan hierarki, flat dan menu dropdown. Pilihan yang ditawarkan blogger memang terbatas itu saja, namun tampilan-tampilan dari blog yang terlihat statis, monoton kini dapat dimodifikasi menjadi dinamis dan lebih responsive. Tentunya dari ilmu yang didapat dari para ahli hal tersebut dapat dilakukan.

Kesempatan kali ini saya akan memberikan cara modifikasi keren widget arsip blog supaya terlihat lebih keren dan elegan. Bisa dibilang cara ini tak sesulit memodifikasi template blog yang harus mengutak-atik tema pada HTML blog, anda hanya perlu menerapkannya pada CSS blog. Untuk tampilan widget tersebut bisa anda lihat seperti pada blog ini. Langsung saja berikut caranya

Sebelum anda menerapkan perlu anda copy dahulu script font awesome dibawah ini

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

Lalu paste dibawah kode <head> pada template blog, untuk menemukan kode head tekan Ctrl+F pada keyboard kemudian ketik dan cari <head>

Klik simpan template

Langkah selanjutnya masih di menu tema

Pilih Sesuaikan lalu lanjutan dan tambahkan CSS

Masukkan kode dibawah ini

//* 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: 10px;
    padding: 4px;
    line-height: 1;
    font-size: 11px;
    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;

Klik Terapkan ke Blog

Untuk mengeceknya silahkan anda tambahkan widget arsip artikel, apabila telah ada widget arsip artikel di blog anda hapus terlebih dahulu.

Berikut cara menambahkan widget arsip artikel blog

1. Pada menu dashboard blog anda pilih tata letak

2. Pilih tambahkan gadget kemudian pilih arsip blog

3. Biarkan setelan seperti defaultnya kemudian klik simpan

Lihat hasilnya dan selamat widget arsip blog anda kini lebih bagus dari sebelumnya.

Semoga bermanfaat!