Memasang Gambar Slideshow Dibawah Header
7
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 plainprint? 1. /* SLIDESHOW */
description
Memasang Gambar Slideshow Dibawah Header
Transcript of 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 berikantutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana.Slideshowsendiri 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 template3pictselbikinan mas Riki dan meletakkannya di dalam main post, silahkan cekdisini.
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 lebih660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.1. Login dulu di blogger.2. Masuk keRancangan >> Edit HTML.3. Jangan lupa klikExpand Template Widgetkarena akan membuat anda jadi pusing dengan kode yang panjang.4. Copy paste kode berikut diatas kode]]>view plainprint?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}4. .s3sliderImage{float:left;position:relative;display:none}5. .s3sliderImagespan{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. .s3sliderImagespana.featured-title:link,.s3sliderImagespana.featured-title:visited{color:#FFF;font-size:14px;padding:002px}7. .s3sliderImagespana.featured-title:hover{color:#999}8. .s3sliderImagespana:link,.s3sliderImagespana:visited{color:#888}9. .s3sliderImagespana:hover{color:#555}5. Kemudian copas kode berikut diatas kode
$(document).ready(function() {$('#s3slider').s3Slider({timeOut: 4000});});
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
-
INI GAMBAR NORAH JONES
Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award -
FOURPLAY
Nggak usah dijelaskan udah ada tulisanya diatas -
MBAK ANDIEN
Ini orangnya yang.............. -
ALANIS MORISSETTE
Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan -
WANITA CANTIK
Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
7. Simpan TemplateKeterangan : Perhatikan lebar660px, silahkan sesuaikan saja dengan lebar post template anda. Perhatikan juga angka-20pxpada kode css-nya, saya gunakanmargin-left:-20pxkarena menyesuaikan dengan demo template yang saya gunakan. Tulisan yang berwarnamerahganti dengan deskripsi tentang gambar anda. Kode yang berwarnabiruadalah 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 !
