Membuat Slide Show dan Caption - JQuery

Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat slide show caption. Trik berikut ini dikembangkan oleh http://www.serie3.info/s3slider/ dengan menamakannya "s3Slider jQuery plugin". Slide show ini akan menampilkan gambar dan sebuah caption diatas gambar. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog anda dan biasanya digunakan untuk menampilkan foto-foto dokumentasi serta gambar template blog. Untuk demo klik disini - DEMO.

Untuk membuatnya pertama yaitu
1. Log in ke blogger
2. Klik Tata Letak dan klik pada edit HTML
3. Expand template
4. Masukan script berikut sebelum </head>:

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

5. Masukan script jquery ini dibawah script tadi:

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

6. Masukan kode berikut ini pada template, atau menaruhnya pada gadjet anda:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with Cufón to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Keterangan: Ubahlah alamat gambar dan keterangannya sesuai kebutuhan anda.
7. Masukan kode berikut sesudah kode <b:skin><![CDATA[ atau sebelum kode ]]></b:skin>

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Keterangan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada .s3sliderImage span.

Posted in: Blogspot