Modif Widget Popular Post di Blogger

Sudah lama tidak posting tentang otak-atik template blogger, karena ada sahabat yang tertarik dengan Widget Popular Post di blog ini, maka aku  sempatkan posting tentang Widget Popular Post.

Widget ini berfungsi untuk menampilkan postingan atau artikel yang ada di blog sampeyan yang paling banyak diminati para pengunjung.

Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Posting kali ini tentang memodifikasi Widget Popular Post, agar tampilannya sedikit beda, kalau disorot pada gambar akan berputar.

Seperti dibawah ini tampilannya;

Masbro tertarik?... simak caranya dibawah ini, aku anggap sampeyan sudah punya widget Popular Post;

• Login ke Blogger dengan akun Blogger sampeyan
• Setelah itu masuk ke template > klik Edit HTML
• Lalu klik panah di depan kode <b:skin>...</b:skin>

• Cari kode yang seperti ini;

• Ganti dengan kode dibawah ini;

.widget .popular-posts ul {
  list-style: none; text-align: right; font-size: 80%; color: #999999; 

background: #ffff; border: 1px solid #DEDEDE; margin:0 0 0px; 

padding-right:10px; padding-left:10px; padding-top: 5px; padding-bottom: 

5px;
}

.popular-posts  img {
  width:57px;height:60px; padding:0px;-moz-border-radius: 

5px;-webkit-border-radius: 5px;border-radius: 5px;

-webkit-transition: 

all 0.3s ease;-moz-transition: all 0.3s ease;transition: 

all 0.3s ease;

border: 1px solid #e6e6e6;
} 

.popular-posts  img:hover {
  border:1px solid #e6e6e6;-moz-transform: scale(1.3) rotate(-360deg) ;

-webkit-transform: 

scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;

-ms-transform: 

scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);
}

Selesai, Selamat mencoba