Modifikasi Recent Post Menjadi Thumbnails

Modifikasi Recent Post/Artikel Terbaru Menjadi Thumbnails - Siang sobat blogger, alhamdulillah bisa update postingan. Mungkin sobat pernah mendengar recent post/artikel terbaru, sudah banyak sekali bertebaran tutorial sejenis di blog-blog lain, tapi apa salahnya berbagi tutorial recent post dengan thumbnails/gambar. Fungsi dari Recent Post yaitu untuk memberitahukan kepada pengunjung beberapa postingan terbaru blog yang dikunjunginya. Dengan adanya recent post membantu pengunjung blog mengetahui apa artikel terbaru blog yang dikunjungi.

Modifikasi Recent Post Menjadi Thumbnails : :

1. Silahkan sobat masuk ke link installer/generator recent post http://bloggerplugins.org/installers/recentpostswiththumbnails.html . Silahkan pilih option "Grid layout" agar tampilannya seperti gambar di atas.

2. Namun jika Anda langsung menyimpan script-nya maka akan terdapat error pada validasi HTML5 dari kode "&". Untuk itu silahkan tambahkan kode "amp;" (tanpa tanda kutip). Biasanya kode script untuk recent post dalam bentuk grid akan seperti di bawah ini.

<div id='bp_recent'></div>
<div class='bp_footer'><small><a id='bp_recent_link' target='_blank' href='http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html?utm_src=BP_recent' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://image.bloggerplugins.org/blogger-widgets.png' alt='Recent Posts with Thumbnails for Blogger' style='border:none' /></a>Powered By <a href='http://www.bloggerplugins.org/?utm_src=BP_recent' target='_blank' title='blogger widgets'>Blogger Widgets</a></small></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.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='http://www.sch-xp.blogspot.com/feeds/posts/summary?max-results=12&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Silahkan ganti URL-nya dengan URL blog Anda. Untuk keamanan silahkan hosting ulang kode js-nya yang berwarna biru di atas dengan akun Anda sendiri. Angka 12 di atas dan di bawah adalah jumlah postingan yang ditampikan. Angka 90 adalah size dari thumbnailnya dan angka 5 adalah margin dari tiap thumbnailnya. Dan silahkan tambahkan amp; pada kode & sehingga menjadi seperti di bawah ini.

<div id='bp_recent'></div>
<div class='bp_footer'><small><a id='bp_recent_link' target='_blank' href='http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html?utm_src=BP_recent' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://image.bloggerplugins.org/blogger-widgets.png' alt='Recent Posts with Thumbnails for Blogger' style='border:none' /></a>Powered By <a href='http://www.bloggerplugins.org/?utm_src=BP_recent' target='_blank' title='blogger widgets'>Blogger Widgets</a></small></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.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='http://www.sch-xp.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>

3. Silahkan simpan script di atas pada gadget HTML/JavaScript sidebar blog Anda, selesai.

semoga bermanfaat postingan kali ini, sampai bertemu lagi :)