Recent Posts Widget dengan Thumbnails Efek Tooltip

Halo gan kali ini gua akan bagiin tutorial blogging lagi, Ingin tutorialnya? Kamu bisa menyimaknya di bawah! Chek It Out!

1. Pertama, kamu buka dashboard blogger Disini

2. Kedua,, Lalu Kamu pilih Tata Letak >> Tambah Gadget >> HTML/Javascript

3. Ketiga,, Lalu kamu masukkan kode dibawah ini

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJOeGD4bHpllMrR6ddcktWO6HtKY-HzorGeDHYCa03shSeC4VcfB66sILHS2Ud_GIhc6Xx4aKPldX5Y75VT5O8Hu-ODyGfd3Yn7fGG8Hb_ahQCpsUOLaWbySWKuA3o_zqa0IRGYJUKKek/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      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzXIzOgOTfDn_rPT7eGHlUJXiSiS4JZZVHW-OYaVTnPrNFtZjazjGxjut9nTo1VTT2BmHm7z-Bbbcj7eN34IHfYR2R9sN_yQvn9MmxLz-93SkWJTYpzavbVLyI58zPjv3827JkWYdRPg/s1600/no-image-ava.jpg", 

    blogURL     = "http://www.allgames-entals.blogspot.com";

</script>

<script src="https://cdn.rawgit.com/Brando07/share/Updte/recnt-post-tooltip.js" type="text/javascript"></script>

Note:  1. Ganti kode yang berwarna biru muda
                 Menjadi berapa banyak tampilan postingan
                 Yang ingin ditampilkan
            2. Ganti Kode yang berwarna biru tua menjadii
                URL Blog sobat

Contoh Demo :

SELESAI!!! Jangan Lupa Berlangganan Lewat email Gratis Dibawah ini Jika kamu ingin tau Bila postingan Update

 Achlesy Man adalah seseorang yang hobby nge post & Gonta Ganti Platform Blogger Karena Senangnya, Dia sampai Lupa Waktu