Cara Membuat Recent Post Hanya Thumbnail

Setelah sebelumnya pernah membahas tentang cara membuat random post hanya thumbnail dan tooltip, berikut ini Bangiz mau berbagi lagi tentang tutorial Blogger yaitu membuat recent post atau postingan terbaru yang hanya menampilkan thumbnail saja. Sebagai contohnya, silahkan lihat gambar berikut ini:

Gimana tertarik? Untuk penempatannya sendiri bisa Anda sesuaikan sendiri misalnya ingin di sidebar blog, bagian footer, di atas postingan maupun di bawah postingan. Kalau Anda suka dengan tampilan recent post hanya menampilkan thumbnail, langsung ikuti saja caranya sebagai berikut:

--> Masuk Dasbor Blogger

--> Pilih Tata Letak > Tambahkan Gadget > cari HTML/Javascript

--> Copy-paste kode berikut pada kolom tersedia selain judul untuk widget

<style type='text/css'>

.bp_item_thumb {

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYnI7bKQmKpqsHlwY2_l_jwIUGnSu0Soaw83ykZyJvCIkN9u0xoX7NDkzR6FHUdW6hvZsT1IN7LMh5xaKrqw_fVV0932f66TYnsPuuOgL-hRAfkmV7WdMIGSkyhkq-ogfP0ZlPkQrEgbw/s1600/zoom.png) no-repeat center;

position: center;

display: block;

}

.bp_item_thumb img {

border: 1px solid #c6c6c6;

text-decoration: none;

background:#fff;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

padding:3px;

}

.bp_item_thumb img:hover{

opacity: 0.6;

background-color: rgb(255, 255, 255,);

-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-webkit-transition: all 0.6s ease-in-out;

}

</style>

<div id='bp_recent'></div>

<script style='text/javascript' src='https://lioneldandy.googlecode.com/files/xc-recentpost.js'></script>

<script style='text/javascript'>

var numberOfPosts = 16;

var showPostDate = false;

var showSummary = false;

var titleLength = 0;

var showCommentCount = false;

var showThumbs = true;

var showNoImage = true;

var imgDim = 100;

var imgFloat = 'left';

var myMargin = 10;

var mediaThumbsOnly = false;

var showReadMore = false;

</script>

<script src='http://downloadwallpaperanimasi.blogspot.com//feeds/posts/summary?max-results=16&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>

--> Simpan dan lihat hasilnya

Keterangan:

Silahkan ganti http://downloadwallpaperanimasi.blogspot.com/ dengan url blog Anda

Angka 16 adalah jumlah thumbnail yang akan ditampilkan

Angka 100 adalah ukuran thumbnail gambar

Untuk pengaturan lainnya silahkan atur supaya sesuai dengan template yang digunakan