Cara Membuat Recent Post Hanya Thumbnail

• min read

Table of Contents

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.

Related: loading

--> 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/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>

--> Simpan dan lihat hasilnya