Modifikasi Widget Recent Post Efek Tooltip Pada Blog

Modifikasi Widget Recent Post Efek Tooltip Pada Blog – pada tutorial kali ini kita akan kembali membahas kaitannya mengenai efek tooltip pada widget blog seperti halnya efek yang nampak pada widget popular post tooltip yang sudah pernah saya share pada tutorial sebelumnya. Widget recent post atau artikel terbaru ini secara default hanya menampilkan thumbnail image yang berukuran kecil dan akan menampilkan ringkasan atau cuplikan dari isi artikel terbaru tersebut saat tersentuh kursor atau hover. Kaitannya dengan desain blog, terdapat banyak sekali widget recent post atau artikel terbaru dengan berbagai style efek, dan salah satunya pada widget recent post pada tutorial dibawah. Untuk membuat blog agar semenarik mungkin memang banyak kode yang perlu di gunakan dan dengan manipulasi kode script itulah bisa dihasilkan desain blog yang maksimal. Dari pada terlalu lama membayangkan atau hanya melihat gambar di atas, berikut tutorial untuk Modifikasi Widget Recent Post Efek Tooltip Pada Blog agar lebih tahu hasilnya secara jelas.

1. Login ke akun blogger.
2. Selanjutnya pada template pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>

#post-gallery { width:304px; margin:0px auto; font:11px verdana; color:#494848; padding:8px; background-color:darkgreen; }
#post-gallery h2 { font:20px Arial; font-weight: bold; color:darkgreen; border:1px solid #00ff00; text-transform:uppercase; margin:2px 2px 2px; padding:7px 14px; background-color:#52e052; text-align: center; }
#post-gallery .rp-item { float:left; display:inline; position:relative; margin:2px; padding:0px; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4-ilVU-ckBExBe36ZSpolIngnb3aozo-fK_F886G5o1kJROc9HRN3tWyBEDbJF8FdXP8DMC80EPUh_OnPFX8YnGBNnLdknrZgKN36wL3-0LL_c6YgUwj6r-Fhhgmzw53VoH-WdIhrcY/h120/loading.gif') no-repeat 50% 50%; width:72px; height:72px; }
#post-gallery .rp-item img { width:72px; height:72px; margin:0px !important; padding: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:#222; border:2px solid #555; box-shadow:5px 5px 5px #52e052; color:#fff; 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:#52e052; }
#post-gallery .rp-item:hover .hidden {display:block;}

4. Copy kode berikut ini lalu pasang ke widget HTML/Javascript.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/recent-post-gallery.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Recent Post",       // Judul Widget
numposts    = 8,      // Post yang di tampilkan
numchar     = 200,      // Karakter pada deskripsi tooltip
rcFadeSpeed = 600,
pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8UwWCqZaDniXMp7VLWEJAJVkz04_JRtCrQAgvTC1XVGJWdWOqZx9XgK0nP5dTuTj1rXdIesb3lc6axvlwgH75dbhZ-dFiYpkVVYrEaDUzLaLy_AKJr_M10vHVnojLzZ_wd0i2JWOrlk/h120/no-image.png",
blogURL     = "http://mas-andes.blogspot.com";       // URL Blog anda
</script>

Keterangan:
Ganti http://mas-andes.blogspot.com dengan URL blog anda.

5. Terakhir tinggal klik Simpan dan lihat hasilnya.

Demikian mengenai tata cara untuk Modifikasi Widget Recent Post Efek Tooltip Pada Blog dengan sederhana.