Adding A jQuery Posts Slider To Blogger Blog

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

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:

]]></b:skin>

And immediately before it, paste this code:

#slider {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnt73wHqqbevwSXM3uAPMmiHrLzsY9F-nj6vd09nRb_N6Vm4k_VtJg8ZsVz52i83TFYtR-RF1eLwt2-tze0zxqTwj9nnn0mOZOCjfO1QBGKWW_mSgrh8GkZ6rdPqVONoaIfui5YFRjnJ-/s1600/Adding+A+jQuery+Posts+Slider+To+Blogger+Blog.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:

</head>

And immediately before it, paste this code:

<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-jquery-1.2.6.min.js' type='text/javascript'></script>

<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-slider.js' type='text/javascript'></script>



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

</head>

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 <div id='header-wrapper'> or <div id='header-wrap'> or <div id='header'> 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




<!-- Slider -->

<div id='slider'>

<div id='mover'>





<div class='slide'>

<h2><a href='http://www.cooltricksntips.com' title='Cool Tricks N Tips '>Post Slider By Cool Tricks N Tips </a></h2>

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

<img alt='Cool Tricks N Tips' src='Image URL'/>

</div>





<div class='slide'>

<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>

<p>Post Description</p>

<img alt='image name' src='Image URL'/>

</div>





<div class='slide'>

<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>

<p>Post Description</p>

<img alt='image name' src='Image URL'/>

</div>





<div class='slide'>

<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>

<p>Post Description</p>

<img alt='image name' src='Image URL'/>

</div>













</div>

<!-- /Mover -->

</div>

<!-- /Slider -->

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 <!-- Slider --> in the blog template. Below it you will see


<div class='slide'>

<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>

<p>Post Description</p>

<img alt='image name' src='Image URL'/>

</div>


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;

}