Recent Post With Thumbnail Simple Spy


Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.



Read More:
1. Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery



How to Install Animated Recent posts for blogger with thumbnails and Simple Spy

Now let's start adding it...


Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.



Blogger Tips And Tricks|Latest Tips For Bloggers


Step 2. After click on Add a Gadget link A pop-up box will open now

with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.


Blogger Tips And Tricks|Latest Tips For Bloggers


Step 3. Select 'HTML/Javascript' and add the one of code given below.


Step 4. Now Click On Save 'JavaScript' You are done.



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTqyNIDGz0kmRhFQM5R29DEb90xiNB1I2zQWz97elIhdimkeu-6JiSBI_CvtopaOAJIBq7jWMOfC78L87swtwcqCZ42fO_cRHflZkrTT0g2Faaiyt4VmIyjTmFq7WIg9GEjwiCp_9OhOf/s1600/24work-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->

</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;



home_page = "http://bdlab.blogspot.com/";



limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>

</div>


And now click Save


Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>






1. homepage address

home_page = “http://bdlab.blogspot.com/”;


2. Style

from above style/css, you can change :


width : 220px;

width:208px:


customize base on your template

and

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTqyNIDGz0kmRhFQM5R29DEb90xiNB1I2zQWz97elIhdimkeu-6JiSBI_CvtopaOAJIBq7jWMOfC78L87swtwcqCZ42fO_cRHflZkrTT0g2Faaiyt4VmIyjTmFq7WIg9GEjwiCp_9OhOf/s1600/24work-blogspot-com.jpg) repeat-x;


Customize the colors of backuground


3. image size

thumbwidth = 70;

thumbheight = 70;


Match your needs


4. How many post you will show

numposts = 10;


Base on what you need to show

















Stylish Scrolling Recent Posts Widget For Blogger


Stylish Scrolling Recent Posts widget



1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTqyNIDGz0kmRhFQM5R29DEb90xiNB1I2zQWz97elIhdimkeu-6JiSBI_CvtopaOAJIBq7jWMOfC78L87swtwcqCZ42fO_cRHflZkrTT0g2Faaiyt4VmIyjTmFq7WIg9GEjwiCp_9OhOf/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>





And now click Save





Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.


You Can Also CUSTOMIZE The CODE According to Your Need

numposts = 10; Total number of posts which you wants to scroll by this widget
limitspy=4; Number of the posts to appear on the widget
intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.






















Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers


Animated Recent Post Widget Sliding Recent Post Widget



Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-3.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>




And now click Save




Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


Now Replace the http://bdlab.blogspot.com with your blog Url.


numposts = 5; Total number of posts which you wants to scroll by this widget














Stylish Animated Blogger Recent Posts Widget


Stylish Animated Blogger Recent Posts Widget



Go to blogger > Open layout tab

Now Add A new HTML/JavaScript widget

Now paste the code given below :


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}


#workwidget li:hover {
background: #84f6f5;

}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://bdlab.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>





And now click Save





Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.





Settings:

Change http://bdlab.blogspot.com to Your Blog address
Change numposts = 10 to Show number of Recent posts with thumbnails













Scrolling Recent Post Gadget For Blogger


Scrolling Recent Post Gadget For Blogger



Adding The Widget To Blogger



Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget

Copy the following code and paste inside an HTML/JavaScript widget


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-recentposts-ycode.js" ></script>
<script style='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-jquery-ticker-nocode.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>





And now click Save





Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.



Optional Customizations


To change total number of posts find this code var numposts = 7;
If you don't want to show post thumbnails then change this value var showpostthumbnails = true; to false.

















New and Flexible Recent Posts Widget With Thumbnail for Blogger


Flexible Recent Posts Widget With Thumbnail



Follow the step by step instructions to add this widget in Blogger:
Sign in to Blogger
Go to Layout > Add a Gadget
Select HTML / JavaScript
Paste the code given below in the field and Save.


<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-5.js"></script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script src='http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>



