Cara Membuat Recent Post Hanya Gambar Valid HTML5

Tutorial blog kali ini tentang cara membuat widget recent post atau postingan terbaru hanya menampilkan gambar atau thumbnail saja. Widget ini sudah divalidasi HTML5, sehingga tidak perlu khawatir dengan error code yang akan timbul nanti. Widget recent post memberitahukan setiap artikel terbaru dari blog, sehingga orang lebih mudah melihat update dari blog tertentu tanpa harus menuju ke halaman depan atau homepage.

Baca juga: Membuat Social Share Button Responsive Tanpa JavaScript di Blog

Recent post dengan hanya menampilkan thumbnailnya saja akan menambah keindahan blog menjadi semakin terlihat apik dan elegan. Kebanyakan orang akan lebih teretarik melihat gambar daripada rangkaian text yang menjadi judul sebuah postingan.

Tertarik untuk memasang widget ini di blog anda? Ikuti tutorialnya berikut ini.

Cara Pasang Recent Post Hanya Menampilkan Thumbnail

1. Login ke blogger, masuk ke dasbor blog, kemudian temukan menu Tata Letak > Tambahkan Gadget (pada sidebar) > HTML/JavaScript,

2. Kopi dan paste kode di bawah ini ke dalam gadget tadi

<div id='bp_recent'></div>
<script style='text/javascript' src='https://rawgit.com/bungfrangki/recentposts/master/recentpost_thumb.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 90;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='//www.bungfrangki.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>

Perhatikan kode di atas, var numberOfPosts = 12;
 Adalah jumlah postingan yang ingin ditampilkan. Kemudian ganti www.bungfrangki.com dengan nama blog anda.

3. Simpan, kemudian segarkan kembali blog anda, untuk melihat penerapan widget ini berhasil atau tidak.

Demikian tutorial tentang cara memasang recent post hanya menampilkan thumbnail saja di blog. Mudah-mudahan berguna, selamat mencoba.