Adding A jQuery Posts Slider To Blogger Blog

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

]]>

And immediately before it, paste this code:

#slider {

background:url(http://i39.tinypic.com/a2bzhd.png);

height: 254px;

width: 983px;

overflow: hidden;

position: relative;

margin: 5px 0;

}





#mover {

width: auto;

position:absolute;

overflow:hidden;

}





.slide {

padding: 20px 0px;

width: 1000px;

float: left;

position: relative;

height:200px;

}





.slide h2 {

font-family:georgia, Helvetica, Sans-Serif;

font-size: 24px;

position: absolute;

top: 20px;

left: 1px;

color: #ac0000;

padding:0px 0px 0px 30px;

margin:0px 0px;

width:500px;

overflow:hidden;

}





.slide h2 a:link, .slide h2 a:visited {

color:#fff;

background-color: transparent;

}





.slide h2 a:hover {

color: #ddd;

background-color: transparent;

}









.slide p {

color: #999;

position: absolute;

top: 100px;

left: 1px;

font-size: 12px;

font-family:georgia, Helvetica, Sans-Serif;

line-height: 20px;

width: 500px;

padding:0px 0px 0px 30px;

margin:0px 0px;

}





.slide img {

position: absolute;

top: 20px;

left: 577px;

background:#fff;

padding:10px 10px;

}





#slider-stopper {

position: absolute;

font-family: Georgia, Helvetica, Sans-Serif;

top: 113px;

right: 55px;

color: #AC0000;

padding: 3px 8px;

font-size: 14px;

text-transform: uppercase;

z-index: 1000;

}

Now find this code in the template:

And immediately before it, paste this code:







Now comes the tricky part which will require some trial and error pasting. Search

in the template and you will have to paste the following code somewhere below it. As every template is different from the other, I cant tell you the exact location to paste the code.

But I guess that everyone wants to put the posts slider in the header part. So search for 

 or 

 or 

 or something that is similar to the three examples that I have given. All you have to do is paste the code somewhere near them and save the template. If the end result isnt what you want, again go to the template and paste the code at a different place. Copy the code given below

Post Slider By Cool Tricks N Tips

If you liked this tutorial then please Subscribe to Our Feeds and dont forget to share it on Digg/Stumble Upon/Twitter

Post Title

Post Description

Post Title

Post Description

Post Title

Post Description

Now click Save Template 

Now its time for you to put your favourite posts in the Posts Slider. If there are some alignment problems with the Post Title or Image or the Stop Button in the slider then dont worry, continue doing what I say. Search  in the blog template. Below it you will see

Post Title

Post Description

If you are having problem with the placement of the Image, search .slide img { in the template. The code will be as shown below


.slide img {

position: absolute;

top: 20px;

left: 577px;

background:#fff;

padding:10px 10px;

}

UPDATE:  I updated some of my posts, this post I update 11+ Featured Content Slider for Blogger Using jQuery........