Friday, 3 June 2016

How to ADD Animated Scrolling Recent Post widget in Blogger.

Follow these very simple steps to add the "Animated Scrolling Recent Post widget" in your blog.
1. Go To Blogger ---> Layout.
2. Click on "Add a Gadget"
3. Now choose HTML/JavaScript.
4. Copy and paste the following code below.

<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">
<!--
/* ========== Scrolling Recent Posts Widget By androidsecureupdate.blogspot.com ======== */

#NBT-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#NBT-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#NBT-widget 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/AVvXsEi_lIRVbSfz4R_MykF2o4WeLxO79Ec2g8wn0XDaEUpZyrsJHdtXtAC6F5PtZT9RQkven32uFVO6ZqEL-Ix9zrVLyzCH4oPlplyKQNf3EMYNJDgvSe7O8KhVPitKIRoz3AOLnQ9eeDFN3EI7/s1600/techandroid26.blogspot.in-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#NBT-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#NBT-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#NBT-widget 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);
}
#NBT-widget 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;
}

/* ========== Scrolling Recent Posts Widget By androidsecureupdate.blogspot.com ======== */

-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhj3YPeKTunHSNTf2B5S24t_4GzUG5xtHRq_l00DVtwkuAG33m5rS5zHtk_kr7UHo-5ue0kdunfzUS3ULlmPZKjg2i9v6uBrkeJWiDbLNHwZu9exRxkmxNjuFrR8mYPx6bsksfP55eZmju/s1600/No+Image+1.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhj3YPeKTunHSNTf2B5S24t_4GzUG5xtHRq_l00DVtwkuAG33m5rS5zHtk_kr7UHo-5ue0kdunfzUS3ULlmPZKjg2i9v6uBrkeJWiDbLNHwZu9exRxkmxNjuFrR8mYPx6bsksfP55eZmju/s1600/No+Image+1.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhj3YPeKTunHSNTf2B5S24t_4GzUG5xtHRq_l00DVtwkuAG33m5rS5zHtk_kr7UHo-5ue0kdunfzUS3ULlmPZKjg2i9v6uBrkeJWiDbLNHwZu9exRxkmxNjuFrR8mYPx6bsksfP55eZmju/s1600/No+Image+1.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhj3YPeKTunHSNTf2B5S24t_4GzUG5xtHRq_l00DVtwkuAG33m5rS5zHtk_kr7UHo-5ue0kdunfzUS3ULlmPZKjg2i9v6uBrkeJWiDbLNHwZu9exRxkmxNjuFrR8mYPx6bsksfP55eZmju/s1600/No+Image+1.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhj3YPeKTunHSNTf2B5S24t_4GzUG5xtHRq_l00DVtwkuAG33m5rS5zHtk_kr7UHo-5ue0kdunfzUS3ULlmPZKjg2i9v6uBrkeJWiDbLNHwZu9exRxkmxNjuFrR8mYPx6bsksfP55eZmju/s1600/No+Image+1.gif";
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 = "https://androidsecureupdate.blogspot.com//";
limitspy=4;
intervalspy=4000;
</script>
<div id="NBT-widget">
<script src='https://dl.dropbox.com/s/gviv5r1iksjfvj3/Scrolling_recent-posts-Spy-NBT.js' type='text/javascript'></script>
</div>


5. Save.
Enjoy.


  • Now Replace the https://androidsecureupdate.blogspot.com with your blog Url.
  • 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.

0 comments:

Post a Comment