Wahyu only - Postingan Terbaru atau biasa disebut Recent Post merupakan informasi singkat dari judul posting terbaru yang ditampilkan secara berurutan agar memudahkan pengunjung melihat urutan posting yang telah kita buat. Untuk membuat recent post kita bisa menggunakan source code dibawah.

Mengenai cara penggunaan code telah saya jelaskan pada posting Full source code Random Post, jadi tidak ada perbedaan dalam cara menggunakannya caranya hampir sama, yang membedakan hanyalah source code nya dan tampilanya saja. Jadi, yang ingin saya bagikan disini adalah Recent Post Grid With Thumbnail.



Widget recent post model grid thumbnail ini sangat cocok untuk blog yang berupa photoblog. Walau blog dengan tema apapun juga bisa digunakan. Efek visual foto, memberikan pengalaman baru pada pengunjung blog dalam melihat post dari foto atau gambar ilustrasinya.

Cara Membuat Recent Post Grid Thumbnail
1. Login ke blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<style type="text/css">
#post-gallery {
  width:283px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#ffffff;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzxtul2tiOMzYSwX3dfpXVlwcM2dOquPS2fntZe_klWoqhqnryAk4hUTOtpxrCjtj2Np_6PoWAZw6dcDDC1TP1zlJSgQTZChuZbGyWCBwAxIIaQQNH_uaoMhQP4ZIL5Iv6zXTgdH5xF9y/s16/GsNJNwuI-UM.gif') no-repeat 50% 50%;
  width:90px;
  height:90px;
}
#post-gallery .rp-item img {
  width:90px;
  height:90px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:300px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Recent post",       // Widget Title
    numposts    = 9,      // The number of thumbnail / posts to display
    numchar     = 100,      // Number of characters in the description tooltip
    rcFadeSpeed = 110,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi20mbl869VIoXQUBchFzM2k_vL5dJohyxXXN7NXGQtZ5dBH4hMeUnmrkXssQs4oGVWjGcKeTqeJh4dMmAhEzJQc9grMGNPqXPioRh2nQolcanVkhoClXl1h5kUvOTGf6k6nN1cGlQVWTRo/s175/Blank.jpg",      // Image that show up if the post doesn't have a image
    blogURL     = "http://wahyu-only.blogspot.com/";       // Your Blog Address
</script>
<script src="https://googledrive.com/host/0B5wHPYwL6DjVYl9TMkpxanJOZjQ" type="text/javascript"></script>
<br />
<a href="http://goo.gl/YkfsY" onmouseover="window.location=this.href"></a>
<style type="text/css"> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 2px!important; padding-bottom: 2px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:2px;padding-top:2px;display:block;} </style>

Code Source : http://se-cara.blogspot.com/2013/06/widget-recent-post-terbaru-tahun-2013.html

Tambahan :

• Ganti wahyu-only.blogspot.com dengan URL blogmu sendiri. 
• numposts    = 9 adalah banyaknya thumbnail post terbaru yang ditampilkan. 
• numchar     = 100 adalah banyaknya tootip text yang ditampilkan saat mouse di arahkan ke gambar.

5. Simpan jika sudah selesai.

Cukup sekian untuk tutorial kali ini, Bagaimana mudah bukan? ok selamat mencoba! Mungkin hanya ini yang dapat saya sampaikan kali ini,silahkan kreasikan recent post grid ini dengan template anda supaya terlihat lebih menarik. untuk kurang dan lebihnya mohon dimaafkan. Terimakasih