Tertarik
untuk menambahkan widget popular posts di Blog Anda..? Berikut tutorial
pembuatannya:
Tahap
Pertama:
>>> Login ke akun Blogger anda.
>>>
Pilih Edit HTML
>> Cari kode ]]></b:skin>
>>>
Setelah ketemu
letakkan kode dibawah ini 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: 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}
>>>
Simpan Template
Tahap
Kedua
>>> Pada menu tata letak >> Pilih add
gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan
gambar dan keterangan, tampilkan maksimal 9 posts.
>>> Simpan dan lihat hasilnya di Blog anda!
>>> Simpan dan lihat hasilnya di Blog anda!
Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada Blog. Semoga bermanfaat.
EmoticonEmoticon