Advance Recent Post Widget With Thumbnail and Tooltip For Blogger 2014

Advance Recent Post Widget With Thumbnail and Tool Tip For Blogger 2014

Its Called Smart Fast Stylish  Recent Post Widget With Thumbnail and Tool Tip  

Hi Bloggiyan Today We are sharing our latest Most Advance Recent Post Thumbnail Widget With Tool Tip Feature . Recent post is widget which will display the latest 20 post of the blog. As you can see in our blogs. Usually these types widgets are placed in the sidebar of the blog. So we need a different from others blog, here it is. This recent post widget will show the latest post with thumbnail and description as tool tip when mouse over on the thumbnail. It had fade effect. Well lets try simply with steps mentioned below.

Animated Preview is Above & Following Is Live Demo

Step To Add Recent Post Widget With Thumbnail and Tool tip in Blogger

1. Blogger > Layout > Add Gadget > HTML/JavaScript

2. Add the following code in it and Save it.

<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#99cc00;
  -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 .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://3.bp.blogspot.com/-1x8jl-JgoS4/UbX9CILmkvI/AAAAAAAADXs/-d6Pc70yRpw/s1600/loading_small.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-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 .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-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 rpTitle     = "Recent Post",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://2.bp.blogspot.com/-rAlZN1aIuP0/UbYEyYtyhRI/AAAAAAAADX8/ua86u-xDG0I/s1600/no-image-found-100x100-s2free-blog.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://www.s2free.blogspot.com";       // Your Blog Address
</script>
<script src="http://f.3eeweb.com/js/post-gallery.js" type="text/javascript"></script>

Save Done!
Note: Replace http://www.s2free.blogspot.com with your blog url. numposts is the number of thumbnails / posts that you want to display. numchar is the number of characters in the description tooltip. rcFadeSpeed is the speed of the fade effect.

I hope you like this widget and comment it if there is any mistake.

Sharing Is Best way to transfer knowledge so share or refer with other bloggiyan.

Advance Recent Post Widget With Thumbnail and Tooltip For Blogger 2014
Last Reviewed by S2Free Blog Team on June 10 2013
Rating: 4.5