Followers

05 Oktober 2010

Oktober 05, 2010 - 5 comments

Blog Tutorial:Slideshow Jquery

Tutorial ni akan menerangkan korang camna nak letak slideshow utk menunjukkan post yang ada pada pembaca.Slideshow ni sangat senang utk diletak dan sangat mudah utk mengubah lebar dan tinggi supaya sepadan dngn template korang.Korang juga boleh ubah kelajuan slideshow ngan mudah.Lebar asal ialah 550px dan tinggi asal ialah 200px.Rasanya korang akan suka ngan slideshow ni,cuba tngok Demo


1.Login ke akaun blogger korang,pastu pergi ke--> layout- -> Edit HTML

2.Scroll kebawah dan cari kod </head>

3.Copy keseluruhan kod dibawah dan pastekan sebelum/diatas kod </head>

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

<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() {
$(&#39;#s3slider&#39;).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>

NOTA : Utk ubah kelajuan slideshow,ubah nilai 4000.

4.Save template korang.

5.Sekarang pergi ke Layout-->Page Element dan klik "Add a gadget".

6.Pilh "html/java script" dan letakkan kod dibawah dan tekan save.

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

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://www.funny-potato.com/images/funniest-pictures/funny-hands/funny-face.jpg" />
<span>Dah sudah tengok demo?</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_P7J-V68xQZ4/TJglIdnV0KI/AAAAAAAAB1o/cgbAkH4dr9I/S1600-R/1280715624_e556cf49_1280715859.png" />
<span>Blog Aideal Fitri</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://www.cato-at-liberty.org/wp-content/uploads/Google.jpg" />
<span>Blog Aideal Fitri !!!</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://www.ewellnessmall.com/online-health-store/resources/fck_images/yahoo-logo.jpg" />
<span>Blog Aideal Fitri</span></a>
</li>

</ul>
</div>

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


NOTA : Gantikan perkataan YOUR-LINK-HERE dengan link korang,dan ubah kod biru dngn kod gambar korang,serta ubahkan perkataan Blog Aideal Fitri kepada perkataan yang korang nak.

Sekarang korang dah berjaya letakkan slide show pada blog korang.

5 ulasan:

Catat Ulasan