Cara Membuat Popular Post Terbaru (Mejikuhibiniu)

Kali ini mau share tutorial blogger tentang Cara Membuat Popular Post Terbaru (Mejikuhibiniu).
Sama seperti semua nya ga ada yang beda kok dari popular post ini, beda nya cuma warna doang, mengambil tema tentang Mejikuhibiniu (Merah,Jingga,Kuning,Hijau,Biru,Nila,Ungu).

Hanya warna doang yang di modifikasi, biar kelihatan rada kreatif gitu. Kalau sudah tau caranya mungkin ini tuorial bisa dibilang basi, tapi saya khususkan untuk yang belum tau saja..

Cara Membuat Popular Post Terbaru (Mejikuhibiniu)

Langsung saja ya ke tutorialnya karna saya gak bisa ngomong panjang lebar..
  1. Tentunya buka bloggernya
  2. Masuk tab edit html
  3. Back up atau download full tamplate nya untuk menghindari eror atau kesalahan.
  4. Cari kode ]]></b:skin> atau </style> Pakai CTRL+F or F3 Untuk mempercepat pencarian
  5. Jika sudah ketemu copy paste kode berikut diatasnya kode ]]></b:skin> atau </style>
/*Custom 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 */
.PopularPosts ul li:nth-child(1){background-color:#DC143C;}
.PopularPosts ul li:nth-child(2){background-color:#FF7F00;}
.PopularPosts ul li:nth-child(3){background-color:#FFD700;}
.PopularPosts ul li:nth-child(4){background-color:#008000;}
.PopularPosts ul li:nth-child(5){background-color:#0000CD;}
.PopularPosts ul li:nth-child(6){background-color:#6F00FF;}
.PopularPosts ul li:nth-child(7){background-color:#EE82EE;}
.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}

Jika sudah selesai klik simpan dan lihat hasilnya, karna warna mengangkat tentang Mejikuhibiniu jadi saran tampilkan popular postnya cukup 7 saja.
Share This :

Artikel terkait : Cara Membuat Popular Post Terbaru (Mejikuhibiniu)

Posting Lebih Baru Posting Lama

0 komentar: