Add Slider jQuery Plugins on The Blog

Yuk kembali memosting extreme tutorial. Sebelumnya Koben berbagi Add Lite Accordion jQuery to Blogger, sekarang mengangkat topik yang diambil dari Basic jQuery Slider. Buka halaman tersebut guna melihat demo, cara, dan download bumbu²nya ;) Why Beben ambil yg ini, soalnya sudah terpasang variabel slide untuk penempatan sebuah frames diatur pada CSS-nya. Pendek cerita ini slider full stylish sob :))
Semakin banyak variasi dimasukan bisa manambah nilai dongkrak tersendiri berurusan dengan konten slider jQuery plugin :D

Koben cuma membantu memasukan saja sama seperti sebelumnya ya sob ;)) :">

Ramuan ajaib

• jQUery Script (minimize form)

  /*
  * Basic jQery Slider - jQuery plug-in v.1.1
  *
  * http://www.johncobb.name
  * @john0514
  *
  * Copyright 2011, John Cobb
  * Free for all to use, abuse and improve under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
  *
  * August 2011
  */
  
  <script type='text/javascript'>//<![CDATA[
  (function($){$.fn.slidey=function(options){var settings={};var defaults={width:700,height:300,animation:'fade',animationDuration:450,automatic:true,rotationSpeed:4000,hoverPause:true,showControls:true,centerControls:true,nextText:'Next',prevText:"Prev",showMarkers:true,centerMarkers:true,keyboardNav:true,useCaptions:true}
  settings=$.extend({},defaults,options);var $container=this;$slider=$('ul.slidey'),slides=$slider.children('li'),slideCount=slides.length,animating=false,paused=false,current=0,slidePosition=1,next=0,$active=slides.eq(current),forward='forward',back='backward'
  slides.css({'height':settings.height,'width':settings.width});$slider.css({'height':settings.height,'width':settings.width});$container.css({'height':settings.height,'width':settings.width});if(settings.showControls){$controlContainer=$('<ul class="slidey-controls"></ul>');$next=$('<li><a href="#" class="slidey-next" class="controls">'+settings.nextText+'</a></li>');$previous=$('<li><a href="#" class="slidey-prev" class="controls">'+settings.prevText+'</a></li>');$next.click(function(e){e.preventDefault();if(!animating)
  slideyGo(forward,false);});$previous.click(function(e){e.preventDefault();if(!animating)
  slideyGo(back,false);});$next.appendTo($controlContainer);$previous.appendTo($controlContainer);$controlContainer.appendTo($container);if(settings.centerControls){$control=$next.children('a');offset=($container.height()-$control.height())/2;$next.children('a').css('top',offset).show();$previous.children('a').css('top',offset).show();}}
  if(settings.showMarkers){$markerContainer=$('<ol class="slidey-markers"></ul>');$.each(slides,function(key,value){if(settings.animType=='slide'){if(key!=0&&key!=slideCount-1)
  $marker=$('<li><a href="#">'+key+'</a></li>');}
  else{key++
  $marker=$('<li><a href="#">'+key+'</a></li>');}
  $marker.click(function(e){e.preventDefault();if(!$(this).hasClass('active-marker')&&!animating)
  slideyGo(false,key);});$marker.appendTo($markerContainer);});markers=$markerContainer.children('li');markers.eq(current).addClass('active-marker');$markerContainer.appendTo($container);if(settings.centerMarkers){offset=(settings.width-$markerContainer.width())/2;$markerContainer.css('left',offset);}}
  if(settings.keyboardNav){$(document).keydown(function(event){if(!animating){if(event.keyCode==39){event.preventDefault();$next.addClass('active');}
  else if(event.keyCode==37){event.preventDefault();$previous.addClass('active');}}});$(document).keyup(function(event){if(!paused){clearInterval(slideyInterval);paused=true;}
  if(!animating){if(event.keyCode==39){event.preventDefault();slideyGo(forward,false);$next.removeClass('active');}
  else if(event.keyCode==37){event.preventDefault();slideyGo(back,false);$previous.removeClass('active');}}
  if(paused&&settings.automatic){slideyInterval=setInterval(function(){slideyGo(forward)},settings.rotationSpeed);paused=false;}});}
  if(settings.useCaptions){$.each(slides,function(key,value){var $slide=$(value);var $slideChild=$slide.children('img:first-child');var title=$slideChild.attr('title');if(title){var $caption=$('<p class="slidey-caption">'+title+'</p>');$caption.appendTo($slide);}});}
  if(settings.hoverPause&&settings.automatic){$container.hover(function(){if(!paused){clearInterval(slideyInterval);paused=true;}},function(){if(paused){slideyInterval=setInterval(function(){slideyGo(forward)},settings.rotationSpeed);paused=false;}});}
  if(settings.animation=='slide'){$first=slides.eq(0);$last=slides.eq(slideCount-1);$first.clone().addClass('clone').removeClass('slide').appendTo($slider);$last.clone().addClass('clone').removeClass('slide').prependTo($slider);slides=$slider.children('li');slideCount=slides.length;$wrapper=$('<div class="slidey-wrapper"></div>').css({'width':settings.width,'height':settings.height,'overflow':'hidden','position':'relative'});$slider.css({'width':settings.width*slideCount,'left':-settings.width});slides.css({'float':'left','position':'relative','display':'list-item'});$wrapper.prependTo($container);$slider.appendTo($wrapper);}
  var checkPosition=function(direction){if(settings.animation=='fade'){if(direction==forward){!$active.next().length?next=0:next++}
  else if(direction==back){!$active.prev().length?next=slideCount-1:next--}}
  if(settings.animation=='slide'){if(direction==forward){next=slidePosition+1;}
  if(direction==back){next=slidePosition-1;}}
  return next;}
  if(settings.automatic){var slideyInterval=setInterval(function(){slideyGo(forward,false)},settings.rotationSpeed);}
  slides.eq(current).show();$slider.show();var slideyGo=function(direction,position){if(!animating){if(direction){next=checkPosition(direction);}
  else if(position&&settings.animation=='fade'){next=position-1;}else{next=position;}
  animating=true;if(settings.animation=='fade'){if(settings.showMarkers){markers.eq(current).removeClass('active-marker');markers.eq(next).addClass('active-marker');}
  $nextSlide=slides.eq(next);$active.fadeOut(settings.animationDuration);$nextSlide.fadeIn(settings.animationDuration,function(){$active.hide();current=next;$active=$nextSlide;animating=false;});}
  else if(settings.animation=='slide'){if(settings.showMarkers){markers.eq(slidePosition-1).removeClass('active-marker');if(next==slideCount-1){markers.eq(0).addClass('active-marker');}else if(next==0){markers.eq(slideCount-3).addClass('active-marker');}else{markers.eq(next-1).addClass('active-marker');}}
  $slider.animate({'left':-next*settings.width},settings.animationDuration,function(){if(next==0){slidePosition=slideCount-2;$slider.css({'left':-slidePosition*settings.width});}else if(next==slideCount-1){slidePosition=1;$slider.css({'left':-settings.width});}else{slidePosition=next;}
  animating=false;});}}}
  return this;}})(jQuery);//]]></script>

