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

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

Contact

Talk to us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iusto fugit esse soluta quae debitis quibusdam harum voluptatem, maxime, aliquam sequi. Tempora ipsum magni unde velit corporis fuga, necessitatibus blanditiis.

Address:

9983 City name, Street name, 232 Apartment C

Work Time:

Monday - Friday from 9am to 5pm

Phone:

595 12 34 567

Google+ Badge

Subscribe to our Newsletter to get important updates about our network & spicy inside stories.

The Best Choice For Your Best Moment

Chat Now

YM

Contact

Address:

PERUM Bekasi Timur Regensi Blok o9 No.12C
Kota Legenda
Bekasi Timur
Bekasi
Hotline:

Office : 021-8261-8157
Esia : 021-9622 1992
Cell : 0812-990 600 47 -Telkomsel
Cell : 0812-9080 1569 -Telkomsel
Cell : 0819 468 18 774 -Telkomsel
BBM : 54DBE84A
Whatsapp: 0812-9906-0047
EMAIL:
Dewiswedding[et]yahoo[dot]com

Follow on Facebook

Find Us on Facebook

Search

Most Popular
Videos