Recent Posts Widget with Thumbnails and Tooltip for Blogger

How to Add this Widget to Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Click on Add a Gadget and select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Now Copy the below code and Paste it in the HTML/JavaScript Widget Box

<style type="text/css">
#post-gallery {
  width:300px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#17B986;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .bgt-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOq7LHHOmalwfG5O3WjlG9ySxYj1T75hmbChEhUFPhltdzx_q0WxvzGfpqh3l3lDDL71pA86eutZTmHHAnVnFKPG_ln4W-M1b3N2LOWHcHdpzlQXUjLATtln3i2alJnytiJk202us5Wdc/s1600/395.GIF') no-repeat 50% 50%;
  width:71px;
  height:71px;
}
#post-gallery .bgt-item img {
  width:71px;
  height:71px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-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;
}
#post-gallery .bgt-item .bgt-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-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    = 16,    
    numchar     = 190,    
    rcFadeSpeed = 610,  
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY7GqXIN8R-i3gvImyDmMuQSGTpfT57vSTlJwg-W9ar_WGFhu6sNzGcKDUEV4E-5q3YT5sOWNicuqfy67qvIIx_roAlh8YXad_sUTblZhjSZWFoGASMh3f0KsjFoB8RY7KoX_R44XJ67A/s1600/no-image-ava.jpg",
    blogURL     = "http://www.blogolect.com";
</script>
<script src="https://googledrive.com/host/0B43vwjPtKakCSWx2MEtSRFEzQUk" type="text/javascript"></script>

Customization:

• Replace http://www.blogolect.com with your Blog/Website URL
• Replace 16 with the number of posts you want to show
• Replace Latest Posts to change widget title

Step 4. Hit the Save Button
Thats it...