Memberi Kesan Rainbow Style pada Widget Popular Post

Tutorial kali ini merupakan tentang pembahasan mengenai langkah-langkah membuat widget Popular Post menjadi berwarna-warni, pada perihal ini Anda hanya perlu meletakkan kode CSS pada HTML template blog.

Widget popular post umumnya dapat kita buat dengan cara mudah yakni tinggal menambahkannya ke blog melalu fitur konfigurasi tata letak di dashboard blogger. Ketika kita sudah menerapkannya di blog, maka secara otomatis widget ini akan terlihat di situs blog.

Widget popular post menampilkan setiap artikel-artikel yang paling banyak diakses atau dibuka oleh pembaca. Ada 3 opsi filter waktu untuk menampilkan artikel terpopuler antara lain selama 7 hari, 30 hari terakhir, dan setiap saat. Anda dapat mengaturnya sesuai keinginan.

Adapun kita juga dapat memodifikasi tampilan widget popular post ini dengan CSS. Kita bisa membuatnya memiliki warna-warni yang indah. Saya rasa, Anda juga dapat membuatnya. Dengan CSS (Cascading Style Sheets), kita semua dapat dengan mudah membuat perubahan pada tampilan blog.

Pertama, persiapkan bahan-bahan yang diperlukan yakni, kode CSS dan keahlian mengutak-atik template. Tentunya Anda sudah memilikinya. Untuk kode CSS-nya nanti bakalan saya berikan, dan yang terpenting Anda menyimak tutorial ini dengan benar. Berikut ini langkah-langkah yang harus Anda lakukan.

Memberi Kesan Rainbow Style pada Widget Popular Post

1. Log in ke Blogger dan masuk ke dashboard terlebih dahulu.

2. Pastikan widget popular post sudah terpasang dan diletakkan pada tempat yang benar.

3. Masuk ke Template dan pilih Edit HTML.

4. Cari kode ]]></b:skin> atau </style>. Untuk mempermudah pencarian gunakan tombol Kombinasi yaitu CTRL + F pada keyboard lalu tuliskan kode tersebut pada kolom pencarian yang telah tersedia kemudian tekan enter, setelah berhasil menemukan salah satu dari kedua kode tersebut, letakkan kode CSS berikut ini tepat di sebelumnya (pilih salah satunya).


/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li img{display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left}
.PopularPosts ul li{background-color:#eee;margin:0 10% .4em 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:#000!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
/* Set color and level */
.PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:2%!important}
.PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:3%!important}
.PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:4%!important}
.PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:5%!important}
.PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:6%!important}
.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!important}
.PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:8%!important}
.PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:9%!important}
.PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:10%!important}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}


5. Klik Simpan Template atau Save, kemudian lihat hasilnya pada halaman blog Anda. Selesai.

Wah, mulai dari sekarang widget artikel terpopuler (popular post) sudah berubah menjadi warna-warni. Baiklah, cukup sekian artikel Memberi Kesan Rainbow Style pada Widget Popular Post, semoga bermanfaat bagi anda semua.

Berlangganan: Masukkan e-mail Anda untuk memperoleh kiriman artikel teraktual dari librasbr.com tepat di pesan kotak masuk.

feedburner

2 Komentar untuk "Memberi Kesan Rainbow Style pada Widget Popular Post"

avatar

Gan, nanya nih. Saya kan masang Syntax Highlighter kayak diatas, saya udah ikuti tutorialnya agan tapi hasilnya kok gak sama kaya punya agan. Punya agan diatas angkanya warna merah, ada juga teks yang biru dan ijo serta lainnya itu gimana buatnya gan?

avatar

Maaf gan, gak jadi ternyata ane bikin cssnya kecampur sama template bawaan, makasih...

KETENTUAN BERKOMENTAR

↳ Berkomentarlah sesuai isi dan topik artikel
↳ Dilarang menyisipkan PRANALA (link) AKTIF