Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar

Widget Arsip Blog
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:

Widget Arsip Blog

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).*

Labels: Desain Blog
4 Komentar untuk "Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar"

Demonya yang mana, gak ada bos. Artikel CB bagus dan bermanfaat

saya juga ndak paham gan, yang demo yang dimaksudkan....

sudah diremove kayaknya...

Demonya lihat saja gambar screenshot arsip di atas...

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *