Cara Modifikasi Widget Popular Post Blogger

Cara Modifikasi Widget Popular Post Blogger, Sebagai blogger yang menggunakan platform blogspot, tentu anda sudah tahukan mengenai widget popular post? yaitu widget yang berfungsi untuk menampilkan artikel-artikel popular di blog kita, tidak seperti widget-widget HTML/Javascript lainya, popular post ini bersifat resmi atau official dari blogger, jadi widget ini "terkesan" lebih baik dan tidak memberikan efek yang signifikan terhadap berat loading blog. Selain itu, terkadang seringkali kita juga mengalami kebosanan dengan tampilan popular post yang itu-itu saja, karena pasalnya blogger jarang sekali bahkan tidak pernah merombak tampilan dari widget tersebut, namun sebenarnya kita bisa memodifikasinya lewat halaman Edit HTML, oleh karena itu, pada kesempatan kali ini saya akan membahas salah satu hasil modifikasi yang saya adopsi dari artikel di blog kang Mahfid Mayanto.

Tampilan dari modifikasi popular post yang akan saya bahas ini sebenarnya cukup sederhana, hanya saja bedanya deskripsi dari modifikasi ini akan nampak lebih berbeda, pasalnya deskripsi dari hasil modifikasi ini sudah dilengkapi dengan efek easing yang menjadikan penampakan dari deskripsi pada widget ini akan seperti buka tutup, jadi nantinya deskipsi dari popular post ini akan nge-scroll atau muncul dari samping, setiap kali kita mengarahkan cursor mouse kepada judul dari postingan di popular post itu sendiri. Untuk persisnya, anda dapat lihat pada contoh gambar diatas, kurang lebih penampakanya nanti akan seperti itu, atau jika anda ingin yang lebih jelas, anda dapat langsung mempraktekkanya, hehe.

Cara mengaplikasikanya juga tergolong cukup mudah, kita hanya perlu memasang widget popular post seperti biasa terlebih dahulu, baru kemudian ditambahkan dengan beberapa kode css yang sudah di customisasi. Jika anda tertarik untuk menerapkanya, maka silahkan disimak yang berikut ini.

Cara Modifikasi Widget Popular Post Blogger

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih "Entri Populer" atau "Popular Post" (tergantung bahasa yang digunakan).

5. Lalu, centang box thumbnail gambar dan cuplikan.

6. Klik "Save/Simpan" gadget.

7. Sekarang beralih ke halaman Template > Edit HTML.

8. Klik tanda panah hitam disebelah kode yang mirip seperti kode ini: <b:skin>...</b:skin> (untuk membuka kode css).

9. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat diatasnya.

.PopularPosts .widget-content ul li {
    padding: 0;
    position: relative;
}
.item-snippet {
    font-size: 90%;
    line-height: 1.2em;
    position: absolute;
    width: 230px;
    background-color: whiteSmoke;
    padding: 7px;
    border-top: 2px solid #FF0202;
    z-index: 2;
    left: 300px;
    top: 60%;
    height: 4.5em!important;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
    left: 60px;
    opacity: 1;
    visibility: visible;
}
.PopularPosts img {
    width: 50px;
    height: 50px;
}
.PopularPosts .item-title {
    font-family: 'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;
    font-size: 125%;
}

Keterangan:

• #FF0202 = Warna dari border diatas deskripsi (Kode Warna).
• 230px = Lebar kolom munculan deskripsi.
• 50px = Lebar gambar/thumbnail popular post.
• 50px = Tinggi gambar/thumbnail popular post.

10. Klik "Save/Simpan" template, dan selesai.

Bagaimana? mudah bukan cara memodifikasi popular post agar terlihat lebih stylish. Demikian informasi terbaru tentang Cara Modifikasi Widget Popular Post Blogger, baca juga artikel menarik lainya seputar tutorial blog tentang Cara Menampilkan Widget Hanya di Halaman Posting, semoga bermanfaat dan selamat mencoba!

Artikel Referensi : FullBlogDesign