Cara Membuat Popular Post yang Simple tapi Keren di Blog

Cara Membuat Popular Post yang Simple tapi Keren di Blog

sds

1/08/2015

2 Komentar

Cara Membuat Popular Post yang Simple tapi Keren di Blog - Alhamdulillah kali ini saya kembali menulis di blog saya yang satu ini. Dan kali ini saya akan share tutorial tentang Cara Membuat Popular Post yang Simple tapi Keren di Blog. Dan jangan lupa juga melihat artikel saya sebelumnya tentang Cara Membuat Tooltip Keren di Blog.

Popular Post yang saya maksud gimana sih ? Nah, untuk melihat yang saya maksud Simple tapi keren anda bisa liat contohnya dibawah ini :

Cara Membuat Popular Post yang Simple tapi Keren di Blog

Bagaimana ? Keren kan mba bro ? :D

Nah untuk membuat seperti itu, silahkan ikuti tutorial di bawah ini :

1. Anda harus login di akun blogger anda

2. Masuk di bagian Edit HTML

3. Copy kode berikut dan paste di atas kode ]]></b:skin>

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

4. Kemudian save dan lihat hasilnya :)

Demikianlah tutorial untuk Cara Membuat Popular Post yang Simple tapi Keren di Blog, semoga dapat bermanfaan untuk teman - teman semuanya. Dan jangan lupa juga untuk membaca artikel lainnya di blog ini.