Membuat Recent Posts Hanya Menampilkan Thumbnail

Recent Posts Hanya Menampilkan Thumbnail
Recent posts berfungsi untuk memberitahukan kepada pengunjung beberapa postingan terbaru blog yang dikunjunginya. Ketika pengunjung datang dari hasil pencarian ada kemungkinan mereka masuk pada postingan lama kita, nah dengan recent posts ini mereka akan mengetahui postingan-postingan terbaru dari blog yang dimaksudkan agar mereka tertarik untuk membacanya pula. Untuk itu diperlukan widget recent posts yang aktraktif yang tampilannya menarik perhatian pengunjung untuk meng-klik-nya.

Salah satu recent posts yang menurut saya cukup bagus untuk dicoba yaitu recent posts hasil kreasi Aneesh Joseph dari BloggerPlugins. Widget recent posts ini bisa menampilkan hanya thumbnail dalam bentuk grid yang dibentuk dari pure javascript. Sehingga ini bisa terapkan dan disesuaikan dengan popular posts dan random posts yang beberapa waktu lalu saya share yang juga hanya menampilkan thumbnails.

Screenshot:
Membuat Recent Posts Hanya Menampilkan Thumbnail

Bagaimana tertarik untuk mencobanya? Silahkan Anda masuk ke link installernya  berikut ini http://bloggerplugins.org/installers/recentpostswiththumbnails.html. Silahkan pilih option "Grid layout" agar tampilannya seperti gambar di atas. Pada gambar recent posts di atas saya menggunakan size thumbnail 90px yang saya simpan pada sidebar dengan lebar 300px.

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.kompiajaib.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.kompiajaib.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>

Silahkan simpan script di atas pada gadget HTML/JavaScript sidebar blog Anda. Selesai....

Sumber script: http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments