H ari ini saya akan berbagi slider keren yang bekerja dengan JavaScript dan jQuery  dan flash slider needed. Java Script Image Slider ini berisi pita di sudut kiri atas slider dan itu disebut sebagai "What's Hot", juga mengandung efek slice irisan gambar indah yang menjadi 12 bagian, fitur utama peningkatan keindahan fitur besar slider. Slider ini sangat disesuaikan sehingga untuk mengeditnya sesuai keinginan dan yang sempurna akan sesuai untuk slider blog. Slider ini dibuat oleh menucool.com  dan Saya telah menciptakan sebuah versi Template slider pada kerja yang sempurna dengan blogger blog. Untuk melihat demo Java Script Image Slider silahkan klick tombol di bawah ini.



Cara membuat/memasang Java Script Image Slider


Untuk membuat Java Script Image Slider ini juga sangat mudah, ikuti instruksi berikut untuk mulai menerapkannya pada blog Anda.

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget.

3. Pilih elemen HTML/Java Script.

4. Lalu copy kode berikut dan letakkan di dalam  elemen HTML/Java Script tadi.

<style type="text/css">
 /* JavaScript Image Slider By http://www.otowebsite.blogspot.com/ */
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(http://2.bp.blogspot.com/-jV-KArOJKtE/UBglQCMGPVI/AAAAAAAAFTI/Kg_Fh-oeBFo/s1600/otowebsite.blogspot.com--ribbon.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 500px;
 height: 218px;
 background: #fff url(http://4.bp.blogspot.com/-S7t7tq1z4yg/UBglPqtYWTI/AAAAAAAAFTA/3qZEVcRIEGU/s1600/otowebsite.blogspot.com--loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color: black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}
div.mc-caption a {
 color: #FB0;
}
div.mc-caption a:hover {
 color: #DA0;
}
div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(http://3.bp.blogspot.com/-t2lrZPu6j64/UBglWTcvfkI/AAAAAAAAFT4/UxZ7difX40w/s1600/otowebsite.blogspot.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}
div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>
<script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">
<a href="#"><img src="http://3.bp.blogspot.com/-Hijn3sSE6Qs/UBglSQnhpeI/AAAAAAAAFTQ/GxqYk9EI62s/s1600/otowebsite.blogspot.com-1.jpg" alt="Image Slider By otowebsite.blogspot.com"/></a>
<a href="#"><img src="http://1.bp.blogspot.com/-EE2Q-mY_6x4/UBglTCuyAxI/AAAAAAAAFTY/isEX9a68iEM/s1600/otowebsite.blogspot.com-2.jpg" alt="Oto Website"/></a>
<a href="#"><img src="http://2.bp.blogspot.com/-yNmhCkn5NMU/UBglUfcuM1I/AAAAAAAAFTg/o4Nt2iy-R3o/s1600/otowebsite.blogspot.com-3.jpg" alt="The slide is a linking image"/></a>
<a href="#"><img src="http://2.bp.blogspot.com/-1wONO9PVs4Y/UBglVA0XKpI/AAAAAAAAFTo/1mF8xzRPVl8/s1600/otowebsite.blogspot.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>
<a href="#"><img src="http://4.bp.blogspot.com/-vjIncxa4PN0/UBglV-VjpxI/AAAAAAAAFTw/-_GTRVJOYsk/s1600/otowebsite.blogspot.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>

5. Simpan.


Melakukan Perubahan


Jika Anda ingin melakukan perubahan, Anda perhatikan kode-kode yang saya block di atas, dan berikut ini adalah keterangannya:
  • Kode yang di block merah muda adalah lebar gambar.
  • Kode yang di block oranye adalah lebar dan tinggi widget.
  • Kode yang di block kuning adalah url gambar.
  • Kode yang di block biru adalah tempat untuk menempatkan url tujuan.
  • Kode yang di block hijau adalah title dari gambar.


Mengalami Kesulitan?


Jika Anda mengalami kesulitan dalam Cara membuat/memasang Java Script Image Slider, jangan sungkan untuk bertanya, saya akan dengan senang hati membatu Anda.

Poskan Komentar Blogger Disqus

  1. kalau pengen auto post pada slider gimana om... @@,

    btw .. browser saya tiap buka postingan blog agan agak lama ya om.. kenapa..??? ~x(

    BalasHapus
    Balasan
    1. karena kebanykan javascript mungkin om :)

      Hapus
  2. @Denddy GustianaKlo igin d jdikan auto post gak bsa krna mulai dri atas-bwah ini scrip manual.
    Klo auto itu Nivo yg lainnya.

    Klo ingin auto mugkin agan bsa gunkan tutorial yg INI

    Sblumny thanks agan udh membrithu sya tentang msalh load blog ini, tpi stelh sya gunkn smua browser yg ada di lptop sya kcptn blog ini tidak lambat!
    mlah sya mncoba membndigkan speed blog agan ama blog sya dan hasilnya sprti pada gambar:

    http://1.bp.blogspot.com/-YfrukPBRa1A/UB1WU6-0oPI/AAAAAAAAFWE/qBnw591BWeg/s1600/speed.jpg

    saya menggunakan tool INI untuk mngetes kcptan blog saya.

    Klo ada mslah pda blog ini tlog bri tahu sya lgi ya gan, thnks!

    BalasHapus
  3. izin copaz gan,disertakan sumber pastinya

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. saya kan dapat tugas bikin web statis, nah saya pengen kasih gambar slide di web saya, saya coba-coba bikin pakai script itu bisa, tapi pas ndak connect ke internet kok ndak bisa ya? kenapa? apa itu bisanya kalo di blogger aja? mohon cepat di balas yaa. makasi banyak :)

    BalasHapus
  6. @Karina YunistiraMaaf saya kurang paham maksud Anda, bukannya kalo tidak connect ke internet kita juga tidak bisa membuka halaman internet? :p

    BalasHapus
  7. @dek rif
    hehehe, saya juga ngga paham sama pertanyaan saya sendiri :D
    gini nih maksutnya, kan saya dapet tugas HTML bikin web, tapi webnya ndak connect ke internet, soalnya cuma buat (semacam) percobaan gituuu :o

    BalasHapus
  8. Terima Kasih sebelumnya... pada blog saya bekerja dengan amat bagus mas.. tp saya ada pertanyaan.. bagaimana caranya tulisan "whats hot" diganti ama nama blog kita misalnya.. mohon bantuannya..

    hasil slider mas pada blog saya bisa dilihat disini http://focuzartphotography.blogspot.com/

    Terima kasih banyak mas

    BalasHapus
  9. @Genz photoworkItu adalah url gambar, silahkan Anda ganti kode ini:

    http://2.bp.blogspot.com/-jV-KArOJKtE/UBglQCMGPVI/AAAAAAAAFTI/Kg_Fh-oeBFo/s1600/otowebsite.blogspot.com--ribbon.png

    BalasHapus
  10. Scrip-nya mantap gan....mohon ijin copy...
    Gan, mau nanya scrip nya sdh saya masukin dan sudah jalan tp pada saat mau edit atau penambahan image lg kenapa ga tampil lagi ya?
    Kemudian untuk menurunkan tombol2 utk klik nya gimana ya gan?
    o iya gan sama warna ngeblok yg paling bawah (abu2) kalau saya mau warna hitam gmn gan?
    Tq..

    BalasHapus
  11. Sobs,kok loading widgetnya lama sobs dan gimana cara membesarkan ukuran gambardan garisnya?

    Tolong balas melalu YM : dragonnandoblogspot@yahoo.com Thank's

    BalasHapus
  12. Muannntab gan.., izin copy. Btw kalo mw hilangin tulisan "WHAT'S HOT" nya gimana????

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top