Widget Recent Post Dengan Thumbnail Tooltips

Jika blog Anda memiliki posting yang banyak dan Anda ingin membantu pengunjung Anda untuk menemukan posting terbaru Anda dengan cepat maka recent post sangat membantu. Seperti yang telah Anda lihat di beberapa blog milik blogger lain. biasanya widget ini ditempatkan dalam sidebar blog. Widget recents post ini dapat menampilkan posting terbaru dengan Thumbnail dan garis sebagai tooltip dengan gaya moueover pada thumbnail dengan efek memudar. langsung saja berikut ini cara memasangnya.

Demo Widget

Ikuti langkah-langkah yang sangat sederhana ini untuk menambahkan "Widget Recent Post Dengan Thumbnail Tooltips Untuk Blogger" di blog Anda.

Langkah 1: Login ke Blogger> tata letak> Elemen Halaman
Langkah 2: Klik "Tambah Gadget"
Langkah 3: Dari jendela pop-up, pilih HTML / JavaScript
Langkah 4: Copy dan paste kode di bawah ini

<style type="text/css">
#post-gallery {
  width:300px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:##000000
;
  padding:8px;
  background-color:#1BA1E2
;
  -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:#000000;
  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/AVvXsEiaGFE3n2KKmCDTVLPaWM6KRotaBPOFV_y_-d6gc0n4vhQg5KCZJanQraUZlkfx0qjpRAWF1fuNVOllGB_3ay9a1Idp6CErFkFQGdVusVaNIJif1xKWBHT00UgnwTPAAUuYQLdmLSC0Ds_U/s48/Bloggerheroe.comloading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  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:200px;
  background-color:white;
  border-top:5px solid #1BA1E2;
  -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:#1BA1E2;
}
#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     = "Latest Post",       // Widget Title
    numposts    = 20,      // jumlah post yang tampil
    numchar     = 200,      // karakter deskripsi dalam tooltip
    rcFadeSpeed = 600,      // kecepatan efek pudar
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEwyHFajESZVyc2oAbt7iXN21BH_0Pj_wEOHbjjlknbnheFvVY9DY-2ZPw0H2jd1a8_BkRLoZW1bdslP4CMhBDbnuLLpRwr60s2LcAXi7oFmG5uWtBeQVpmZyPR4R4gjjVwnvu7hdsRXLH/s100/no-img.png",      // gambar untuk posting tanpa gambar
    blogURL     = "http://defandaky.blogspot.com/";       // alamat blog
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>

kustomisasi

Ganti http://defandaky.blogspot.com/ dengan url blog Anda.
numposts adalah jumlah thumbnail / posting yang ingin ditampilkan.
numchar adalah jumlah karakter dalam tooltip deskripsi.
rcFadeSpeed ​​adalah kecepatan efek memudar.

Sekarang simpan widget dan periksa blog Anda. Jika Anda menghadapi masalah atau kesulitan memasang widget ini, kirimkan kesulitan Anda dalam komentar.