Recent Posts Widget With Thumbnails Tooltip Effect For Blogger blog

Recent Posts with Thumbnails Widget. Widgets like this might already be familiar to mate. I think fits this widget if installed in the sidebar Blog where to tell your visitors about some of the latest articles published buddy.



Recent Post widget below is slightly different with widgets Recent posts I've never shared before (Read: the latest articles widget with Navigation and two widgets tebaru article) This widget has a great view and also no effect Tool Tip.

Talking about previous tooltip effect has also been discussed on how to give effect to the tooltip on the blog link.

Installing Widgets Recent Posts in Blog

Step 1. Log in to your Blogger Dashboard
Step 2. Please select Layout >> then select "Add a Gadget" and select "HTML / JavaScript"
Step 3. Place the code below into your blog widgets.

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-gdehihyyx7NP5I_AC3hhX0DnM2lepPioF9WroUPR-q9g2fniWbJBwXyPJySdvMPOy40fiD4UvEo8nKoi9IVwiA-r1Wnqw287tqMpcLo4ogJDyAY5md4oZwPAeNuswGWoaeHCGibR-I/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      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZk6uPlc2bCJ_tDN1n21yN_hMjhGOA4VXDDx4HAWiC_WI4AIP__aBjfhfYGH8CY_Ds1RmSUqLhLtEo2CbbitDnzrva57rf06-Q5UjXrrf_1tOkLTvACogTyuNyMOrEuQvc2H8K7mI40g/s1600/no-image-ava.jpg",
    blogURL     = "http://nomiidesign.blogspot.com/";
</script>
<script src="https://terbarunews.googlecode.com/svn/seocipsltspost.js" type="text/javascript"></script>

Customization :

• Change http://nomiidesign.blogspot.com/ with Url blog / website belongs to my friend .
• 12 above in accordance with the number of posts who want buddy to show .

Hope you like it