Cara Membuat Popular Post Lebih Bewarna Pada Blog

Cara Membuat Popular Post Lebih Bewarna Pada Blog - Kali ini saya akan membuatkan mengenai artikel terkini tips serta trik panduan blog pada widget popular post agar lebih tampil keren dengan menampilkan rona warni dengan hanya sedikit memodifikasi pada CSS nya.
Sebenarnya Popular post bergaya rona warni ini terinspirasi pada blognya mas sugeng yaitu evomagz anda sanggup membuatnya pada artikel aku sebelumnya yaitu Cara Membuat Entri Post Evomagz silahkan anda baca.

Nah, bagi sahabat yg ingin memodifikasi entri popularnya menjadi warna warni agar lebih menarik dilihat anda mampu memakai trik ini, Mudah banget lho cara mengolahnya praktis serta cepat bahakan anda hanya perlu copy pastekan saja css nya.

Sebelumnya tahukah anda apa itu popular post/artikel popular? pengertiannya yaitu sebuah artikel yang dalam blog yg paling poly dibaca sang pengunjung, Nah bila anda hanya memakai 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 serta cari Entri Popular
• Langkah selanjutnya anda hanya mensetting pada bagian seperti pada gambar ini dia :

• Kemudian anda copy code CSS dibawah ini serta pastekan sempurna diatas kode  ]]> atau

.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(dua) 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-imgdisplay:inline;opaciry:10;margin:0 6px 3px 0; 

• Save serta silahkan anda lihat hasilnya! 

Popular Post Warna Warni Terbaru buat Blog : 

Sebenernya ada poly sekali modifikasi Entri Populat blog anda juga mampu jua sanggup menggunakan Widget Popular Post warna Warni yg lainnya seperti dalam gambar ini dia:

Untuk kode scriptnya ini dia :

/*Custom Popular Post*/
.popularPosts ul,.popularPosts li,.popularPosts li img,.popularPosts li a,.popularPosts li a imgmargin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none
.popularPosts ulmargin:.5em 0;list-style:none;color:black;counter-reset:num
.popularPosts ul libackground-color:#eee;margin:0 0 0 0!Important;padding:.5em 1.5em .5em .5em!Important;counter-increment:num;position:relative
.popularPosts ul li acolor:#fff!Important
.popularPosts ul li a:hovercolor:#2c3e50!Important
.popularPosts ul li:before,.popularPosts ul li .item-title a,.popularPosts ul li afont-weight:bold;color:inherit;text-decoration:none
.popularPosts ul li:beforecontent: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(tiga)background-color:#2ecc71;
.popularPosts ul li:nth-child(4)background-color:#27ae60;
.popularPosts ul li:nth-child(lima)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-thumbnailmargin:0 0 0 0
.popularPosts .item-snippetfont-size:11px

Mudah bukan tipsnya, sekian artikel kali ini semoga bisa berguna dan membantu anda pada memodifikasi entri popular menjadi jauh lebih keren dan tampil beda menggunakan yang lainnya. CSS diatas merupakan wangsit menurut template evomagz yang dibuat sang mas-sugeng bila ada kekurangan silahkan berkomentar secara bijak!