Bagikan melalui WhatsApp
semoga menjadi ilmu yang bermanfaat untuk orang banyak.
semoga menjadi ilmu yang bermanfaat untuk orang banyak.
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;
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
previous
« Prev Post
« Prev Post
next
Next Post »
Next Post »