Popular Post Bulat Dan Berputar

Cara Mudah Membuat Popular Post Bulat Dan Berputar

     Agar tampilan blog jadi lebih indah dipandang, maka perlu ditambahkan widget popular post yang unik dan menarik. Berikut ini adalah model popular post yang menampilkan tumbnail gambar yang bulat dan berputar saat krusor diarahkan ke gambarnya. Langkah-langkah pembuatannya adalah sebagai berikut.

1. Pertama-tama masuklah ke dasblor blog kalian. Setelah itu klik menu tata letak, kemudian klik cntrl+F/command+F (mac). 

2. Kemudian ketiklah kode ]]></b:skin>.

3. Copy pastelah kode dibawah ini tepat di atas kode ]]></b:skin>.

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-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);}

4. Save template kalian dan lihatlah hasilnya. Sungguh memperindah tampilan blog kita. Selamat mencoba.