Recent Posts Widget with Thumbnails and Tooltip for Blogger

Recent posts widget displays the latest posts of a blog. Displaying Recent posts in your sidebar often help your users to quickly take a look at the latest and fresh content. Recent Posts Widget is a great way to keep your visitors browsing, they'll spend more time on your blog which will also decrease your blog bounce rate. It also gives your visitors a basic idea that what kind of content is published on a certain blog.

In this article we'll show you that How to Add a Recent Posts Widget with Thumbnails and Tooltip to your Blogger Blog. This widget shows Recent Posts with their Thumbnails and on hover it shows a short description of that post. So, follow the steps mentioned below to add this widget to your blog.

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/AVvXsEgtPhpmj6zIGyGjsYhpHT63uRIrayGfcuyAv5TzwzC_zvJTQaa2g9B4DNcFQ8-6F9KjCehQybHi2v3Pmjx6fp2OBGrJEIqahJb-y4YaEecEpuTHeHdPwfubbrGEI9uB3cBYcrMCN2U9LkU/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/AVvXsEhtA1V9aWG1gp-33KAzeiy6GigmGWfB3K2sU-u2C0qVKHTSnOPy7Z9mb3pDydlC0XcugkK0iDlNZpn1L6j95UBH6C4JZleiytRPjRsKE10pfWYLIjBYURfG1imA5c4w2wAeBYlizHOArqY/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...

We hope this article may have helped you in adding a Recent Posts Widget with Thumbnails and Tooltip to your Blogger Blog. Share this widget with your friends and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Share This:

Tags:

Widgets

• Prevoius
• Next