Home » » Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar

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

Thanks for reading & sharing Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar

Previous
« Prev Post

1 comments:

Comment Page:
  1. Demonya yang mana, gak ada bos. Artikel CB bagus dan bermanfaat

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox