How to add a jQuery Posts Slider/glider To Blogger Blog

If you see the header section of this blog, you will see a jQuery Posts Slider. Check the pic below.










This slider which is also called Featured Content Slider was used in the Zinmag Primus Wordpress Template which was converted to Blogger by Falconhive. Using this Featured Content Slider you can display Featured Blogposts in the slider. You can check the Demo

The posts slider is very useful as we can show our blog visitors some of our best blog posts without them having to search it. This even makes our blog look more professional. Adding this slider to our blog isnt that tough, but it may require some trial and error pasting of some code depending on your blog template. But even that isnt difficult.

Before we start our work I recommend that you backup your blogger template incase something horrible happens to your blog template.

First we start with the CSS part of the template. Copy the following code and paste it anywhere between <b:skin> and </b:skin>

#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 that you have pasted the CSS part, paste the given code between ]]></b:skin> and </head> 

<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/slider.js' type='text/javascript'/>

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 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>

Just replace Post URL, Post Title, Post Description, image name and Image URL with the information about your blog post. By default there are 4 such blocks for adding your blog post in the Posts Slider with the 1st block having information about Cool Tricks N Tips. Just replace it with info about your blog post.

If you want more than 4 or less than 4 posts in the posts slider add or remove the code given above depending on what you want.

After you have done everything as I have given, there are some instructions for you.
In the CSS code given above I have highlighted the background image of the Slider in red colour. Please copy the image to your computer and host it on your own.

Now check your blog. If everything is working properly, stop here. You dont have to read the part given below. But if there is any problem with the Slider, then Continue Reading the post.

Just below the highlighted image in CSS part, I have even highlighted the width option. There are chances that the image may be big for your blog template and isnt appearing properly. So change the number of pixels accordingly so that the slider appears properly.

To calculate the pixel width and height properly, first install Adobe Air on your computer and then install Pixus.

Now, there may be a chance that the alignment of the Post Title, Summary, Image or the Stop button isnt proper. For that read the information given below.

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;
}

To change the alignment of the image, change the values highlighted in red colour. The value 20 indicates 20 pixels from the top of the image and 577 indicates 577 pixels from left side of the image. Use Pixus to measure the values.

If you are facing any problem with alignment of Post Title, search .slide h2 { and change the top and left values as I have shown for the Image.
For alignment problem with Post Summary search .slide p { and change the values
For alignment problem with the Stop Button search #slider-stopper { and change the values.

Thats it, now save the template and refresh your blog to see the Posts Slider working properly for your blog.