11 July 2013

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

Author : Zainoel Arifin Isa'i

Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas/ freelance yang bermarkas di sudut ruang kamar belakang rumah di daerah pelosok desa terpencil lereng gunung Arjuno.... Facebook : -Mbah Djojo-

3 comments:

  1. wah mantap gan, terimakasih ya infonya..
    semoga artikel yang agan buat bisa lebih bermanfaat buat banyak orang.
    terimakasih.
    www.dream37.blogspot.com

    ReplyDelete
  2. waaah...ini nieh,,,,, om,,,,,sekalian minta donk, biar komennya da Emoticonnya,,,hehhhee,,,

    ReplyDelete
  3. Mantap,tutorialnya sangat jelas dan bermanfaat.

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus