How To Add Popular Posts Rotating Slides Widget

How to add Popular Posts Rotating Slides Widget

This is the Best and impressive widget of popular post sliding automatically. Its easyto install on blogs only you need to do copy and paste HTML/Javascript Widget to your blog. 

This slider have an interesting thing is that it shows your post thumbnail, post title and description too.

Adding Popular Posts Rotating Slides Widget

1. Go To Blogger > Design
2. Click add a gadget
3. Keep post number greater than 6
4. Save your widget
5. Now select an HTML/Javascript widget
6. Paste the following slide code inside it,

​​​ 

<script src="http://tanachhim.googlecode.com/files/TanaChhimAutosrol.js" type="text/javascript"></script>

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

<!--

#spylist {

overflow:visible; 

margin-top:5px; 

padding:0px 0px; 

height:457px; 

} 

#spylist ul{ 

width:290px; 

overflow:visible; 

list-style-type: none; 

padding: 0px 0px; 

margin:0px 0px; 

} 

#spylist li { 

width:285px; 

padding: 0px 0px; 

margin:0px 0px 5px 0px; 

list-style-type:none; 

float:none; 

height:60px; 

overflow: hidden;

padding:4px 3px 8px 4px !important;

background-color: #faf9fa;

   border-radius: 4px;

   box-shadow: inset 0 1px 3px #fff, inset 0 -2px black, 0 0 3px gray;

} #spylist li a {

text-decoration:none; 

color:blue; 

font-size:12px; 

height:15px; 

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:0px 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:13px; 

color:#262B2F; 

padding:0px 0px; 

margin:0px 0px; 

}

-->

</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaYtTbeTMVm327fpwgxVvUaG9In7OAhmzwEhpTW1t0ARL_k3o2jhMe3jVdJNzuEQcsyKcc_t4u0q09FXCLy3SWuLkXZjwiPILX51cyB46KiurunU0OYBY3XdeCGCJuDKwu0dOIijg4CdY/s320/11.jpg";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaYtTbeTMVm327fpwgxVvUaG9In7OAhmzwEhpTW1t0ARL_k3o2jhMe3jVdJNzuEQcsyKcc_t4u0q09FXCLy3SWuLkXZjwiPILX51cyB46KiurunU0OYBY3XdeCGCJuDKwu0dOIijg4CdY/s320/11.jpg";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaYtTbeTMVm327fpwgxVvUaG9In7OAhmzwEhpTW1t0ARL_k3o2jhMe3jVdJNzuEQcsyKcc_t4u0q09FXCLy3SWuLkXZjwiPILX51cyB46KiurunU0OYBY3XdeCGCJuDKwu0dOIijg4CdY/s320/11.jpg";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaYtTbeTMVm327fpwgxVvUaG9In7OAhmzwEhpTW1t0ARL_k3o2jhMe3jVdJNzuEQcsyKcc_t4u0q09FXCLy3SWuLkXZjwiPILX51cyB46KiurunU0OYBY3XdeCGCJuDKwu0dOIijg4CdY/s320/11.jpg";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaYtTbeTMVm327fpwgxVvUaG9In7OAhmzwEhpTW1t0ARL_k3o2jhMe3jVdJNzuEQcsyKcc_t4u0q09FXCLy3SWuLkXZjwiPILX51cyB46KiurunU0OYBY3XdeCGCJuDKwu0dOIijg4CdY/s320/11.jpg";

showRandomImg = true;

boxwidth = 300;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 60;

thumbheight = 60;

fntsize = 13;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 11;

summaryColor = "#666";

icon2 = " ";

numposts = 20;

home_page = " ";

limitspy=6

intervalspy=4000

</script>

<div id="spylist">

<script src='http://tanachhim.googlecode.com/files/TanaChhimAutosrol1.js'></script>

</div> </font></a>

• To Change Widget container height edit height:457px; 
• To change the small rectangles width edit width:290px; 
• To Change the your blog  Adress 
• To Change Maximum of number post numposts = 20;
• To Change number post that want to show (Rotating Slides)  limitspy=6