Recent Posts Widget with Thumbnails. Ok sobat berikut ini saya akan membagikan widget latest post atau widget artikel terbaru. Widget seperti ini mungkin sudah tidak asing lagi untuk sobat. Widget ini menurut saya cocok jika di pasang di sidebar Blog dimana untuk memberitahukan pengunjung blog anda mengenai beberapa artikel terbaru yang sobat publikasikan.

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

Berbicara mengenai efek tooltip sebelumnya juga sudah pernah dibahas mengenai bagaimana cara memberikan efek tooltip pada link blog. 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.

Memasang Widget Recent Post di Blog


Step 1. Log in ke Blogger Dashboard
Step 2. Silahkan pilih Layout >> kemudian pilih "Add a Gadget" dan pilih "HTML/JavaScript"
Step 3. Letakan kode dibawah ini kedalam widget blog sobat.
<style type="text/css">
#seocips-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; }
#seocips-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; }
#seocips-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/seocipsldng.gif') no-repeat 50% 50%; width:85px; height:85px; }
#seocips-gallery .bgt-item img { width:85px; height:85px; border:none !important; margin:0 0 !important; padding:0 0 !important; background:transparent !important; display:none; }
#seocips-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; }
#seocips-gallery .bgt-item .bgt-child h4 { font-size:12px; margin:0 0 5px; color:#FA7C19; }
#seocips-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.seocips.com";
</script>
<script src="https://cdn.rawgit.com/Brando07/share/Updte/recnt-post-tooltip.js" type="text/javascript"></script>

Customization:

  • Ganti http://www.seocips.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 artikel dari seocips.com untuk saat ini dan semoga "Cara Membuat Recent Posts Widget with Thumbnails Dengan Efek Tooltip" ini dapat bermanfaat.
5 Komentar untuk "Recent Posts Widget Dengan Thumbnails Efek Tooltip"

bagaimana cara menambahkan / membuat widget seperti yang diatas header itu, yang Headline Artikel Terbaru itu? Terima Kasih.

MANTAF... bos, izin pake widget yah... trims

josss gandooss widget sempurnull thankss seocips!

Tinggal search aja di blog ini gan ( di kotak search ) dengan kata kunci "Headline"

aku suka tampilannya, dan ketika dicoba ternyata berhasil