Cara Membuat Popular Post Lebih Bewarna Pada Blog

9 views

Cara Membuat Popular Post Lebih Bewarna Pada Blog – Kali ini aku akan membuatkan wacana artikel terbaru tips dan trik panduan blog pada widget popular post biar lebih tampil keren dengan menampilkan warna warni dengan hanya sedikit memodifikasi pada CSS nya.

Sebenarnya Popular post bergaya warna warni ini terinspirasi pada blognya mas sugeng yakni evomagz anda mampu membuatnya pada artikel aku sebelumnya yakni Cara Membuat Entri Post Evomagz silahkan anda baca.

Cara Membuat Popular Post Lebih Bewarna Pada Blog
Nah, bagi sobat yang ingin memodifikasi entri popularnya menjadi warna warni biar lebih menarik dilihat anda mampu menggunakan trik ini, Mudah banget lho cara membuatnya simpel dan cepat bahakan anda hanya perlu copy pastekan saja css nya.
Sebelumnya tahukah anda apa itu popular post/artikel popular? pengertiannya yakni sebuah artikel yang pada blog yang paling banyak dibaca oleh pengunjung, Nah jikalau anda hanya menggunakan tampilan default saja maka tampilannya polos tanpa ada sentuhan css. Mari kitasimak bagaimana cara memodifikasinya?

Berikut Cara Memodifikasi Entri Popular Keren :

  • Silahkan anda masuk ke blogger.com
  • Kemudian silahkan anda Tambahkan Gadget dan cari Entri Popular
  • Langkah selanjutnya anda hanya mensetting pada bab menyerupai pada gambar berikut ini :
Memodifikasi Popular Post Lebih Bewarna Pada Blog
  • Kemudian anda copy code CSS dibawah ini dan pastekan sempurna diatas kode  ]]></b:skin> atau </style>

.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 {color:#444 !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:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !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;} 

  • Save dan silahkan anda lihat hasilnya! 

Popular Post Warna Warni Terbaru untuk Blog : 

Sebenernya ada berbagai modifikasi Entri Populat blog anda juga mampu juga mampu menggunakan Widget Popular Post warna Warni yang lainnya menyerupai pada gambar berikut ini:
Widget Popular POST KEREN dengan Mudah
Untuk arahan scriptnya berikut ini :

/*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}

Mudah bukan tipsnya, sekian artikel kali ini semoga dapat bermanfaat dan membantu anda dalam memodifikasi entri popular menjadi jauh lebih keren dan tampil beda dengan yang lainnya. CSS diatas merupakan ide dari template evomagz yang dibuat oleh mas-sugeng jikalau ada kekurangan silahkan berkomentar secara bijak!

Tags: #Tutorial Blogger