Cara Membuat Popular Post Warna Warni Pada Blog

Pada artikel kali ini, akan saya bagikan bagaimana cara membuat Pupular Post Warna Warni Pada Blog. Seperti yang kita ketahui, terpasangnya popular post pada blog ini sangatlah penting karena jika ada pengunjung yang datang ke blog sobat mereka akan mengetahui postingan postigan sobat yang sering di baca oleh pengunjung lain.

Tetapi dengan hanya mengandalkan poular post bawaan template akan membuat blog sobat biasa biasa saja, tetapi bagaimana jika popular post pada blog sobat memiliki berbagai warna? tentu akan menjadi daya tarik trsendiri untuk para pengunjung yang datang ke blog sobat.


Cara Membuat Popular Post Warna Warni Pada Blog


Nah berikut ini tutorial cara memasang widget populare post warna warni pada blog sobat

1. Sobat harus Login terlebih dahulu pada blog sobat
2. Kemudian pada dasbor blogger, klik menu Template


Cara Membuat Popular Post Warna Warni Pada Blog
3. Setelah itu pada menu Template, klik Edit HTML, sebelum mengedit HTML template, saya sarankan untuk membackup template blog sobat terlebih dahulu.


Cara Membuat Popular Post Warna Warni Pada Blog

4. Cari kode ]]></b:skin>. untu mempermudah, klik CTRL + F kemudian cari.


Cara Membuat Popular Post Warna Warni Pada Blog

5. Setelah kode ]]></b:skin> ditemukan, pastekan kode di bawah oni tepat di atas kode ]]></b:skin>


#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

6. Setelah semuanya dilakukan dengan benar, terakhir klik Simpan Template dan Lihat Hasilnya.

 Sekian artikel Cara Membuat Popular Post Warna Warni Pada Blog ini, semoga dapat membatu semua sobat blogger. jika ada pertanyaan ataupun kritik dan saran, bisa sobat tulskan pada kolom komentar. Terimakasih telah berkunjung
Previous
Next Post »