pasang iklan

Cara Buat Popular Post for Blogger Berwarna

Di Kumpulan Cara, Kumpulan Cara Cara, Tips dan Trik, Widget
Cara Buat Popular Post for BloggerPopular 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

Baca Juga:   5 Keuntungan dan Keamanan Bertransaksi Dengan Internet Banking Mandiri
  1. author

    Marnes Kliker2 tahun yang lalu

    wah sepertinya boleh juga nie dicoba mas, saya suka sama tampilan seperti ini 🙂

    Balas
  2. author

    Marnes Kliker2 tahun yang lalu

    wah sepertinya boleh juga nie dicoba mas, saya suka sama tampilan seperti ini 🙂

    Balas
  3. author

    Devy Indriyani2 tahun yang lalu

    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

    Balas
  4. author

    Devy Indriyani2 tahun yang lalu

    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

    Balas
  5. author

    Inkekura Blog2 tahun yang lalu

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

    Balas
  6. author

    Inkekura Blog2 tahun yang lalu

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

    Balas
  7. author

    KOPERASII LESTARI2 tahun yang lalu

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

    Balas
  8. author

    KOPERASII LESTARI2 tahun yang lalu

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

    Balas
  9. author

    KOPERASII LESTARI2 tahun yang lalu

    Mbak Devi bisa saja. Saya juga masih banyak belajar dari blog mbak devi.. 🙂

    Balas
  10. author

    KOPERASII LESTARI2 tahun yang lalu

    Mbak Devi bisa saja. Saya juga masih banyak belajar dari blog mbak devi.. 🙂

    Balas
  11. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mas, Responsive. Contohnya ada pada blog..

    Balas
  12. author

    KOPERASII LESTARI2 tahun yang lalu

    Iya Mas, Responsive. Contohnya ada pada blog..

    Balas
  13. author

    Ridha Harwan2 tahun yang lalu

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

    Balas
  14. author

    Ridha Harwan2 tahun yang lalu

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

    Balas
  15. author

    KOPERASII LESTARI2 tahun yang lalu

    Silahkan baca kembali mas. Sudah saya update untuk yang bertingkat 🙂

    Balas
  16. author

    KOPERASII LESTARI2 tahun yang lalu

    Silahkan baca kembali mas. Sudah saya update untuk yang bertingkat 🙂

    Balas

Tinggalkan pesan "Cara Buat Popular Post for Blogger Berwarna"

twenty + thirteen =

Baca Juga×

Top