Fitur Postingan Slidshow dengan Jquery Menawan pada Blog

| | Print This! | 5 comments

Do you like this post?

Hai sobat blogger semua, akhir-akhir aku sedikit sibuk dengan beberapa kerjaan sampingan buat jajan ^_^. Namun untuk sobat blogger semua saya akan sempatkan menulis artkel yang semoga bermanfaat. Pada kesempatan ini saya akan menulis tips bagaimana cara membuat Slide Show menggunakan Jquery yang cukup menawan pada Blogspot.
Cukup mudah, sobat blogger bisa mengubah kecepatan slide show dan mengatur lebar dan tingginya. Langsung saja ke TKP..^_^

• Login ke Dashboard blog - Rancangan - Edit Html
• Geser kebawah dan temukan kode </head>
• Letakkan kode dibawah ini sebelum kode </head>

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

/* ------------------------------------------------------------------------
    s3Slider

    Developped By: Boban KariÅ¡ik -> http://www.serie3.info/
 CSS Help: Mészáros Róbert -> http://www.perspectived.com/
    Version: 1.0

    Copyright: Feel free to redistribute the script/modify it, as
               long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

• Untuk merubah kecepatan Slide Show temukan kode 4000 dan rubah sesuai keinginan sobat.
• Simpan 
• Kembali ke Rancangan - Tambah Gadget - Html/Javascript
•  Copy kode dibawah ini dan simpan

<div id="s3slider"><ul id="s3sliderContent">

<li class="s3sliderImage"><a href="Link-mu-disini"><img style="width:550px;height:200px;" src="Url-gambar" /><span>Judul</span></a></li>

<li class="s3sliderImage"><a href="Link-mu-disini"><img style="width:550px;height:200px;" src="Url-gambar" /><span>Judul</span></a></li>

<li class="s3sliderImage"><a href="Link-mu-disini"><img style="width:550px;height:200px;" src="Url-gambar" /><span>Judul</span></a></li>

<li class="s3sliderImage"><a href="Link-mu-disini"><img style="width:550px;height:200px;" src="Url-gambar" /><span>Judul</span></a></li>

</ul></div>

<div class='clear'></div>

Catatan :
- Ganti "Link-mu-disini" dengan alamat link postingan
- Ganti "Url-gambar" dengan alamat url gambar
- Ganti "Judul" dengan judul gambar

Artikel Terkait

Posted in: Jquery