Memasang Gambar Slideshow Dibawah Header

umpa 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. uat anda yang memiliki lebar kolom post lebih atau kurang dari !!"p# silahkan disesuaikan saja. $. &. 3. %ogin dulu di blogger. 'asuk ke Rancangan >> Edit HTM . (angan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang. ). *opy paste kode berikut diatas kode !!>"#b$s%in>
view plainprint?

1. /* SLIDESHOW */ 2. #slider-holder{width:660p !hei"ht:200p !o#er$low:hidde%!&'r"i%-le$t:20p ! &'r"i%-ri"ht:10p ! p'ddi%":0( #s)slider {width:660p !hei"ht:660p !positio%:rel'ti#e!o#er$low:hidde%( ). #s)slider*o%te%t{width:660p !positio%:'+sol,te!top:0!&'r"i%-le$t:0(

-. .s)sliderI&'"e{$lo't:le$t!positio%:rel'ti#e!displ'.:%o%e( /. .s)sliderI&'"e sp'%{positio%:'+sol,te!le$t:0!$o%t-wei"ht:000!$o%tsi1e:12p !2olor:#$$$!hei"ht:-/p !width:660p !+'23"ro,%d2olor:#-e-d)2!$ilter:'lph'4op'2it.5006!-&o1-op'2it.:0.0!-3ht&lop'2it.:0.0!op'2it.:0.0!displ'.:%o%e!+otto&:0!p'ddi%":10p ( 6. .s)sliderI&'"e sp'% '.$e't,red-title:li%37.s)sliderI&'"e sp'% '.$e't,redtitle:#isited{2olor:#888!$o%t-si1e:1-p !p'ddi%":0 0 2p ( 0. .s)sliderI&'"e sp'% '.$e't,red-title:ho#er{2olor:#999( :. .s)sliderI&'"e sp'% ':li%37.s)sliderI&'"e sp'% ':#isited{2olor:#:::( 9. .s)sliderI&'"e sp'% ':ho#er{2olor:#///( +. Kemudian copas kode berikut diatas kode "#head> ,script src-.http/00aja#.googleapis.com0aja#0libs0j1uery0$.3.&0j1uery.js. type-.te#t0javascript.02 ,script type-.te#t0javascript.2 ,34400442,35*67875002,344 9function9:;< :.fn.s3Slider - function9vars; < var element var time>ut var current - this= - 9vars.time>ut 3- undefined; ? vars.time>ut / )"""= - null=

var time>ut@n - null= var faderStat - true= var m>ver var items - false= - :9ABA C element5"D.id C A*ontent .A C element5"D.id C AEmageA;=

var itemsSpan - :9ABA C element5"D.id C A*ontent .A C element5"D.id C AEmage spanA;= items.each9function9i; < :9items5iD;.mouseover9function9; < m>ver - true= F;= :9items5iD;.mouseout9function9; < m>ver - false= fadeGlement9true;= F;= F;= var fadeGlement - function9is'ouse>ut; < var this8ime>ut - 9is'ouse>ut; ? 9time>ut0&; / time>ut= this8ime>ut - 9faderStat; ? $" / this8ime>ut=

if9items.length 2 "; < time>ut@n - set8imeout9makeSlider, this8ime>ut;= F else < console.log9AHoof..A;= F F var makeSlider - function9; < current - 9current 3- null; ? current / items59items.length4$;D= var currIo - jJuery.in7rray9current, items; C $

currIo - 9currIo -- items.length; ? " / 9currIo 4 $;= var new'argin - :9element;.width9; K currIo= if9faderStat -- true; < if93m>ver; < :9items5currIoD;.fadeEn99time>ut0!;, function9; < if9:9itemsSpan5currIoD;.css9.bottom.; -- "; < :9itemsSpan5currIoD;.slideUp99time>ut0!;, function9; < faderStat - false= current - items5currIoD= if93m>ver; < fadeGlement9false;= F F;= F else < :9itemsSpan5currIoD;.slide6own99time>ut0!;, function9; < faderStat - false= current - items5currIoD= if93m>ver; < fadeGlement9false;= F F;= F F;= F F else < if93m>ver; < if9:9itemsSpan5currIoD;.css9.bottom.; -- "; <

