Cara Membuat Foto Slide Menu Dengan Kode Javascript (JQuery). ~ Ada Nggak

Membuat foto bergerak di halaman posting maupun di sidebar diperlukan kode javascript dan tampilannya kemudian bisa dipermanis dengan kode CSS dan Html. Jika sebelumnya saya memposting jenis-jenis menu dengan kode CSS, maka cara membuat photo slide atau membuat photo bergerak satu persatu seperti contoh di bawah maka kita memerlukan javascript. CSS tidak bisa membuat photo bergerak secara terus menerus, css hanya bisa membuat foto hover.

Banyak variasi slide yang bisa dibuat dengan kode ini, variasi slider bisa dikelola dengan kode CSS sesuai selera. Ini seperti galeri photo slider, koleksi menu gaya photo slider saya mengaplikasikannya di web saya. Bagi anda yang fasih dengan CSS, tentu tidak sulit untuk membuat tampilannya menjadi private. Namun bagi blogger pendatang baru, cukuplah mengganti foto dengan foto milik sendiri. Ini sudah baik. Oke.. Mari kita lihat demonya seperti yang berikut ini.

Previous

Next

Jika ingin membuat foto slider dalam blog, berikut ini adalah cara membuat foto slider kedalam blog

Langkah-langkah Membuat Photo Slider

Perlu difahami sebelumnya jika cara membuat slider memerlukan tiga kelompok bahasa komputer, yaitu CSS, HTML, dan Javascript. Kombinasi ketiga bahasa inilah yang membuat photo bisa bergerak slider.

1. Kode CSS. Kode ini dimasukkan kedalam template blog bergabung dengan kode css blog. Posisinya sebelum tag /skin.

2. Kode HTML, kode ini ditempatkan pada posisi yang diinginkan dimana saja photo slider ini hendak ditampilkan. Jika misalkan ingin menampilkan di sidebar, maka paste lah kode html di sidebar. Jika ingin slider photo di postingan, paste lah kode html di postingan blog spot.

3. Kode Javascript. Kode ini diinstal dalam template blog. Tepatnya sebelum tag /head.

Pertama Kode CSS. Kopi paste kode di bawah ini kedalam template. Log in ke blogger lalu >>> Klik Elemen Halaman >> Edit HTML. Agar lebih aman, Save dulu template anda.Tempatkanlah kode CSS ini kedalam CSS blog, bergabung dengan kode CSS lainnya. Tempatnya sebelum kode /skin.

#wrap {width:580px; height:380px; background: #333; position:relative;

border:2px solid #000; margin:30px auto 20px auto;}

#slide {width:480px; height:280px; overflow:hidden; position:absolute;

left:49px; top:29px; background:#000; border:1px solid #888;}

#slide a {text-decoration:none; display:block; width:480px;

height:360px; position:absolute; left:480px;}

#slide a img {display:block; border:0;}

#previous b {display:none;}

#previous {width:32px; height:32px; background:url(left.png);

position:absolute; left:34px; top:154px; cursor:pointer;}

* html #previous {background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='iphoto-slide/left.png',

sizingMethod='crop');}

#next b {display:none;}

#next {width:32px; height:32px; background:url(right.png);

position:absolute; left:514px; top:154px; cursor:pointer;}

* html #next {background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo-slide/right.png',

sizingMethod='crop');}

#buttons {position:absolute; left:50px; top:330px;}

#buttons div {width:62px; height:37px; float:left; margin-right:8px;

display:inline;}

#buttons div img {display:block; cursor:pointer; border:1px solid #444;}

img#loading {position:absolute; left:240px; top:170px;}

Lalu klik preview. Jika tidak ada pesan error yang muncul di layar komputer, langsung save template anda.

Kode Javascript. Kode ini harus berada sebelum tag /head. Download kode javascript ini dan letakkan di bawah /head Tapi jika tidak ingin repot-repot, silahkan hosting ke website javascript host dan tempatkan link kedalam blog sebelum tag /head.
Pilihan paling simple, ngak perlu peras keringat :p, kopi paste saja kode berikut ini, beres...

<script src='http://yourjavascript.com/1255921214/auto-slide.js'

type='text/javascript'/>

$(document).ready(function() {

$(".infoPanel li a img").fadeTo(1,0.8);

$(".infoPanel li a").eq(0).addClass("current");

$("a.current").next().fadeIn();

$(".infoPanel li a.current img").fadeTo(250,1);

$(".infoLink").mouseover(function() {

if (this.className.indexOf("current") == -1) {

$("a.current").next().fadeOut();

$(".infoPanel li a.current img").fadeTo(1,0.8);

$("a.current").removeClass("current");

$(this).addClass("current");

$("a.current").next().fadeIn();

$(".infoPanel li a.current img").fadeTo(250,1);

}

});

});

