> Cara membuat fitur slide show

Selasa, 12 Juli 2011

21

Cara membuat fitur slide show

Banyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk terbaru yang kita tawarkan. Terutama untuk web atau blog yang banyak menampilkan banyak gambar, desain ataupun foto. Dilihat dari tampilanya, slide show ini sangat menarik. Jadi selain kegunaan diatas slide show ini dapat menjadikan web atau blog kita tambah lebih menarik.

LIHAT DEMO

Bila anda berminat memasang widget ini, silahkan anda ikuti langkah-langkah berikut ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

8. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menampilkan slide show ini pada halaman depan. Silahkan anda ikuti langkah - langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript


4. Copy dan paste kode dibawah ini pada gadget tersebut :
<div style="float:left;">

<div id="slider4" class="sliderwrapper">
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
</div>

<div id="paginate-slider4">
<a href="ULR POST" class="toc"><img alt="IMAGE-1" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-2" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-3" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-4" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-5" src="ULR GAMBAR KECIL"/></a>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
Catatam :
Silahkan anda ganti tulisan yang berwarna MERAH, BIRU, dan PINK dengan milik anda.

5. SIMPAN.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara membuat fitur slide show"
Diulas Oleh : | Selasa, 12 Juli 2011 | 23.07
Description : Banyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk t...

Rating : 6.4 Dari 10, Berdasarkan 2100+ Dari 21 000+ Pengunjung.



21 komentar:

  1. KURANG KODE SLIDE CSS NYA BRO,,,

    BalasHapus
  2. Kode CSS tidak ada yang kurang, anda lihat kode CSS yg ada pada langkah no. 7.
    Atau anda lihat DEMONYA.....,fitur slide show tampak elegant dan bekerja dengan baik...

    BalasHapus
  3. Aku udah nyoba tapi not working gan,, hanya muncul gambar yg kecil, gambar yg besarnya ngga jalan,,

    BalasHapus
  4. oh... kalau masalah gambar yg td muncul, itu dikarenakan ULR gambar yg sama. Silahkan anda gunakan file gambar sama, tapi ULR yang berbeda seperti berikut :
    https://lh6.googleusercontent.com/-0-YJmLORXw0/Th0Od4vdllI/AAAAAAAAA24/OYwUe7wex7E/s500/RUANG%2BKELURGA.%2B1.jpg

    https://lh3.googleusercontent.com/-MIHJSoPjno0/Th0ji66uTaI/AAAAAAAAA3M/UZ6y4yV_GuQ/s104/RUANG%2BKELURGA.%2B1.jpg

    Jangan lupa anda perhatikan nilai "S" pd ULR tersebut, yaitu s500 dan s104... itu adalah nilai besar kecilnya gambar.
    Silahkan dicoba lagi...
    semoga bermanfaat.

    BalasHapus
  5. Ok. Thanks buat infonya...

    BalasHapus
  6. gambar bsa dmasukkan harus berupa s 500 dan s 104 ya bang?
    tx
    fadhilrafidnaldi.blogspot.com

    BalasHapus
  7. kalau bisa semua tutorialnya jgn hanya utk blogspot dong gan.... sekali2 buat utk web.. yaaa walau sebenarnya gx terlalu beda sih......

    BalasHapus
    Balasan
    1. iya..., terima kasih atas masukannya.
      Tapi untuk sementara, saya berbagi sesuai kemampuan yang saya bisa dulu...

      Hapus
  8. mas noer kok tampilan blog saya tdak seperti digambar no 1, posting komentar pengaturan rancangan,dll

    BalasHapus
    Balasan
    1. Anda sudah menggunakan antarmuka dasbor yg baru... tak masalah. Tapi istilah-istilah atau format menunya tidak jauh berbeda kok...

      Hapus
  9. tapi aku bingung mas mohon bantuannya gmn ya,,hehehe

    BalasHapus
    Balasan
    1. OK..., kenalan dulu dhong...
      Saya noercholis, siapa nama anda ya...?

      Hapus
  10. Alhamdulillah..uk. s-nya sdh dicoba kedua. Tetep ga bs,hy gbr kcl sj yg mncl..Tlng dicek mas http://mandiriteknikutama.blogspot.com/ tks sblmnya.

    BalasHapus
    Balasan
    1. Maksud anda slide pd artikel ini atau "Fitur Slide Accordion" ya....

      Kalau maksudnya "Fitur Slide Accordion", seperti yg ada pada blog anda... gini saja, silahkan anda berikan email anda... nanti akan saya kirim kode seperti yg pernah saya berikan pd sobat yg lain.
      Mungkin akan lebih cocok dengan kondisi template anda... OK.

      Hapus
  11. triples79rentcar@yahoo.com, saya tunggu script dan pnjlsannya. Tks sblmnya mas..

    BalasHapus
  12. Maap mas yg sy mksdkan utk postingan membuat fitur slide show. Gbr kcl sdh muncul dan link sdh bekerja.Namun gbr bsr tdk muncul, dan efek slide nya jg tdk bkrj. Uk.gbr bsr sdh diganti jd s500,tetap tdk bekerja. Tolong koreksi (http://triples79rentcar.blogspot.com/)tks sblmnya

    BalasHapus
  13. menarik sekali isi blog ini .... thanks informasinya mr. juragan .....

    BalasHapus
  14. ini mas noer cholis yang punya creating website kah ?

    BalasHapus
  15. mantabb sekali,

    Visit http://gamoramonel.blogdetik.com/

    BalasHapus
  16. mantap !!!
    WWW.CANOPYBAGUS.COM

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


DAFTAR ISI

DAFTAR ISI


BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"

CHAT

CHAT



TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Ada kesalahan di dalam gadget ini

top down