Berbagai Gaya Widget Artikel Populer Dengan Thumbnail Bulat Untuk Blogger
Blogger.com-Widget Postingan Populer adalah alat yang hebat untuk menarik pengunjung Anda dengan menunjukkan kepada mereka konten apa yang sedang tren di situs web / blog Anda. Ini membuat pengunjung Anda tetap mengawasi topik populer yang Anda bahas dan menikmatinya langsung dari bilah sisi blog Anda. Selain manfaat ini, ada beberapa keterbatasan widget posting populer blogger sehingga tidak begitu menarik. Jadi Dalam tutorial ini, saya akan memandu Anda untuk membuat widget Post Populer Anda bergaya dan terlihat profesional dan menyesuaikannya sesuai dengan template blog Anda dengan mudah. Jadi mari kita mulai tutorial tentang bagaimana Anda dapat dengan mudah menambahkan widget posting populer bergaya ke blog blogspot Anda.
Tambahkan Widget Popular Post ke Blog Blogger:
Pertama-tama, Anda perlu menambahkan widget Pos Populer Blogger ke blog Anda dan menggunakan beberapa pengkodean CSS, memodifikasinya sesuai dengan kebutuhan Anda. Jadi, ikuti langkah-langkah yang diberikan di bawah ini.
- Buka Blogger > Tata Letak (Layout).
- Klik Add gadget dan Pilih gadget Popoular Posts dari daftar gadget.
- Sekarang lakukan pengaturan berikut:
- Setel paling banyak dilihat hingga 7 hari Terakhir (disarankan) atau Anda dapat mengaturnya sesuai dengan kebutuhan Anda.
- Centang image thumbnail dan snippet untuk menampilkan gambar thumbnail setiap postingan bersama dengan ringkasan postingan. Ini akan membuat gadget kami lebih keren.
- Pilih Display up until, posting yang ingin Anda tampilkan. Dalam contoh ini, saya memilih 6. Anda dapat menampilkan paling banyak 10 posting. (Lihatlah gambar di bawah.)
- Simpan widget dan ikuti langkah-langkah yang disebutkan di bawah ini.
- Sekarang Buka Blogger.com > Template.
- Cadangkan template Anda untuk mencegahnya dari tabrakan apa pun.
- Klik pada tab Edit HTML dan Cari </b: skin>. (Gunakan Ctrl + F untuk menemukan cepat)
- Sekarang Tepat di atas </b: skin>, tempel kiriman yang diberikan di bawah ini.
/*--- BBeginner.Com Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8DrVzNy9c3fQDPMknJHyqPZ6eeaWmyt38-zs3i9VIRwcSp4oFXHmtPDiZlNElGYhSeVKJRZjxu9fhksTaMwm2mWEWz1D4U8sGpywuws0nqASWMMhPG9nc3rXxKXM3acEtR1_pURRAo0/s1600/bb-bullet.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.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);
}
- Simpan template Anda dan Anda sudah selesai!
- Sekarang, lihat blog Anda dan lihat widget luar biasa ini beraksi.
Saya harap Anda berhasil menambahkan widget hebat ini ke blog Anda. Jika Anda menghadapi kesulitan apa pun, beri tahu saya di komentar. Saya akan sangat senang membantu Anda semua :)
