Mendesign Popular Post Dengan Warna, popular post berfungsi untuk menampilkan posting yang ada pada blog/web sehingga pengunjung blog mengetahui lebih banyak artikel yang ada pada blog Anda dan tertarik untuk mengklik posting yang anda buat seblumnya.
Cara mendesignya cukup mudah, perhatikan di bawah ini
1. Masuk ke blog sobat
2.Pilih Edit HTML
3. Kemudian masukkan code di bawah ini, tepat di atas code
]]></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: 0px; color: #333333; display: block;
font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px;
font-style: normal; font-variant: normal; font-weight: normal;
letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px;
min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto;
text-decoration: none !important; text-indent: 0px; text-transform:
none; white-space: normal; widows: 2; word-spacing: 0px;} #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}
4. Kemudian Save
5. Pergi ke tata letak dan hilangkan centang pada Konfigurasikan Popular Post
6. Terakhir simpan lagi dan lihat hasilnya