Headlines News :
Home » , » Cara Membuat Foto Slide Menu Dengan Kode Javascript (JQuery).

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

Written By Admin on 27 May 2011 | 8:00 AM

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.



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

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

$(&quot;.infoPanel li a&quot;).eq(0).addClass(&quot;current&quot;);
$(&quot;a.current&quot;).next().fadeIn();
$(&quot;.infoPanel li a.current img&quot;).fadeTo(250,1);

$(&quot;.infoLink&quot;).mouseover(function() {
       if (this.className.indexOf(&quot;current&quot;) == -1) {
               $(&quot;a.current&quot;).next().fadeOut();
               $(&quot;.infoPanel li a.current img&quot;).fadeTo(1,0.8);
               $(&quot;a.current&quot;).removeClass(&quot;current&quot;);
               $(this).addClass(&quot;current&quot;);
               $(&quot;a.current&quot;).next().fadeIn();
               $(&quot;.infoPanel li a.current img&quot;).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> <!-- end wrap -->

 <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> <!-- end buttons -->
 </div> <!-- end wrap -->


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

Share this article :

5 Comments:

Muhammad Muchlis said...

pas mau simpan template kok gak bisa.?? error malahan...

Maurice Avrahm said...

Dipraktekkan di mana gan? Coba saya lihat kesalahannya apa. Jika saya bisa, mestinya di blog kamu juga bisa.

deniwildan said...

gimana kalau dicari untuk nyimpen kode CSS dan Javascript-nya ga ada....

Whienda said...

Code Java Script yng harus di kopas di atas /head, kok gak bisa, gan?
Pesan errornya kyk gini:

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "head" must be terminated by the matching end-tag "".

Tolong, gan! daku penasaran, deh! Thanks.

RnBee26 said...

gan, ada yang tahu css buat slide iklan dan tempatnya dibawah ngga ??
kalau tahu kirim balik ya gan (merpati.bojonegoro@gmail.com)

 
Support : Creating Website | Freshlime CMS | Wisencare
Proudly powered by Blogger
Copyright © 2011. Wisencare : how to - All Rights Reserved
Template Design by Creating Website Published by Freshlime