Customization:
var numposts = 5; (Number of Posts to be shown)
var showpostthumbnails = true; (Post Image)
var displaymore = true; (More Button)
var showcommentnum = false; (No of Comments)
var showpostdate = false; (Post Date)
var showpostsummary = false; (Post Summry)
var numchars = 80; (Characters in post summary)
True is for Display item and False for not to display. Change According to your needs.

Change http://bdlab.blogspot.com with your Website/ Blog URL.










Tooltips Recent Post Widget For Blogger With Thumbnail


Tooltips Recent Post Widget For Blogger With Thumbnail



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


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<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/AVvXsEjpbk4mkS6bsh-1Ku5-ZLvCDz-ycU6UNfj1rKPfjXAKwaZSxL5FI0WewUIC9zg-eWGhu0exAlbGv-UxOnmBalFZ5QqJyns1SQdWHDtYIhxop4OP1cc-j_72eYjs8dwrWZ-tRkJntUl-TMPJ/s1600/24work.blogspot.com.loading.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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><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/AVvXsEjwt9ERmvjGxlzB0VHzizaoyfBZ5OFxNJ4LOK0PESaBqGbrw9zIR0LsYP0nBTXrgdrgpZgEDXdtDXvAZUTw46xXZhe6Igl0QFJg9uTjIaBvu1vQVvDO0Sx-YloT0X03TaxSD_G_tQNe1GKs/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://bdlab.blogspot.com/"; // Your Blog Address
</script><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-6.js" type="text/javascript"></script>





And now click Save





Note :If your template already have a jquery do not put again, just copy after it
Html from above a few things could be replaced :







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.



Customization


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













Many thanks to abu-farhan And Rahul for making this code and I just tested and modified to work on blogger