Letakan dibawah jQuery inti, atau sebelum/diatas tag </head>
• Kode CSS

  #SlideShow {
  width: 940px;
  margin: 0 10px 80px;
  position: relative;
  }
  ul.slidey {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: none;
  background: #000;
  }
  ul.slidey li {
  display: none;
  position: absolute;
  }
  ul.slidey li ul li {
  display: block;
  position: relative
  }
  ul.slidey-controls {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9999;
  }
  ol.slidey-markers {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9999;
  }
  ol.slidey-markers li {float: left;}
  p.slidey-caption {
  display: block;
  width: 97%;
  margin: 0;
  padding: 2%;
  position: absolute;
  bottom: 0;
  }
  ul.slidey{
  width: 960px;
  height: 340px;
  margin: 0 auto;
  display: block;
  background: #191919;
  color: #fff;
  }
  ul.slidey .video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  }
  ul.slidey .video-description {
  position: absolute;
  right: 0;
  top: 0;
  width: 315px;
  padding: 0 10px;
  }
  ul.slidey .featured-post {
  width: 960px;
  height: 340px;
  background: url(/img/bg_feature_slide.png) no-repeat;
  position: relative;
  }
  ul.slidey .featured-post h2 {
  font-family: 'Droid Sans', sans-serif;
  font-weight: bold;
  font-size: 40px;
  margin: 0;
  letter-spacing: -3px;
  text-shadow: 0px 0px 1px #111;
  position: absolute;
  top: 30px;
  left: 20px;
  }
  ul.slidey .featured-post ul {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 125px;
  }
  ul.slidey .featured-post ul.list-one {
  left: 20px;
  }
  ul.slidey .featured-post ul.list-two {
  left: 380px;
  }
  ul.slidey .featured-post p.tag-line {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-family: 'Droid Sans', sans-serif;
  font-size: 22px;
  }
  ul.slidey .featured-post p.tag-line a {
  font-weight: bold;
  }
  ul.slidey .featured-post img {
  position: absolute;
  bottom: 30px;
  right: 40px;
  }
  ul.slidey div.featured-post ul li {
  background: url(/img/tick_list.png) no-repeat 0 2px;
  padding: 0 0 0 25px;
  }
  ul.slidey-controls li a {
  width: 10px;
  height: 16px;
  overflow: hidden;
  text-indent: -999px;
  background-image: url(/img/btn_controls.png);
  position: absolute;
  bottom: -30px;
  }
  ul.slidey-controls li a.slidey-prev {
  left: 0;
  }
  ul.slidey-controls li a.slidey-prev:hover, ul.slidey-controls li.active a.slidey-prev {
  background-position: 0 -16px;
  }
  ul.slidey-controls li a.slidey-next {
  left: 20px;
  background-position: -10px 0;
  }
  ul.slidey-controls li a.slidey-next:hover, ul.slidey-controls li.active a.slidey-next {
  background-position: -10px -16px;
  }
  p.slidey-caption {
  background: rgba(0,0,0,0.7);
  color: #fff;
  }
  ol.slidey-markers {
  position: absolute;
  bottom: -34px;
  right: 0;
  }
  ol.slidey-markers li {
  float: left;
  margin: 0 3px;
  }
  ol.slidey-markers li a {
  display: block;
  height: 16px;
  width: 16px;
  overflow: hidden;
  text-indent: -9999px;
  background:url(/img/btn_marker.png) 0 0;
  border:none;
  }
  ol.slidey-markers li.active-marker a {
  background: url(/img/btn_marker.png) 0 -16px;
  }

