Cara membuat widget recent post bergambar di blog
widget - Cara membuat widget Recent post atau Artikel Terbaru bergambar di blog | Apa fungsi daripada Recent Post tersebut,? Recent post atau Artikel terbaru adalah sebuah fitur widget yang mampu menampilkan beberapa post atau artikel baru anda, Untuk membuat tampilan blog anda lebih menarik dan informatif anda perlu memasang widget ini, Widget Recent Post ini juga bermafaat bagi para pengunjung untuk mengetahui atau menelusuri artikel baru anda , dengan begitu pembaca akan lebih mudah untuk mencari informasi-iformasi terupdate dari blog anda.
Recent Post ini Menggunakan thumbnail yang dapat membuat tampilan widget anda lebih menarik karena disertakan gambar, sehingga pengunjung mungkin akan lebih terinspirasi untuk mengklik pos-pos tersebut.
Baca juga :
Cara membuat Widget recent comments di sidbar blog
Cara mudah memasang tombol follow witter di idbar blog
Sumber kode arlina design.
Ganti jumlah posting yang akan tampil pada angka 5. Kode ini telah dicoba dan berhasil, seperti terlihat pada gambar.
Terakhir Simpan:
Demikian penjelasan kami mengenai Cara membuat widget recent post bergambar di blog Semoga bisa menjadi referensi serta bermanfaat bagi anda.
Recent Post ini Menggunakan thumbnail yang dapat membuat tampilan widget anda lebih menarik karena disertakan gambar, sehingga pengunjung mungkin akan lebih terinspirasi untuk mengklik pos-pos tersebut.
Berikut cara pemasanganya membuat recent post dengan thumbnail di blog
Baca juga :
Cara membuat Widget recent comments di sidbar blog
Cara mudah memasang tombol follow witter di idbar blog
- Login ke akun blogger and
- Pilih Layout
- Klik Add Widget
- Pilih HTML/ Javascript
- Masukkan kode dibawah ini
<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:10px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:90px;height:62px;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#2b427d;font-size:13px;font-weight:700;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#138be6}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=5,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>
Ganti jumlah posting yang akan tampil pada angka 5. Kode ini telah dicoba dan berhasil, seperti terlihat pada gambar.
Terakhir Simpan:
Demikian penjelasan kami mengenai Cara membuat widget recent post bergambar di blog Semoga bisa menjadi referensi serta bermanfaat bagi anda.
Recent post di atas kelihatan SEO friendly sekali ya mas
ReplyDeletegood job guys,, suwun ya mas
ReplyDeletemaaf gan, di template blog ane gak bekerja.
ReplyDeletetapi thanks udah kasih ilmu baru.
kunjungi juga blog ane di
https://www.benz-motivator.blogspot.com
Ijin nyobain mas... hahaha
ReplyDeletecupaya thumbnail bisa mepet gimana ya, terlalu renggang
ReplyDeleteMepet kemana, ke kanan atau ke kiri?
Deletebukan kanan kiri gan tapi sekiranya bisa mepet keatas kebawah
DeleteMaksudnya lebih rapat barisanaya gitu Mas?
Deleterecent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;
DeleteLihat kode diatas
Ubah angka marginnya seperto ini
recent_posts_arlina {float:left;width:100%;margin:5px 5px 5px 0px;
Barangkali bisa, jika gagal ubah angak angka yg lain,
Karna sy sendiri make kodenya persis di atas,
Komputer lagi rusak Mas, jadi saya bantunya g bisa maksimal
Lihat widget post terbaru yg baru saja saya tambahkan.
DeleteItu memakai kode diatas apa adanya Mas
sip mas sudah sukses.. makasih banyak sarannya..
Deletekalau kode script untuk postingan populer kayak punya pean ini gimana mas? minta cssnya dong mas?
DeleteKalau untuk widget post populer, g pake css ataupun script Mas, ada setinganya otomatis.
DeleteUntuk platform blogspot
.
Buka saja dasboard pilih tata letak, pilih tambahkan widget.
Pilih "postingan populer"
Pilih 7 atau 10 postingan yang di tampilkan.
Pilih thumdnail dan kutipan judul.
Lalu klik simpan.
masalahnya saya menggunakan template viomagz mas, jadi kan nggak sama pas dengan widget postingan terbaru ini..
Deletesudah bisa gan, potingan populer aq edit cssnya..
ReplyDeleteYa bagus widget post terbarunya, cuma terlalu rapat jadi g ada bordirnya
Delete