Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Minggu, 11 Desember 2016

Recent Posts Widget Dengan Thumbnails Efek Tooltip


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 ini memiliki tampilan yang bagus dan juga ada efek tooltipnya.
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.maslukiss.com";
</script>
<script src="https://cdn.rawgit.com/Brando07/share/Updte/recnt-post-tooltip.js" type="text/javascript"></script>

Customization:

  • Ganti http://www.maslukis.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?



Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi