Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

05 Oktober 2010

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKxF6AXel3Lj8RbczfoFP5JB3hoR9MDk3A-W4Kerk7NYSQf6BOnu7OhLkMhnsHFzNGWOIubLTCahHCQVYT9akaQhSxqHGrph-gUScpyc1dpOws4aAzohDrpcVpskGEoVIOOmxU05nfRE/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

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

At the post page,this banner can be spin around ;)