Penerepan "Content Slider" di "Blogger Template"

demo

Jika ingin menambah fasilitas 'Content Slider' atau 'Slide Show' untuk di terapkan di 'Blogger Template' anda, "Create a Slick and Accessible Slideshow Using jQuery" terbilang cukup baik, karena relatif simpel dan scriptnya tidak terlalu panjang.

Adapun tahapan pembuatan 'Content Slider' atau 'Slide Show' dengan menggunakan fasilitas jQuery tersebut di blogger template (sebelumnya lihat demo content slider):

Tahapan pembuatan 'Content Slider' atau 'Slide Show' di Blogger Template

1. Masukan kode Javascript berikut sebelum </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

2. Masukan kode HTML berikut sebelum <div id='content-wrapper'>:

 <!-- Slideshow HTML -->
<div id='contentSlide'><div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<h2>Content Slider /  Slide Show</h2>
<p><a href='#'><img alt='Content Slider, Slide Show' height='145' src='http://lh4.ggpht.com/_dfnTVAxeWMI/SlTZ94lACVI/AAAAAAAABYQ/-F_CXaHGXCA/img_slide_02.jpg' width='215'/></a>&quot;Content Slider / Slide Show&quot; ini menggunakan jQuery. Pemilihan <a href='http://deconstructioncode.blogspot.com/2009/05/beberapa-jenis-content-slider-jquery.html'>&quot;Content Slider&quot;</a> dengan &quot;Create a Slick and Accessible Slideshow Using jQuery&quot; di blogger template  karena lebih simpel dan tidak menggunakan script yang terlalu panjang dibanding lainnya, sehingga tidak terlalu mempengaruhi loading page, yang sering menjadi masalah di blogger.</p>
</div>
<div class='slide'>
<h2>Trik Membuat ToolTip - Jquery di Blogger</h2>
<p><a href='http://deconstructioncode.blogspot.com/2009/07/tooltip-jquery.html'><img alt='tooltip jquery' height='145' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SlTRYnZ44wI/AAAAAAAABYM/3d_P22SDp8k/img_slide_01.jpg' width='215'/></a>Trik membuat <a href='http://deconstructioncode.blogspot.com/2009/07/tooltip-jquery.html'>Tooltip</a> ini menggunakan Easy Tooltip - jQuery plugin. Pilihan Easy Tooltip - jQuery plugin, karena lebih sederhana dan scriptnya tidak terlalu banyak seperti lainnya.</p>     
</div>
<div class='slide'>
<h2>&quot;External links&quot; dengan Menggunakan Icon - Jquery</h2>
<p><a href='http://deconstructioncode.blogspot.com/2009/06/external-links-dengan-menggunakan-icon.html'><img alt='External links - Jquery' height='145' src='http://lh4.ggpht.com/_dfnTVAxeWMI/SlTgv4Iob6I/AAAAAAAABYU/efJ7CYBfYm4/img_slide_03.jpg' width='215'/></a>
Tutorial <a href='http://deconstructioncode.blogspot.com/2009/06/external-links-dengan-menggunakan-icon.html'>&#39;external link&#39;</a> ini di peroleh dari:
&quot;Quick Tip: Dynamically add an icon for external links&quot;. Fungsi dari script external link ini adalah menampilkan icon pada setiap link yang menuju keluar atau &#39;external link&#39;.</p>
</div>
<div class='slide'>
<h2>Back to top dengan smoothscroll - jQuery</h2>
<p><a href='http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html'><img alt='Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril.' height='145' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SlTi_rVrf-I/AAAAAAAABYY/37XzZpmOXmc/img_slide_04.jpg' width='215'/></a> Anda dapat membuat <a href='http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html'>back to top</a> yang dapat bergerak secara &#39;smooth&#39; (tidak loncat) dengan menggunakan fasilitas javascript jQuery dan smoothscroll. Penggunaan jQuery ini yang membuat &#39;effect&#39; bergerak secara &#39;smooth&#39;.
</p>
</div>
</div>
</div></div>
<!-- END Slideshow --> 

:: catatan: anda dapat merubah text dan image tersebut sesuai konten yang anda inginkan.

3. Masukan kode CSS berikut:

 /*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
} 

4. Save, selesai.

Tambahan: Anda dapat memodifikasi tampilan content slider tersebut sesuai dengan ukuran dan karakter template yang anda gunakan.

:: Lihat juga: Beberapa jenis "Content Slider - jQuery" yang Menarik

Posted in: jQuery,Penerapan jQuery