 |
| 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 :)