Bangiz - 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.
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'>--> Simpan dan lihat hasilnya
.bp_item_thumb {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJzqL7szFTK_FAO-6-mVt9jnflEMmPyxVdIM6YlPDopTiz0hODcswjzbb06oCJs7aiBjqO6R5kJpIYBagLCEB-XxZ2xATZja-2x23bEXUnLk9E-BH9jaVfcw1V4T2TmEGiLiOJC7U-gzA/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://bangiz.blogspot.com/feeds/posts/summary?max-results=16&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
- Silahkan ganti http://bangiz.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.