Related Post Thumbnail Tampilan Baru Dengan Navigasi Kolom Dan Efek Tooltip

Dalam hari ini taukahbahwa.blogspot.com akan menyajikan artikel tentang Related Post Thumbnail Tampilan Baru Dengan Navigasi Kolom Dan Efek Tooltip. Semoga dengan artikel Related Post Thumbnail Tampilan Baru Dengan Navigasi Kolom Dan Efek Tooltip akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

                                   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/

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com