Cara Membuat Widget Popular Post Warna Warni seperti Template Blog Sang SEO

SEBAGAI salah satu blogger yang pernah menyarankan Anda untuk menggunakan template blogger sang seo karya kang mousir, ada satu hal yang menarik dari template blog ini, yakni widget popular post yang memiliki ragam warna-warni.

Ada hijau, kuning kelabu, merah muda dan biru... Dorrr! Eh, gak deng. Wkwk. Tampilannya seperti berikut, rada-rada mirip seperti widget popular post ala Evo Magz miliknya Mas Sugeng Riyadi.

Cara Membuat Widget Popular Post Warna Warni seperti Template Blog Sang SEO

Cara Membuat Widget Popular Post seperti Sang SEO Blogger Template


1. Masuk ke Blogger > pilih Layout.
2. Tambahkan atau Add Widget Popular Post (Entri Populer).

Silahkan sesuaikan judulnya, paling banyak dikunjungi apakah setiap saat, 30 hari terakhir atau 7 hari terakhir dan apakah menyertakan gambar thumbnail atau tidak serta sedikit kutipan (snippet) apakah diadakan atau tidak sama sekali.

3. Simpan widget popular post yang telah dipasangkan.
4. Selanjutnya adalah menambahkan kode javascript/css dibawah ini tepat diatas kode </b:skin> atau diatas </style> yang ada di script HTML template blogger Anda.

/*Custom Widget Popular Post*/
.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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna Widget Popular Posts*/
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

5. Simpan template blogger dan restart komputer atau laptop Anda. Selanjutnya, silahkan akses apakah cara ini berhasil atau tidak. Jika gagal, silahkan ganti penempatan kode diatas dengan benar, apakah di atas </b:skin> atau diatas </style>.

Baca Juga: Cara membuat widget popular post seperti Evo Magz blogger template dan desain template blogger lainnya agar menjadi lebih cantik lagi. Good luck!

0 Response to "Cara Membuat Widget Popular Post Warna Warni seperti Template Blog Sang SEO"

Post a Comment

Berkomentarlah dengan baik dan benar, komentar spam tidak akan dipublikasikan. Harap baca semua atau keseluruhan artikel. Gunakan anonymous jika tidak punya akun google untuk berkomentar. Centang OK pada NOTIFY ME agar komentar balasan masuk ke email Anda.