:9itemsSpan5currIoD;.slide6own99time>ut0!;, function9; < :9items5currIoD;.fade>ut99time>ut0!;, function9; < faderStat - true= current - items59currIoC$;D= if93m>ver; < fadeGlement9false;= F F;= F;= F else < :9itemsSpan5currIoD;.slideUp99time>ut0!;, function9; < :9items5currIoD;.fade>ut99time>ut0!;, function9; < faderStat - true= current - items59currIoC$;D= if93m>ver; < fadeGlement9false;= F F;= F;= F F F F makeSlider9;= F= F;9jJuery;= 00442,3DD2,0script2 ,script type-.te#t0javascript.2 :9document;.ready9function9; < :9LB3M=Bs3sliderLB3M=;.s3Slider9< time>ut/ )""" F;= F;= ,0script2

!.

Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url4nya, silahkan anda copas kode berikut setelah kode "di& id'(main)wrapper(> ,div id-.slider4holder.2 ,div id-.s3slider.2 ,ul id-.s3slider*ontent.2 ,li class-.s3sliderEmage. style-.display/ list4item=.2 ,a href-.%G87K %EIK 6ESEIE $.2,img src-.http/00).bp.blogspot.com0NiHOSIaPg'ts08JyEQ!cyuRE0777777777*701O7#U*1bRNG0s$!""0Iorah (ones.jpg. style-.width/ !!"p#= height/ &""p#=.02,0a2 ,span style-.display/ block=.2 ,a class-.featured4title block. href-.%G87K %EIK 6ESEIE $.2EIE S7' 7R I>R7Q (>IGS,0a2,br02 Iorah (ones adalah seorang musisi jaTT yang sudah banyak mendapatkan Srammy 7ward ,0span2 ,0li2 ,li class-.s3sliderEmage. style-.display/ none=.2 ,a href-.%G87K %EIK 6ESEIE &.2,img src-.http/00).bp.blogspot.com0NiHOSIaPg'ts08JySNMS#H)E0777777777*G0o#*Pp8+UmSV0s$!""0$U))+ !N$Nf.jpg. style-.width/ !!"p#= height/ &""p#=.02,0a2 ,span style-.display/ none=.2 ,a class-.featured4title block. href-.%G87K %EIK 6ESEIE &.2@>URH%7W,0a2,br02 Iggak usah dijelaskan udah ada tulisanya diatas ,0span2 ,0li2 ,li class-.s3sliderEmage. style-.display/ none=.2 ,a href-.%G87K %EIK 6ESEIE 3.2,img src-.http/00$.bp.blogspot.com0NiHOSIaPg'ts08Jy8S+Tb"EE0777777777*'0ySl*lyfJJIk0s$!""0andien.jp g. style-.width/ !!"p#= height/ &""p#=.02,0a2 ,span style-.display/ none=.2 ,a class-.featured4title block. href-.%G87K %EIK 6ESEIE 3.2' 7K 7I6EGI,0a2,br02 Eni orangnya yang.............. ,0span2 ,0li2 ,li class-.s3sliderEmage. style-.display/ none=.2 ,a href-.%G87K %EIK 6ESEIE ).2,img src-.http/00).bp.blogspot.com0NiHOSIaPg'ts08Jy8*'(UNmE0777777777*E07S't7N1V3yG0s$!""07lanis4

'orissette4&.(HS. style-.width/ !!"p#= height/ &""p#=.02,0a2 ,span style-.display/ none=.2 ,a class-.featured4title block. href-.%G87K %EIK 6ESEIE ).27%7IES '>RESSG88G,0a2,br02 8ampangnya sih biasa, tapi lagunya teman4teman semua harus mendengarkan ,0span2 ,0li2 ,li class-.s3sliderEmage. style-.display/ none=.2 ,a href-.%G87K %EIK 6ESEIE +.2,img src-.http/00$.bp.blogspot.com0NiHOSIaPg'ts08Jy8(E"y8lE0777777777*J0WI1RIdNneNo0s$!""07nne4 Qathaway4"&.jpg. style-.width/ !!"p#= height/ &""p#=.02,0a2 ,span style-.display/ none=.2 ,a class-.featured4title block. href-.%G87K %EIK 6ESEIE +.2O7IE87 *7I8EK,0a2,br02 Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya.... ,0span2 ,0li2 ,li class-.clear s3sliderEmage.02 ,0ul2 ,0div2 ,0div2 U. Simpan 8emplate

*eterangan $

Herhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda. Herhatikan juga angka -20px pada kode css4nya, saya gunakan margin)le+t$),0px karena menyesuaikan dengan demo template yang saya gunakan.

8ulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda. Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.

Simana teman4teman, cukup panjang kan? (angan khawatir, saya yakin teman4teman semua bisa melakukannya, semoga berhasil ya 3