Gambar bulat berputar

Posted by bilbee-one 20/04/13 0 komentar
Sobat blogger,untuk mempercantik blog kita banyak caraya di antaranya gambar bulat yang berputar apabila kena cursor mouse.nah kali ini saya akan share bagai mana cara nya membuat gambar bulat berputar di popular post seperti yang ada di blog ku.Berikut ini caranya sob:
1.Tentunya sobat harus log in terlebih dahulu pada blog sobat
2.klik edit html
3.centang expand templet widget agar semua kode CSS dan java script terbuka
4.kemudian sobat cari deh kode ]]></b:skin>kemudian letakan kode berikut ini tepat di atas kode ]]></b:skin> jangan lupa sebelum nya backup dulu templet nya untuk jaga-jaga.
/* POPULAR POSTS
.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{
padding-left:0px;
overflow:auto;
margin:0px 0px 0px 0px;
width:225px;
height:400px;
background-color: #;
border:0px solid #000;
} .popular-posts ul li {
list-style-image: none;
list-style-type: none;
margin:0 0 px 0px;
padding:5px 5px 5px 15px !important;
}*/
.popular-posts ul li img {
padding:2px 2px 2px 2px;
background: #ff0000;
border: 3px solid #00CC00;
-webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.popular-posts ul li img:hover {
border: 3px solid #0000ff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
Arsip Blog Bilbee-one
Comments
0 Comments

0 komentar:

Posting Komentar

Silahkan tinggalkan coment