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 blogspotstep 2 : Use javascript to get information on recent posts such as title ,images ,post summaryand 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 .
