January 26, 2016

Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar

January 26, 2016

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

9 comments on Modifikasi Tampilan Widget Arsip Blog (Blog Archieve) di Sidebar

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

    ReplyDelete
    Replies
    1. sudah diremove kayaknya...

      Delete
    2. Demonya lihat saja gambar screenshot arsip di atas...

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

    ReplyDelete
  3. demonya hilang bos, saya senang dengan artikel ini dan masih saja setia dengan blog ini, saya admin REDSOBEK.COM semoga makin jaya bos CB

    ReplyDelete
    Replies
    1. Liat aja gambar sreenshotnya dan coba pasang di blog, jika tidak berkenan, tinggal hapus lagi

      Delete
  4. kode diatas diletakkan di html sebelah mana ya gan?

    ReplyDelete
    Replies
    1. Di dalam template, bersama kode CSS lainnya

      Delete
  5. Kok saya cari pilihan ini, tapi tidak ada di blog saya.

    1. Klik Template > Customize
    2. Klik menu "Advance" > "Add CSS"

    Sepertinya tampilannya beda yah?

    ReplyDelete

Contact Form

Name

Email *

Message *