</script>

Ketiga, Kode Html. Kopi paste kode di bawah ini dan letakkan di tempat yang diinginkan. Jika anda meletakkan di sidebar, maka klik Elemen Halaman >> Add Witget HTML/Javascript. Kodenya sebagai berikut:

<div id="wrap">

<div id="slide">

<img id="loading"

src="http://1.bp.blogspot.com/-HqqT2u39kzM/TdizCHxG3BI/AAAAAAAAA_Q/3byWjY7SMlE/s600/loading.gif"

alt="" />

<a id="p1" href="#url"><img

src='http://1.bp.blogspot.com/-VBuQ6Gf0tvE/TdizCQ_RgeI/AAAAAAAAA_Y/X8kev_2tz30/s600/pic1.jpg'

alt='' /></a>

<a id="p2" href="#url"><img

src='http://3.bp.blogspot.com/--GVtQTfGSjQ/TdizCzABngI/AAAAAAAAA_o/Rhu-1Bk_OkE/s600/pic2.jpg'

alt='' /></a>

<a id="p3" href="#url"><img

src='http://2.bp.blogspot.com/-iawWzRNgtKQ/TdizYNJfWWI/AAAAAAAAA_4/J5Ih4URp2fY/s600/pic3.jpg'

alt='' /></a>

<a id="p4" href="#url"><img

src='http://4.bp.blogspot.com/-QDOmb8kE3Wo/TdizYrTr3dI/AAAAAAAABAI/7r8fWKUs5Ik/s600/pic4.jpg'

alt='' /></a>

<a id="p5" href="#url"><img

src='http://3.bp.blogspot.com/-V-MkhGVeWCQ/TdizZGKgDdI/AAAAAAAABAY/XFgl4C_VLHw/s600/pic5.jpg'

alt='' /></a>

<a id="p6" href="#url"><img

src='http://2.bp.blogspot.com/-I6hs3eGHThI/Tdiz82cstbI/AAAAAAAABAo/PyPctNT72rA/s600/pic6.jpg'

alt='' /></a>

<a id="p7" href="#url"><img

src='http://3.bp.blogspot.com/-FRLjVs0XkHQ/Tdiz9VX3LwI/AAAAAAAABA4/diGJf8vMzNE/s600/pic7.jpg'

alt='' /></a>

</div> 

<div id="previous"><b>Previous</b></div>

<div id="next"><b>Next</b></div>

<div id="buttons">

<div id="b1"><img

src='http://1.bp.blogspot.com/-ZyseJlKWtyk/TdizCveACVI/AAAAAAAAA_g/VUc10zMOZK4/s400/pic1t.jpg'

alt='' /></div>

<div id="b2"><img

src='http://2.bp.blogspot.com/-eGVzwjtmGDY/TdizDaBeh5I/AAAAAAAAA_w/GXqj2GAq6BY/s400/pic2t.jpg'

alt='' /></div>

<div id="b3"><img

src='http://4.bp.blogspot.com/-C2LdQVjbS50/TdizYfEs4YI/AAAAAAAABAA/NLoLl63UuJk/s400/pic3t.jpg'

alt='' /></div>

<div id="b4"><img

src='http://2.bp.blogspot.com/-V7AE0wQUzLI/TdizYxxUW7I/AAAAAAAABAQ/8Mew5fa0u8Y/s400/pic4t.jpg'

alt='' /></div>

<div id="b5"><img

src='http://4.bp.blogspot.com/-urQp1zsK1iE/Tdiz8juLLII/AAAAAAAABAg/NMc3sPAzlSg/s400/pic5t.jpg'

alt='' /></div>

<div id="b6"><img

src='http://4.bp.blogspot.com/-TKg__8_DgOg/Tdiz9CXpOQI/AAAAAAAABAw/0BcfZ36adIY/s400/pic6t.jpg'

alt='' /></div>

<div id="b7"><img

src='http://1.bp.blogspot.com/--vVLNGGZxAQ/Tdiz9gm8ogI/AAAAAAAABBA/YjkJbXzg24Y/s400/pic7t.jpg'

alt='' /></div>

</div> 

</div>

Lalu save Html dan lihat hasilnya. Jika ada yang masih kurang, pastilah photo dan link belum sesuai dengan keinginan. Jadi ganti semua link dan foto dengan milik anda sendiri. Saya fikir tidak cukup rumit melakukannya. Jadi...

Selamat berkreasi..

Post title : Cara Membuat Foto Slide Menu Dengan Kode Javascript (JQuery).
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-foto-slide-menu-dengan.html

Kamis, 26 Mei 2011

Cara Membuat Foto Slide Menu Dengan Kode Javascript (JQuery).

Langkah-langkah Membuat Photo Slider

0 komentar:

Show Emoticons

Posting Komentar

Halaman

isi terpopuler