make a slider for recent posts (part 1)

In my template Simplex Darkness ,I used slider effect for recent posts like this :


To make a slider in blogspot ,I follow some steps bellow

step 1 : Using jquery and javascript to make slider effect in blogspot
step 2 : Use javascript to get information on recent posts such as title ,images ,post summary
and show them all in slider .

in this post ,I will show you the first step of making slider for recent posts .

Step 1: make slider effect for blogspot

Look at the slider ,you will see it has two parts . The part in the left show the post summary and image ,part on the right show the title of posts .
in the page element ,create a HTML/Javascript widget
At first ,we need to styling the slider by CSS .So paste this CSS code into widget content .

<style>

body {

color:#333333;

font-family:arial,helvetica,sans-serif;

font-size:9pt;

line-height:1.4em;

text-align:left;

}

/* ---------[ Slideshow ]--------- */

#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}



.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>

because this slider effect is based on jquery plugin named Cycle , so after CSS code above ,we need to including Jquery framework and Cycle plugin . To do this ,just add this code after CSS section :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>

you can download two javascript files from url 's above and upload them to your hosting .

Now we start the main code for slider :

<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">

<!--code of the left part : image ,title and post summary -->

<div class="slides">
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>
</div>

it's the code for the left part of slider : it will show the image ,title ,post summary.
And here is the code for the right part ,this part will show only title of posts . Paste this code right after the code above .

<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>

</div>
</div>

look at the code of left part and right part above , you can see each href attribute of <a> tag in the right part refer to id of <li> tag in the left part ,for example ,in the left we have
<li id="main-post-1"....... >
and in the right we have
<a href="#main-post-1"......>
this mean when we click on the link in the right part ,it will show the content we need in the left part . The right work as control panel for the left part .
all the code of slider effect can't work if we don't initialize its variables .
Now ,right after
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script> :

add this code :

<script type="text/javascript">

$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: 'fade',   // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $('#slideshow');

 // set tabs to current hard coded navigation items
 this.tabs = $('ul.slides-nav li', this.context);

 // remove hard coded navigation items from DOM
 // because they aren't hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $('div.slides > ul', $slideshow.context).cycle({
     fx: $slideshow.fx,
     timeout: $slideshow.timeout,
     speed: $slideshow.slideSpeed,
     fastOnEvent: $slideshow.tabSpeed,
     pager: $('ul.slides-nav', $slideshow.context),
     pagerAnchorBuilder: $slideshow.prepareTabs,
     before: $slideshow.activateTab,
     pauseOnPagerHover: true,
     pause: true
 });     
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
     // remove active styling from all other tabs
     $slideshow.tabs.removeClass('on');

     // add active styling to active button
     activeTab.parent().addClass('on');
 }     
}     
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
});  

</script>

ok . Save widget and check out the slider for its operation
In the next post ,I will tell you how to use this slider for showing recent post like what I did
Please subscribe this blog for receive update .