Cara Membuat Widget Recent Post Hanya Thumbnail - Untuk mempercantik tampilan blog, biasanya para blogger menambahkan fitur recent post atau postingan terbaru guna mempermudah pengunjung mengetahui update terbaru dari blog yang dikunjungi. Dan kali ini saya akan share cara membuat widget recent post yang hanya menampilkan thumbnail saja yang cocok untuk blog penyedia template.
1. Masuk ke akun blogger anda.
2. Pergi ke tata letak -> tambah gadget -> html/javascript.
3. Beri judul misalnya "Postingan Terbaru".
4. Copy dan paste script berikut ini di bagian kotak yang besar.
<style type='text/css'>
.bp_item_thumb {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_AZMl2zeAP6yNjVERr2BHy5RG3FhSVhOqD3_A75TEiG_A75zJ_mQ50jPiUfugtfHoZRbTEtmWi-_SWbghdqhhMeN39yzdIutvrEDSToEVeiF66vGure2GhG3Dm9EmG1puJxbeAV8JzQ/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 = 9;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 50;
var imgFloat = 'left';
var myMargin = 10;
var mediaThumbsOnly = false;
var showReadMore = false;
</script>
<script src='http://ramadhanlmzero.blogspot.com/feeds/posts/summary?max-results=16&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
.bp_item_thumb {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_AZMl2zeAP6yNjVERr2BHy5RG3FhSVhOqD3_A75TEiG_A75zJ_mQ50jPiUfugtfHoZRbTEtmWi-_SWbghdqhhMeN39yzdIutvrEDSToEVeiF66vGure2GhG3Dm9EmG1puJxbeAV8JzQ/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 = 9;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 50;
var imgFloat = 'left';
var myMargin = 10;
var mediaThumbsOnly = false;
var showReadMore = false;
</script>
<script src='http://ramadhanlmzero.blogspot.com/feeds/posts/summary?max-results=16&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
Text yang berwarna merah bisa anda ganti untuk mengubah jumlah thumbnail yang tampil
Text yang berwarna oranye bisa anda ganti untuk mengubah ukuran gambar
Text yang berwarna biru bisa anda ganti dengan url gambar anda
5. Jangan lupa klik "simpan".
Sekarang widget recent post anda sudah selesai terpasang. Ingat! Ini hanya menampilkan thumbnail saja.
Selamat mencoba ^_^
0 comments:
Posting Komentar
Hargai penulis dengan memberikan komentar yang baik dan mengklik iklan yang ada
Rules komentar :
1. No SPAM
2. No live link (link aktif)
3. Jika bertanya gunakan akun yang terdaftar
4. Komentar yang tidak pantas akan dihapus oleh admin