Add Post Slider for Blogger

Before, i've posted Add Content Slider for blogger. Today, i'll give you other great widget "Post Slider" for you. This widget has been used in Zinmag Primus blog and i'll share this widget for blogger. Blogger who use this widget can display Featured Blogposts in the slider. 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.

Ok, lets start...

Step 1: Back up Template

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

Step 2: Edit layout

Go to Layout >Edit HTML in your Blogger Dashboard, and make sure to check the "Expand Widget Templates" box. Then, 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;
}

After paste that code above, paste the given code between ]]></b:skin> and </head>

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

Step 3: Add your post slider content

Find this code:
<div id='header-wrapper'> , or

<div id='header-wrap'> , or

<div id='header'> , or

paste this code below one of those code,

<!-- 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 1' title='Post Title 1'>Post Title 1</a></h2>
<p>Post Description 1</p>
<img alt='image name 1' src='Image URL 1'/>
</div>

<div class='slide'>
<h2><a href='Post URL 2' title='Post Title 2'>Post Title 2</a></h2>
<p>Post Description 2</p>
<img alt='image name2' src='Image URL 2'/>
</div>


</div><!-- /Mover -->
</div>
<!-- /Slider -->

Replace Post URL, Post Title, Post Description, image name and Image URL with the information about your blog post. By default there are 3 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 3 or less than 3 posts in the posts slider add or remove the code given above depending on what you want.

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.

Step 4: Save your template

Save your work template.

We hope you enjoy this.