Cara Membuat Popular Post Keren Terbaru

Cara Membuat Popular Post Keren Terbaru- Ok sering kali sobat mungkin bosen dengan tampilan popular post yang dibawa dengan aslinya template blog, atau kadang bawaan template yang sudah sobat donwload. Mungkin sobat ingin menggantinya dengan yang lebih unik atau keren dan berwarna, saya akan membaginya dengan sobat.

Cara Membuat Post Keren Terbaru

1. Seperti biasa login blog sobat

2. Lalu sobat menuju dasbor pilih template

3. Lalu sobat klik edit HTML

4. Cari kode ]]></b:skin> lalu letakan kode dibawah tepat diatas kode ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}#PopularPosts1 ul li a{-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0;color:#333;display:block;font-family:Georgia,'Times New Roman',Times,serif;font-size:13px;font-style:normal;font-variant:normal;font-weight:400;letter-spacing:normal;line-height:18px;margin:0 10px 0 -5px;min-height:30px;orphans:2;padding:0;text-align:-webkit-auto;text-decoration:none!important;text-indent:0;text-transform:none;white-space:normal;widows:2;word-spacing:0}#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:0 0 5px #000;-moz-box-shadow:0 0 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:0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0 25px 0;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow:3px 3px 3px #000;padding:10px}#PopularPosts1 img{border-radius:200px;width:60px;height:60px;margin-left:4px}

5. Simpan template lau lihat hasilnya.

Kurang lebih hasilnya seperti gambar dibawah :