Membuat Grid Thumbnail Recent Post

Membuat Grid Thumbnail Recent Post - Recent Post adalah posting terbaru di blog . Dan widget ini akan selalu mengupdate artikel terbaru anda .
Terlebih lagi Widget ini memiliki desain tampilan yang lumayan Oke dan Elegant . Contoh bisa anda lihat dibawah ini ,atau lihat Sidebar blog sayabagian bawah .

Untuk widget pada gambar diatas itu sudah saya modifikasi sendiri . Dan jika anda menyukainya , dibawah saya akan sertakan Kode nya .

Untuk itu disini saya akan membagikan 2 versi Recent post Grid Thumbnail , Original dan Modifikasi .

Untuk langkah pemasangannya cukup mudah , anda hanya perlu mengakses menu Layout pada dasbor dan tambahkan Gadget baru seperti biasa .

Berikutnnya pilih HTML/JavaScript dan letakkan kode dibawah ini kedalamnya .

Original

<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 = 10;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 3;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://xpress-community.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Note :

karena saya bukan Admin DTE yang akan menjelaskan secara detail dari JavaScript tersebut , maka saya hanya akan menjelaskan hal apa saja yang perlu anda ubah .
numberOfPosts = 10; adalah untuk mengatur jumlah post yang tampil
var imgDim = 70; adalah ukuran dari Thumbnail yang ingin anda tampilkan .
var myMargin = 5; adalah untuk mengatur jarak antar Thumbnail .

Modifikasi

<style type='text/css'>
.bp_item_thumb {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBaEugZ98wXGr8Shg5hAHi2CmL9D5Gsli8XJn3otxEkh29X9EE28_IyHTI7NhE1HsYfADRtFNYrj5KHzhJ2lTHy_wFSn5le-2wTp4rY99ojK4KPySfU5Ko_xkcA-CKrNfjtn-q5raYj0/s1600/zoom.png) no-repeat center;
position: relative;
display: block;
}
.bp_item_thumb img {
border: 1px solid #ddd;
text-decoration: none;
background:#fff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:3px;
}
.bp_item_thumb img:hover{
opacity: 0.3;
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 = 70;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://goblogination.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Note :

Disini saya tidak memberikan banyak perubahan , hanya ada beberapa diantaranya :
Background ,padding ,border dan Hover dengan efek Easy Out .
Untuk mengedit nya anda cukup merubah bagian Css dibawah ini :

.bp_item_thumb {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBaEugZ98wXGr8Shg5hAHi2CmL9D5Gsli8XJn3otxEkh29X9EE28_IyHTI7NhE1HsYfADRtFNYrj5KHzhJ2lTHy_wFSn5le-2wTp4rY99ojK4KPySfU5Ko_xkcA-CKrNfjtn-q5raYj0/s1600/zoom.png) no-repeat center;
position: relative;
display: block;
}
.bp_item_thumb img {
border: 1px solid #ddd;
text-decoration: none;
background:#fff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:3px;
}
.bp_item_thumb img:hover{
opacity: 0.3;
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;
}

Saya tidak tahu apa setting Css saya itu valid ataupun tidak karena tidak saya cek di Validator :D , yang penting di blog jalan .

Cuman ada satu masalah pada Css tersebut , yakni Hover tidak sempurna di Firefox . Mungkin anda bisa merubah dan menyempurnakan atau lebih baik menggunakan Originalnya .

Kemudian langkah terakhir Simpan dan silahkan diubah sendiri hal yang perlu diperbaiki dan disempurnakan .

Script JS diatas juga bisa anda host sendiri di Google Drive demi keamanan dan kemnyamanan bersama .
Script by :http://xpress-community.blogspot.com/