Cara Membuat Widget Post Terbaru Atau Artikel Terbaru di blog

Cara membuat widget Recent post atau Artikel Terbaru bergambar di blog. | Apa fungsi sih fungsinya Widget Post Terbaru Atau Artikel Terbaru,? Widget Post Terbaru 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 di perlu memasang widget ini, Widget Post Terbaru Atau Artikel Terbaru 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.

Berikut Cara Pemasangan Widget Post Terbaru Atau Artikel Terbaru 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>

Source kode arlina design.
Ganti jumlah posting yang akan tampil pada angka 5. Kode ini telah dicoba dan berhasil, seperti terlihat pada gambar.

Terakhir Simpan: