Related Post Thumbnail Tampilan Baru Dengan Navigasi Kolom Dan Efek Tooltip

                                   http://ngeblogbarengbareng.blogspot.com/
Related Post tampilan baru ya begitulah saya menamai widged ini karena sebelumnya mungkin sudah ada di blog lain tetapi belum pernah saya lihat related post seperti ini sebuah related phttp://ngeblogbarengbareng.blogspot.com/ost yang menggabungkan animasi tooltip denganhttp://ngeblogbarengbareng.blogspot.com/ kolom navigasinya yang cuman mehttp://ngeblogbarengbareng.blogspot.com/nampilkan thumbnail
ok gan daripada penasaran lansung aja ke proses pembuatannya....

Masuk blog agan
kemudian pilihhttp://ngeblogbarengbareng.blogspot.com/ menu tata letak/add gadged
setelah itu copas semua kode dibawah ini pada kolom yang telah tersedia...http://ngeblogbarengbareng.blogspot.com/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css" scoped="scoped">
#mini-gallery {
  width:340px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0 auto;
  font:normal normal 11px Verdana,Arial,Sans-Serif;
  color:#666;
  padding:8px;
  background-color:#222;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal normal 14px Impact,"Arial Narrow",Arial,Sans-Serif;
  color:#999;
  text-shadow:0 1px 0 black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#3c3c3c;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0 0;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0 0 !important;
  padding:0 0 !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #3399ff;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
  box-shadow:0 0 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0 0 5px;
  color:#2473A8;
}

#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script type="text/javascript">
var rpTitle     = "Artikel Terbaru", // Tentukan judul widget
    numposts    = 8,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://images.cooltext.com/3096753.gif", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://ngeblogbarengbareng.blogspot.com/"; // Alamat blogmu
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/rp-mini-gallery.js" type="text/javascript"></script>

http://ngeblogbarengbareng.blogspot.com/

Catatan : untuk settingannya silahkan ubah kode berwarna Hijau sesuai keinginan anda
                kodetersebut menunjukan lebar kolom widgednya
              http://ngeblogbarengbareng.blogspot.com/

                Simak beberapa kode yang saya tandai dengan warna biru dibawah ini http://ngeblogbarengbareng.blogspot.com/

                Silahkan disesuaikan kode tersebuat dengan kebutuhan anda

Contohnya : Numpost adalah jumhttp://ngeblogbarengbareng.blogspot.com/lah post yang akan ditampilakn
                      pBlank adalah URL gambar pengganti ketika postingan tidak memiliki gambar
                      blog URL silahkan ganti http://ngeblogbarengbareng.blogspot.com/ dengan URL blog anda

Shttp://ngeblogbarengbareng.blogspot.com/aya rasa sudah cukup untuk related post navigasinya gan jika agan berminat silahkan dicoba saja..
Selamat mencoba semoga related postnya bisa bermanfaat....http://ngeblogbarengbareng.blogspot.com/