Cara Membuat Popular Post Lebih Bewarna Pada Blog

Cara Membuat Popular Post Lebih Bewarna Pada Blog - Kali ini saya akan berbagi tentang artikel terbaru tips dan trik panduan blog pada widget popular post agar 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 yaitu evomagz anda bisa membuatnya pada artikel saya sebelumnya yaitu Cara Membuat Entri Post Evomagz silahkan anda baca.

Nah, bagi sahabat yang ingin memodifikasi entri popularnya menjadi warna warni agar lebih menarik dilihat anda bisa 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 yaitu sebuah artikel yang pada blog yang paling banyak dibaca oleh pengunjung, Nah jika 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 bagian seperti pada gambar berikut ini :

• Kemudian anda copy code CSS dibawah ini dan pastekan tepat 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 banyak sekali modifikasi Entri Populat blog anda juga bisa juga bisa menggunakan Widget Popular Post warna Warni yang lainnya seperti pada gambar berikut ini:

Untuk kode 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 jika ada kekurangan silahkan berkomentar secara bijak!

Sumber : http://mahrus-net.blogspot.com/2014/11/cara-membuat-popular-post-lebih-bewarna.html

Share this post