Recent Posts Widget dengan Thumbnails dan Efek Tooltip

HaiSob apa kabar? Ok sobat berikut ini saya akan membagikan widget latest post atau widget artikel terbaru. Widget seperti ini mungkin sudah tidak asing lagi bagi kamu, widget ini menampilkan postingan terbaru dari blog kamu. Widget ini menurut saya cocok jika di pasang di sidebar Blog.

Widget Recent Post berikut ini sedikit berbeda dengan widget Recent post yang sudah pernah saya bagikan sebelumnya ( Baca : widget artikel terbaru dengan Navigasi dan recent post slider ) widget ini memiliki tampilan yang bagus dan juga ada efek tooltipnya.

Widget Recent Posts dengan Thumbnails dan Efek Tooltip


Recent Posts Widget Dengan Thumbnails Efek Tooltip
Recent Posts Widget Dengan Thumbnails Efek Tooltip


Berbicara mengenai efek tooltip sebelumnya juga sudah pernah dibahas mengenai bagaimana cara memberikan efek tooltip pada tombol Facebook page. Sebenarnya widget ini sudah dibagikan di tahun kemarin, tapi karena script yang di simpan di Google code telah dihapus, sehingga membuat widget ini tidak bekerja sebagaimana mestinya, tapi tenang sobat karena sudah diperbaiki. Ok sobat berikut ini adalah bagaimana cara memasangnya ke template Blogger.

Cara Memasang Widget Recent Post di Blogger


Step 1. Log in ke Blogger Dashboard
Step 2. Silahkan pilih Layout ➔ Add a Gadget ➔ HTML/JavaScript.
Step 3. Letakan kode dibawah ini kedalam widget blog sobat.
<style type="text/css">
#haisob-gallery { width:100%px; margin:0 auto; font:normal 11px Arial,Sans-Serif; color:#494848; padding:8px; background-color:#17B986; -webkit-box-shadow:0 10px 30px rgba(0,0,0,0.4); -moz-box-shadow:0 10px 30px rgba(0,0,0,0.4); box-shadow:0 10px 30px rgba(0,0,0,0.4); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
#haisob-gallery h2 { font:20px Arial,Sans-Serif; color:white; text-shadow:0 3px 2px black; text-transform:uppercase; margin:2px 2px 2px; padding:7px 14px; background-color:#48D; text-align:center; }
#haisob-gallery .bgt-item { float:left; display:inline; position:relative; margin:2px; padding:0 0; background:#fff url('http://4.bp.blogspot.com/-4_TPv1GjOU4/VQ2_T9cyzxI/AAAAAAAAECY/gaNmkSI3fec/s1600/haisobldng.gif') no-repeat 50% 50%; width:85px; height:85px; }
#haisob-gallery .bgt-item img { width:85px; height:85px; border:none !important; margin:0 0 !important; padding:0 0 !important; background:transparent !important; display:none; }
#haisob-gallery .bgt-item .bgt-child { position:relative; top:10% !important; left:10% !important; z-index:1000; width:200px; 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; }
#haisob-gallery .bgt-item .bgt-child h4 { font-size:12px; margin:0 0 5px; color:#FA7C19; }
#haisob-gallery .bgt-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 bgtTitle     = "Latest Posts",
    numposts    = 12, 
    numchar     = 190, 
    rcFadeSpeed = 610,
    pBlank      = "http://1.bp.blogspot.com/-WGU5Q8PKZL4/UuStTipXfkI/AAAAAAAADwM/8QeimiTON0A/s1600/no-image-ava.jpg",
    blogURL     = "http://www.haisob.com";
</script>
<script src="https://cdn.rawgit.com/Brando07/share/Updte/recnt-post-tooltip.js" type="text/javascript"></script>

Customization:

  • Ganti http://www.haisob.com dengan Url blog/website milik sobat.
  • Ganri angka 12 diatas sesuai dengan jumlah postingan yang ingin sobat tampilkan.
  • Jika sobat ingin mengganti ukuran gambarnya lihat kode css di atas dan sesuaikan 85px dengan tinggi dan lebar gambar yang sobat inginkan.
  • Step 4. Tinggal di simpan deh bro.. dan lihat hasilnya. Apakah seperti dibawah ini?

LIVE DEMO Recent Post Widget:



Ok sobat sekian cara membuat Recent Posts Widget with Thumbnails Efek Tooltip, semoga bermanfaat.
Join This Site