Hallo ketemu lagi di blog DH-F 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 DH-F 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. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atasnya.

CSS

.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);
} 

Kemudian, simpan template anda.