Tutorial Membuat Popular Post Dengan Style (V1)

Screenshot Tutorial Membuat Popular Post Dengan Style (V1)

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.

2. Klik butang "More Options" dan klik " Layout  ".

3. Pada halaman Layout, klik " Add a Gadget " .

4. Klik pada widget Popular Posts.

5. Pada Configure Popular Posts, setting popular post , untick pada image thumbnail dan snippet . Setelah itu, klik Save.

6. Selanjutnya , Klik pada " Template " .

7.  Klik " Edit HTML "

8. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

9. Cari(Ctrl+F) kod dibawah:

 ]]></b:skin>

10. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>

#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:-8px 0px 1px;
left:-8px;
width:400px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 7px;
left:-5px;
width:250px;
border:1px solid #ccc;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
display:block;
top:-5px;
left:-5px;
font-size:18px;
width:14px;
margin:0 0 10px 0;
padding:4px 4px 4px 3px;
color:#333;
text-align:left;
background:#E8E8E8;
text-indent:2px;
}
#PopularPosts1 ul li:after{
content:"";
position:absolute;
top:-5px;
left:15px;
width: 0px;
height: 0px;
border-top:5px outset transparent;
border-left:5px solid #aeaeae;
}
#PopularPosts1 ul li a{
font-size:12px; /* Font size of the links */
color:#444; /* Color of the links */
font-style: italic;
margin-left:20px;
display:block;
min-height:25px;
text-decoration:none;
padding:0 4px 3px 15px;
}
#PopularPosts1 ul li:hover{
background:#f9f9f9;
border:1px solid #aaa;
}
#PopularPosts1 ul li a:hover{
color:#0174DF;
}

11. Preview dan jika ok Klik Save Template

 SELAMAT MENCUBA :)