Thursday 8 January 2015

Thursday 8 January 2015

Cara Membuat Popular Post yang Simple tapi Keren di Blog

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
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.

+ comments + 2 comments

24 April 2017 at 07:56

sudah dicoba di denikurnia.com. Mantap, terima kasih...

Terimakasih Deni Kurnia atas Komentarnya di Cara Membuat Popular Post yang Simple tapi Keren di Blog
22 June 2018 at 00:15

"Yuk Buruan Daftar dan Bermain di Website Http://www.jkt48poker.net
Sekarang JKT48POKER Memiliki Game Terbaru Dan Ternama loh.
Dan Masih Banyak Bonus-Bonus Yang Menarik...

=> Bonus New Member 30%
=> Bonus Next Depo 5%
=> Bonus Refferal 15%
=> Bonus Turn Over 0,5%
=> Minimal Depo 10.000
=> Minimal WD 30.000
=> 100% Member Asli
=> Pelayanan DP & WD 24 jam
=> Livechat Kami 24 Jam Online
=> Bisa Dimainkan Di Hp Android
=> Di Layani Dengan 5 Bank Terbaik
=> 1 User ID 7 Permainan Menarik

Ayo Bergabung Dengan Kami Di Poker Online Terbaik "

Terimakasih ws atas Komentarnya di Cara Membuat Popular Post yang Simple tapi Keren di Blog
Post a Comment