155 comments:

  1. thank you ! amazing . :)

    ReplyDelete
    Replies
    1. really....Truely amazing....the best sblog from Beginners in blogging...
      http://windowgear.blogspot.in/

      Delete
  2. This Widget will animate over my blogger, thanks for the idea

    ReplyDelete
  3. This thing is not working on Firefox... It is working on everything else.. Help will be appreciated.

    ReplyDelete
    Replies
    1. you are damn right bro... this is not working on firefox

      Delete
  4. Nice thing it would be good if you add live demo

    ReplyDelete
  5. Nice post brother. Just, currently i'm not in mood to edit template. Maybe tomorrow i gonna be back here. :)

    Nice to find this blog. :)

    ReplyDelete
  6. The topic is very effective and informative. Thanks for sharing it. Great post ! I enjoyed reading your blog and all the topics discussed here is nice and excellent.

    animation degree Chennai

    ReplyDelete
  7. Thanks so much for this tutorial! I did this for a friends wedding party and it worked jolly good. It lasts the whole evening

    ReplyDelete
  8. Thank you, I've just been looking for information about this topic for ages and yours is the best I've discovered till now.
    But, what about the

    bottom line? Are you sure about the source?
    My webpage > http://www.cytopathnet.net/tiki-index.php?page=UserPagegertrudiswright1990

    ReplyDelete
  9. omg!! i have been searching for hours how to add an animated recent post widget and this one that only works!!

    you are a genius!! thank you, thank you!!

    rea

    ReplyDelete
  10. Thanks for sharing apk Games this great list. There is no doubt it’s important to do a natural link building without spamming to gain better places in Google.

    ReplyDelete
  11. Thanks for sharing out this content it are really fastidious.
    create blogs

    ReplyDelete
  12. Thanks for sharing :) sangat berguna :D

    ReplyDelete
  13. This is the good blogs and well thinking of this one and nice here. and well thinking of this one. and thanks for sharing here with us.
    scissors lift
    speed doors

    ReplyDelete
  14. It is working on everything else.. Help will be appreciated.
    Load Systems

    ReplyDelete
  15. You are great...

    Check this Game ""Metro Last Light Limited Edition MULTi9 Steam-Rip: PC GAME FREE DOWNLOAD FULL VERSION:-"" ..

    In this page every things are free..

    Check it: http://yousuf-abid.blogspot.com/2013/05/metro-last-light-limited-edition-multi9.html

    ReplyDelete
  16. Your blog is awesome, but one widget (( Stylish Animated Blogger Recent Posts Widget )) is not working on my site, so please help me.

    This,
    http://24work.blogspot.com/p/stylish-animated-blogger-recent-posts.html

    ReplyDelete
    Replies
    1. hello friend. please leave your blog address below so i can check out your blog!

      Delete
  17. your work is super awesome !!!! thanks my friend..

    ReplyDelete
  18. wow what a great post dear. i like thsi post very much really awesome post. thanks for sharing.

    ReplyDelete
  19. hey hi great blog
    i have add to my blog but animated scrolling is not working
    may be its problem of two jquery script
    can u please help me
    my blog www.worldforphone.blogspot.in

    ReplyDelete
  20. HEY HI GREAT POST
    BUT I AM HAVING A PROBLEM THUMBS ARE NOT MOVING
    I HAVE COPIED THE SCRIPT ALSO
    I THINK THE PROBLEM IS OF TWO JQUERY SCRIPT
    PLEASE HELP ME
    MY BLOG:WORLDFORPHONE.BLOGSPOT.IN

    ReplyDelete
    Replies
    1. Remove or delete this jQuery codes to your blog

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

      Delete
    2. @shaik shareef

      problem: Stylish Scrolling Recent Posts Widget only work <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
      this jQuery code. if you are using another jquery code is not working ..... I'm Sorry Friend

      Delete
  21. thanks for ur response i removed all the scripts other then 1.4.2 then also its not coming

    ReplyDelete
  22. Nice info...its working

    ReplyDelete
  23. Thanks for sharing. It is very helpful

    ReplyDelete
  24. Really really thanks a lot my friend.. very useful post... thanks again..

    ReplyDelete
  25. This is very beautiful.http://odeskbd24.blogspot.com

    ReplyDelete
  26. Thanks.www.chinmobilegroup.blogspot.com

    ReplyDelete
  27. Great script friend was most helpful. Those using the above script remember to change the portion in red or "home page" to that of your own or u will be showing the recent posts of the wrong blog.
    My Blog:DIY-RickyTlc1985.blogspot.com

    ReplyDelete
  28. nice widgets.......thanks for Sharing
    keep sharing such wonderful articles
    OEWAYS

    ReplyDelete
  29. Great great

    Nice info and working !

    ReplyDelete
  30. Thank for this post. This is very useful in making animated recent post. Never knew that it is easier than I think. Thanks for the script too. Cheers man!

    ReplyDelete
  31. This Was a Great Post !!
    Thank You Very Much !!

    ReplyDelete
  32. Wow I didn't think it would work but it did! Thanks!

    ReplyDelete
  33. I really need your response please. I noticed that if I remove the whole script, the red X buttons wouldn't appear but the widget is too awesome to let go. I even made it available to the mobile of my blog. It's awesome

    ReplyDelete
  34. Hello. I have the recent post slider on my blog and thanks it's amazing. But the problem my readers encounter and I've noticed is that because of the script, it shows a red X-like buttons both at the top and bottom and even scrolling down the blog. The buttons then lead to your blog. Is there anyway I can remove this script or trick to improve your page views (I'd pay if u require that) and still have the awesome recent post slider?
    My blog is http://hubent.blogspot.com
    Please you can also reply to hubentblog@gmail.com thanks. I'll be looking forward to your mail

    ReplyDelete
    Replies
    1. Now Replace this code

      https://docs.google.com/uc?export=download&id=0B4zcNjwo-rgsazR2WGZ2QTJiaEk

      your blog Recent Posts! Url......
      ............................
      use this code or upload your host....

      http://24work.webs.com/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js

      Recent Posts broken image completely working....

      Delete
    2. Thank you thank you thank you! You are a Genius..lol
      I appreciate. No buttons getting in the way of the readers anymore.
      If there is a better way to appreciate this, I will. Thanks much again..I'm your blog's biggest fan

      Delete
  35. Thanks, www.chinmobilegroup.blogspot.com Visit Me@

    ReplyDelete
  36. really good post love it thank you so much for sharing with us

    ReplyDelete
  37. Amazing Simple Recent Post Widget/Gadget Blogger
    http://ebloggertechniques.blogspot.com/2013/09/simple-recent-post-widget-blogger.html

    ReplyDelete
  38. I used it to my blog! http://infotechmaestro.blogspot.com

    ReplyDelete
  39. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Now Replace this code

      http://24work.webs.com/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js

      your blog Recent Posts! Url......
      ............................
      use this code or upload your host....

      http://dl.dropboxusercontent.com/s/qegice7y4oneszj/animated-recent-posts-ycode-2.js

      Delete
    2. Its strange it works on a different part of my blogger, but not at the top.

      Delete
  40. Great job... Bravo.
    www.enyinnayaemma.blogspot.com
    www.enyinnayaemma.blogspot.com

    ReplyDelete
  41. keep it up...
    www.enyinnayaemma.blogspot.com
    www.enyinnayaemma.blogspot.com

    ReplyDelete
  42. Nice information.It is helpful.I appreciated your effort.I would like to see more posts like this.thanks

    ReplyDelete
  43. Thanks for share awesome blogger Animated Recent post widget..Nice collections..

    ReplyDelete
  44. Thanks for sharing this with us!
    But i have already faced a problem. My problem is that how to change the post of the slider.

    ReplyDelete
  45. This comment has been removed by the author.

    ReplyDelete
  46. Thank You Very Much...!!!
    You Are Master Man..:)

    ReplyDelete
  47. Amazing information shared in this blogspot with blog customization. Eye catching theme designed you. Really enjoyable blog with there topics.

    From SEO Services Company
    Thanks

    ReplyDelete
  48. nice.....visit me
    http://websurveypage.blogspot.com/

    ReplyDelete
  49. this realy nice post .. thank you
    but when i apply on my blogg dosent my recent files appear blank?
    and when i apply it to other templet work easily

    ReplyDelete
  50. wow great http://solution1114.blogspot.com/

    ReplyDelete
  51. thank you this is what I was looking for

    ReplyDelete
  52. Nice post.the topics discussed here is nice and excellent.It is helpful for information-http://daily.bhaskar.com/

    ReplyDelete
  53. This Is Really Amazing Blog Keep It Up (y)

    Long Live Admin

    •••••• ►►►Shahzad Khan ►►►

    ReplyDelete
  54. very helpful. thanks a lot..:D

    ReplyDelete
  55. thanks...
    really a nice post.. implementing one now..


    -Trick2Live

    ReplyDelete
  56. This menu code is good and attractive. If you can concentrate on the code, and find some unnecessary codes, which can be eliminated.
    Same menu with different approach is given here:
    DROP-DOWN MENU .

    Also you may find vrious menu bars and banner source code at: http://www.freemenu.info/p/list.html

    ReplyDelete
  57. This is a good post. I am going to implement this on my blog.

    ReplyDelete
  58. your post does make sense for me as I am already fond of all this kind of appreciating efforts.

    best regards,

    Pune Escorts

    ReplyDelete
  59. hi sir. Im regular visitor to your site. i learned lot of things from your site. by seeing your your site im designed a site http://www.tollyscreen.com thanks a lot

    ReplyDelete
  60. nice and very useful one i add this for my hot blog http://www.gossiphitz.info/

    ReplyDelete
  61. nice
    http://templates24.blogspot.com

    ReplyDelete
  62. thank you, it works and its good :)

    ReplyDelete
  63. Hi!
    Thanks so much for this widget, it works really funny!
    I have one question, can I customize the date? )font type, font color and size, etc.)?

    thanks,

    ReplyDelete
  64. This comment has been removed by the author.

    ReplyDelete
  65. thanks
    http://mdonti-n.blogspot.com/

    ReplyDelete
  66. Thank for info tutorial, its so beautyfull

    ReplyDelete
  67. Thanks for great information you write it very clean. I am very lucky to get this tips from you.

    ReplyDelete
  68. Nice info about spy gadgets , try some new featured spy gadgets .

    ReplyDelete
  69. how to set the animation time? thanks

    ReplyDelete
  70. Thanks for this amazing tutorial. Will implement and see how it goes..

    ReplyDelete
  71. Wow I didn't think it would work but it did! Thanks!!!!

    ReplyDelete
  72. SUPER ARTICLE I LOVE THIS AND YOU HELP A LOT TO MY BLOG http://guruofmovie.blogspot.in/

    ReplyDelete
  73. cool! widgets,thanks a lot for sharing this widgets. Tiny Serval

    ReplyDelete
  74. Thanks for your awesome presentation i agree your content.
    Logo erstellen

    ReplyDelete
  75. very useful content. thank you for sharing...

    ReplyDelete
  76. Your dropboxusercontent account has been disable and all js stored are useless. These tuts are not worling now. Please update. This is great tutorial..

    regards,
    JelBee

    ReplyDelete
  77. nice post. very helpful for beginners.. thank you for sharing..

    ReplyDelete
  78. wow so nice all of it . keep on sharing.

    and also I want to share this with you guys . awesome best free blogger templates
    http://bloggerseowidgets.blogspot.com/2014/08/my-top-10-best-free-blogger-templates.html

    ReplyDelete
  79. wonderful, enjoying blogging using your site

    ReplyDelete
  80. Awesome , thank you so much for your great tutorial

    ReplyDelete
  81. Great article. Reading it makes me think about it.Really this is awesome not work with the blog. It is very pleasure to get it as I got huge Helps right here.
    Happy New Year WallPaper 2015
    Full Blogger Templates Free

    ReplyDelete
  82. thank you for sharing the codes, very helpful..i used it on my blog.. thanks you soo much! pinoyetchetera.blogspot.com

    ReplyDelete
  83. Blog of earning and amazing blogger gadgets and blog permotion
    http://tips4tricx.blogspot.com/

    ReplyDelete
  84. Nice share. Really an appreciable post.
    Thanks for sharing :)
    Good Friday Wallpapers

    ReplyDelete
  85. , but most of the tutorials I've found are not really suitable for a beginner. read more

    ReplyDelete
  86. Thanks.
    For need any software http://exemaza.com

    ReplyDelete
  87. Thanks for sharing This..Going to add this into my blogger

    ReplyDelete
  88. I applied. Its really working Great.
    Look here.
    www.gfvhome.com

    ReplyDelete
  89. Many thanks to abu-farhan And Rahul for making this code and I just tested and modified to work on blogger is very nice to scholarship essay writing help

    ReplyDelete
  90. Wow, great tutorial sir, I like that..I cannot say, but it is interesting and beautiful to make random posts

    ReplyDelete
  91. thanks a lot for adding this
    i recently came to your blog, its very helpful. keep updating
    i will come back often to visit your page

    ReplyDelete
  92. I think that is a very nice tips-trick blogging, I am glad to see this article, many thanks for sharing

    ReplyDelete
  93. I love this post. It is very helpful for me. Thank you so much for helping me resolve my issue. Waiting for another one.

    ReplyDelete
  94. cool !!! , thanks a lot for sharing...

    ReplyDelete
  95. nice post. very helpful for beginners.. thank you for sharing.

    ReplyDelete
  96. thanks for nice Widgets,its very cool,i alredy use in my blogs(http://movieshd365.blogspot.com/)

    ReplyDelete
  97. I really appreciate this amazing post.

    ReplyDelete
  98. Really,nice post. very helpful for beginners.. thank you for sharing.

    ReplyDelete
  99. Superb, Very Helpful and Informative Knowledge about Animated Post with Blogger Thanks Admin for sharing.

    ReplyDelete
  100. Really I appreciate the author of this post.

    ReplyDelete
  101. Your post is very good. I request to author to publish more articles.

    ReplyDelete
  102. Thanks for sharing. Very nice working in my blogger blog

    ReplyDelete
  103. That's Great Post, Thank You So Much for sharing.

    ReplyDelete
  104. its helpful for my blog www.fuskabd.blogspot.com..thax admin

    ReplyDelete
  105. very interesting animated html tutorial. Thank you for clear explanation.

    ReplyDelete
  106. Nice share. Thanks for This Article

    ReplyDelete
  107. شكرآآآآآآآآآآآآآآآآآآآآآآ :* ^_^

    ReplyDelete

 
Top