Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar

Baca Juga

Cara Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar biar lebih keren.

ARSIP Blog merupakan salah satu widget bawaan blogger. Kita tinggal tambahkan di sidebar.

Namun, tampilan standar tampak terlalu sederhana dan bisa dimodifikasi menjadi lebih keren.

Kita bisa memodifikasinya. Salah satu kode Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar ini di-share oleh These Paper Hearts. Tampilannya sebagai berikut:

Demonya bisa dilihat di halaman dalam (klik salah satu posting) CB Blogger Lab.

Cara Memasangnya:

1. Layout > Add a Gadget > pilih "Blog Archieve" (Arsip Blog)

2. Save!

Langkah berikutnya memasang kode Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar.

1. Klik Template > Customize 

2. Klik menu "Advance" > "Add CSS"

3. Copas kode berikut 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: 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;

        background: none;}

#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;

}

4. Klik "Apply to Blog"

5. Beres!

Klik "Back to Blogger" (Kembali ke Blogger).

Jika ingin menampilkan Widget Arsip Blog (Blog Archieve) hanya di halaman dalam, gunakan Tag Kondisional. Good Luck & Happy Blogging! (http://www.contohblog.com).*