Cara Buat Popular Post for Blogger Berwarna

Cara Buat Popular Post for Blogger - Popular Post adalah postingan atau artikel yang paling banyak di lihat. Popular Post for Blogger dapat di setting menjadi Setiap Saat, 30 Hari Terakhir, dan 7 Hari Terakhir. Kamu Biasanya pakai yang mana? Pada kali ini saya akan mencoba berbagi untuk cara buat Popular Post fo Blogger Berwarna yang tentunya akan semakin semarak dan indah di liat. Popular Post ini memanfaatkan CSS Pseudo Element dan nth-child, sehingga saya jamin tampilannya akan semakin menarik dan tidak membosankan. Berikut adalah contohnya :

popular-post-for-blogger

Cara Buat Popular Post for Blogger Berwarna

1. Silahkan kamu login ke Akun Blogger Kamu
2. Lalu ke Tata Letak, Edit Widget Popular Post yang telah ada dan buat Popular Post hanya menampilkan judulnya saja lalu Simpan
3. Pergi Ke Template >> Edit HTML Cari Kode ]]></b:skin> atau </style> lalu simpan kode dibawah ini tepat diatas kode diatas.
/*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:#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}
 4. Preview (pratinjau) terlebih dahulu, lalu silahkan kamu simpan.

Namun jika kamu ingin menggunakan Popular Post for Blogger Berwarna Bertingkat, kamu bisa menggunakan kode di bawah ini :
/* 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:0px;
right:0px;
padding-right:0px !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;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}
Maka hasilnya akan seperti gambar dibawah ini :

popular post berwarna bertingkat

Abrakadabra..., widget Popular Post for Blogger kamu sudah jadi. Bagaimana cukup mudah bukan Cara Buat Popular Post for Blogger Berwarna? Sekarang, kamu bisa memiliki widget popular post berwarna impian kamu. Kamu bisa mengganti warna sesuka kamu kok dengan mengganti kode warna yang saya beri warna merah. Selamat mencoba.. :) Oh iya, jangan lupa juga membaca Widget Most Commented for Blogger Warna Warni

Related : Cara Buat Popular Post for Blogger Berwarna

8 comments:

  1. wah sepertinya boleh juga nie dicoba mas, saya suka sama tampilan seperti ini :)

    ReplyDelete
    Replies
    1. sama mas marnes, apalagi kalau saya yang masih butuh banget tutorial seperti ini buat mempercantik tampilan blog, maklum mas masih pemula, jadi tutorialnya mau langsung saya pasang biar cantik tampilan blog saya dengan warna-warni

      Delete
    2. Silahkan mas di coba. Tampilannya memang cantik dan nyaman di lihat..

      Delete
    3. Mbak Devi bisa saja. Saya juga masih banyak belajar dari blog mbak devi.. :)

      Delete
  2. blog saya masih baru, saya butuh popular post seperti ini mas.. apakah popular post ini sudah responsive mas?

    ReplyDelete
    Replies
    1. Iya Mas, Responsive. Contohnya ada pada blog..

      Delete
  3. Kalau dimofikasi pewarnaannya adi model gradiasi atau bertingkat-tingkat gitu bisa gak yah.

    ReplyDelete
    Replies
    1. Silahkan baca kembali mas. Sudah saya update untuk yang bertingkat :)

      Delete