Diatas tagging ]]></b:skin> Gantikan url image dengan link host img kalian.
• Download via Ziddu
Takut ada ramuan yg bentrok ama emoticon :P

Bila bahan² sudah ready, maka saatnya memasukan struktur HTML kedalam template.

HTML Structure

<center>
<div id='SlideShow'>
<ul class='slidey'>
<li>
<div class='featured-post'>
<h2>Your title here</h2>
<ul class='list-one'>
<li>Your blah bleh bloh here</li>
<li>Your blah bleh bloh 2 here</li>
<li>Your blah bleh bloh 3 here</li>
</ul>
<ul class='list-two'>
<li>Your blah bleh bloh 4 here</li>
<li>Your blah bleh bloh 5 here</li>
<li>Your blah bleh bloh 6 here</li>
</ul>
<p class='tag-line'>Your blah bleh bloh here.... <a href='http://your-link-add-here'>Title Link</a></p>
<img src='http://your-link-image.png'/>
</div>
</li>
<li>
<div class='video-wrapper'>
<iframe frameborder='0' height='340' src='http://your-link-frame-here' width='604'/>
</div>
<div class='video-description'>
<h2>Your Title Here</h2>
<p>Your blah bleh bloh here....</p>
<p>Pret by <a href='http://your-link.com'>TITLE</a></p>
</div>
</li>
<li>
<img src='http://your-link-image.jpg' title='blah bleh bloh here blah bleh bloh here blah bleh bloh here blah bleh bloh here blah bleh bloh here blah bleh bloh here'/>
</li>
</ul>
</div>
</center>

Koben tag dengan hasil berada di tengah <center> ... </center> Bila kode tersebut dihilangkan, maka slider akan berada float kiri.
Script snippet pemanggil agar bisa berjalan, langkah terakhir yang mesti dilakuin sobat tanamkan jQuery berikut tepat diatas tagging </body>

<script type='text/javascript'>//<![CDATA[
 $(document).ready(function(){
  $('#SlideShow').slidey({
   'width' : 940,
   'height' : 340,
   'showMarkers' : true,
   'showControls' : true,
   'centerMarkers' : false,
   'centerControls' : false
  });
 });//]]>
</script>

SAVE and look for result :) Good luck ;)
Basic jQuery Slider created by John Cobb.
Happy slider \m/