Membuat Popular Post Bulat Dan Berputar

Diposting oleh Unknown - 3 komentar

kali ini tentang yg bulat dan berputar2 lagi..dgn artikel sbelumnya Membuat Gambar Di Homepage Berputar

contohnya sperti di blog saya di sidebar kiri

Cara membuat popular post dengan efek gambar bundar pada blog :
1. Log in ke Blogger
2. Rancangan
3. Tambah Gadget => Pilih Popular Posts
4. Beri Judul Popular Posts

Langkah selanjutnya cara memasang popular post dengan efek gambar bundar :
1. Rancangan => Edit HTML
2. Centang Expand Template Widget
3. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atasnya

/* 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);
}