Sunday, June 23, 2013

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.

slide widget

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] = "http://1.bp.blogspot.com/-eAj-I6xvbbo/UcabhmsBoDI/AAAAAAAAAdU/0EtaTSm5irw/s320/11.jpg";

imgr[1] = "http://1.bp.blogspot.com/-eAj-I6xvbbo/UcabhmsBoDI/AAAAAAAAAdU/0EtaTSm5irw/s320/11.jpg";

imgr[2] = "http://1.bp.blogspot.com/-eAj-I6xvbbo/UcabhmsBoDI/AAAAAAAAAdU/0EtaTSm5irw/s320/11.jpg";

imgr[3] = "http://1.bp.blogspot.com/-eAj-I6xvbbo/UcabhmsBoDI/AAAAAAAAAdU/0EtaTSm5irw/s320/11.jpg";

imgr[4] = "http://1.bp.blogspot.com/-eAj-I6xvbbo/UcabhmsBoDI/AAAAAAAAAdU/0EtaTSm5irw/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 = "http://dailybloggiingtips.blogspot.com";

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 http://dailybloggiingtips.blogspot.com
  • To Change Maximum of number post numposts = 20;
  • To Change number post that want to show (Rotating Slides)  limitspy=6 


1 comments:

your blog is very informative.
i m add css code to my blog customize > Advance > Add CSS to add code now click on apply blog button to apply . view blog code is working.
when i try to add another CSS code with the same steps but previous code already in the code box, i can't add 2nd code to css , so i m decided to eras the standing code in css box to add new code bcoz previous code is also working. so eras code and past new code and apply blog , when the new / 2nd code is working but the 1st / previous code is deleted and no more working ... Please help me i m upset for that.
my blog address is .
www.thaheemsoftware.blogspot.com

Post a Comment