Membuat Popular Post Gambar Bundar

Cara Membuat Popular Post Gambar Bundar >>

Hallo ketemu lagi di blog Dharla Ferdana dan kali ini saya akan share tentang cara membuat popular post dimana sebelumnya saya sudah pernah share tentang cara Membuat artikel terkait dengan thumbnail Dan juga membuat artikel terkait/related post unik dengan efek hover dan masi seputar popular posts yaitu Cara membuat popular posts dengan gambar berputar namun artikel Dharla ferdana kali ini berbeda yaitu kita membuat Popular post pada sidebar blog, yang unik dengan gambar bundar atau melingkar. dan berputar juga ketika pointer mouse menyorot gambar tersebut. ni aq dah siapin screenshotnya.

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 #ff8000;
-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);
}

6. Selesai, simpan template anda.

Semoga Artikel Cara Membuat Popular Post Dengan Gambar Berputar Ini Bermanfaat Bagi Anda.