Memasang Gambar Slideshow Dibawah Header

Memasang Gambar Slideshow Dibawah Header

Jumpa lagi dengan saya, hari ini langit agak mendung, mungkin sebentar lagi hujan. Kali ini saya akan

berikan tutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan

menu slideshow yang juga sangat sederhana. Slideshow sendiri fungsinya sebagai navigasi link yang biasanya

diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk

mengklik isi yang dimaksud. Untuk demo saya gunakan template 3pictsel bikinan mas Riki dan meletakkannya di

dalam main post, silahkan cek disini.

Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam

tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang

lebih 660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.

1. Login dulu di blogger.

2. Masuk ke Rancangan >> Edit HTML.

3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang

panjang.

4. Copy paste kode berikut diatas kode ]]></b:skin>

view plain print ? 1. /* SLIDESHOW */ 2. #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-

20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden}

3. #s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}

http://www.maskolis.com/2011/03/memasang-gambar-slideshow-dibawah.html




http://wongsuruh.blogspot.com/

4. .s3sliderImage{float:left;position:relative;display:none}

5. .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}

6. .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}

7. .s3sliderImage span a.featured-title:hover{color:#999}

8. .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}

9. .s3sliderImage span a:hover{color:#555}

5. Kemudian copas kode berikut diatas kode </head>

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

<script type='text/javascript'>

<![CDATA[//><!--

(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>

6. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar

dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>

<div id='slider-holder'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage' style='display: list-item;'>

<a href='LETAK LINK DISINI 1'><img

src='http://4.bp.blogspot.com/_iPWSNaVgMts/TQyIH6cyuRI/AAAAAAAAACA/qWAxUCqbZ_E/s1600/

NorahJones.jpg' style='width: 660px; height: 200px;'/></a>

<span style='display: block;'>

<a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>

Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award

</span>

</li>

<li class='s3sliderImage' style='display: none;'>


src='http://4.bp.blogspot.com/_iPWSNaVgMts/TQyS_9SxP4I/AAAAAAAAACE/oxCVpT57mS8/

s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>

<span style='display: none;'>

<a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>

Nggak usah dijelaskan udah ada tulisanya diatas

</span>

</li>



src='http://1.bp.blogspot.com/_iPWSNaVgMts/TQyTG5zb0II/AAAAAAAAACM/ySlClyfQQNk/s1600/

andien.jpg' style='width: 660px; height: 200px;'/></a>


<a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>

Ini orangnya yang..............

</span>

</li>



src='http://4.bp.blogspot.com/_iPWSNaVgMts/TQyTCMJ7_mI/AAAAAAAAACI/ASMtA_q83yE/s1600/Alanis-

Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>


<a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>

Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan

</span>

</li>



src='http://1.bp.blogspot.com/_iPWSNaVgMts/TQyTJI0yTlI/AAAAAAAAACQ/YNqRNd_ne_o/s1600/Anne-

Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>


<a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>

Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....

</span>

</li>

<li class='clear s3sliderImage'/>

</ul>

</div>

</div>

7. Simpan Template

Keterangan :

Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.

Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan

dengan demo template yang saya gunakan.

Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.

Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.

Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya,

semoga berhasil ya !

Memasang Gambar Slideshow Dibawah Header

Documents

Transcript of Memasang Gambar Slideshow Dibawah Header