Tooltips Recent Post Widget For Blogger With Thumbnail

If your blog have long posts and you wish to assist your guests to search out your recent posts quickly, while not disbursement time browsing you blog finding out your older posts. As you'll see in several blogs. typically these sorts widgets ar placed within the sidebar of the blog. therefore we want a unique from other's blog, here it is. This recent post widget can show the most recent post with thumnail and outline as tooltip once moueover on the thumbnail. It had fade impact. Well lets attempt merely with steps mentioned below.

Live Demo Below

Follow these very simple steps to add the "Tooltips Recent Post Widget For Blogger With Thumbnail " in your blog.

Step 1 : Go To Blogger > Design > Page Elements
Step 2: Click on "Add a Gadget" link
Step 3: From the pop-up window, choose HTML/JavaScript
Step 4: Copy and paste the following code below

<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-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:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqEbdUSFbDLPnFbXsT5rIUoMsDNRY0O9IUFarRymaRLoZt4RR-JTFl0eMUB2szkuVZZJY5NjDBkbNR8UcvJTvPPrZMUGMnoR0OObrTdnzJAKDzlmLbAfnS2FmThpwy599KQaN5XBk_sTVx/s48/Bloggerheroe.comloading.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 #1BA1E2;
-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:#1BA1E2;
}
#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 = "Latest Post", // Widget Title
numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BZ1DZwHnjLOnRPCNSbBkrr71XEtCMpgi9bfJVz4GXSPk283FXU_jmSwRFgprgPxPsXOi7xfG70fu1PjaV6BkkhQdXA7U2sdsqnmTvbQ7TL6NoGixy3hxr1kZgJKNog0ZIzi2hKEmHFU0/s100/no-img.png", // Image that show up if the post doesn't have a image
blogURL = "http://www.bloggerheroe.blogspot.com/"; // Your Blog Address
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>

Customization

Replace http://www.bloggerheroe.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.

Now just save your widget and check your blog. If you face any problem or difficulty installing this widget, submit your difficulty in comments.

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 7:35 PM and have 1 comments

Writed by : Admin ID-Netblog

My friend was reading the article onTooltips Recent Post Widget For Blogger With Thumbnail . Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.

<a href="https://bloggerheroe.blogspot.com/2013/04/tooltips-recent-post-widget-for-blogger.html" target="_blank">Tooltips Recent Post Widget For Blogger With Thumbnail </a>