BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Photo Slide Show

Script image slide show ini saya dapatkan ketika mendunlut template by “ www.falconhive.com “ . kemudian saya modif sedikit . ( red. salah satunya dengan meminjam file image dari free Css Templates ).

Source File | View Demo

Untuk menambahkan scipt image slide show tersebut yang perlu kita perhatikam ialah menambah credit by free css templates dan falconhive pada blog anda.

Cara Menambahkan script.

PERTAMA :

Buka tab Layout - Edit Html. pada bagian Css-nya ( sebelum tag : ]]></b:skin> ) masukan syntax Css slide ini.

#myslides{ 
background:none; 
}

.stepcarousel{ 
position: relative;overflow: scroll; 
width: 790px; /*lebar yg perlu kita sesuaikan*/ 
height: 165px;margin: 0px 14px 5px 14px;background:none; 
}

.stepcarousel .belt{ 
position: absolute; left: 0;top: 0;

}

.stepcarousel .panel{ 
float: left;   overflow: hidden;margin: 10px 17px ;  
width:175px; background:#F2F2F2; 
height:140px; border:1px solid #DFDFDF;

}

.stepcarousel .panel p{ 
text-align: left; overflow: hidden;margin: 5px 5px ;  
}

.stepcarousel .panel h2{ 
text-align: left;height:20px; overflow: hidden;  
margin: 2px 5px ;   font-size:16px; 
font-weight:bold;  text-align:center; 
font-family:Georgia,century gothic,Arial,verdana, sans-serif;

}

.stepcarousel .panel img{ 
float: left; background:#F2F2F2; 
margin: 10px 10px 10px 10px; padding:0px 0px; 
}

Note : Perhatikan baris ke 7 di atas, merupakan nilai lebar yang perlu anda sesuaikan dengan ukuran lebar blog anda.

( red . untuk bahan perbandingan bagusnya anda melihat juga pada script aslinya ).

KEDUA :

Di atas atau d bawah tag penutup : </head> simpan javascript ini.

<script src='http://jaloee.googlepages.com/Sjquery.txt' type='text/javascript'/>

<script src='http://jaloee.googlepages.com/slider.js' type='text/javascript'/>

KETIGA :

Cari kode html

<div id='content-wrapper'>

dalam beberapa template mungkin berbeda-beda, bisa content, page wrapper dll.

setelah ketemu masukan di bawahnya kode html ini.

<div id='myslides'> 
<script type='text/javascript'> 
stepcarousel.setup({ 
galleryid: &#39;mygallery&#39;, //id of carousel DIV 
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs 
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content 
panelbehavior: {speed:500, wraparound:true, persist:true}, 
defaultbuttons: {enable: true, moveby: 2, leftnav: [&#39;http://i120.photobucket.com/albums/o190/jaloewig/mangga%20magazine/img11.gif&#39;, -14, 30], rightnav: [&#39;http://i120.photobucket.com/albums/o190/jaloewig/mangga%20magazine/img13.gif&#39;, -4, 30]}, 
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels

contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>
<div class='stepcarousel' id='mygallery'>
<div class='belt'>
<div class='panel'>
<a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='Url Image.jpg' width='200'/> </a> 
</div>

</div> 
</div> 
</div>

Anda perhatikan baris antara yg berwarna merah merupakan kode yang perlu anda copy paste berulang-ulang sesuai kebutuhan anda untuk menampilkan beberapa photo.

Silahkan ganti atau isi Url image.jpg ( png.gif ). yang merupakan alamat gambar biasa anda menyimpan-nya semisal Photobucket. dll

Page views this post: reader

58 komentar:

Ardy Pratama said...

alo kan jaloe, met thun bru... slide show yah? coba2 dlu yah kang.. :)

harry seenthing said...

wah komandan lagheee rajin nih ngeblognya....sama yah kang...wuih puncrut dingin buanget dah lama gag ke sana....

wah kang slide shownya mantafff aku mau cuba akh...ciapa tau bisa kang...wuhehehehe

Ren said...

jalu, jalu, kr ga ada shoutmix box lagi aku info di sini aja, ini ada blog photoshop http://www.nikibrown.com/designoblog/ tp kr photoshop aku zadul, ga terlalu berguna deeeh buatku, kamu kan pake cs3 ya, sapa tau ada guna nih baca2 di situ :D

Ren said...

eeh lupa bilang makasih... ini tutorial asyik punya... bener2 deh jitu si jalu BIG THX

suryaden said...

duer...lengkap sekali,
sayang belom punya poto2 nyang gak malu2in,
boleh disimpan dulu ya kang...

Bahauddin Amyasi said...

Wah....apik banget nih...
Boleh saya coba ah...

subagya said...

kayanya keren nigh... di bookmark dolo ah mata dagh ngantuk soalnya wekekkekek

[googleholic] said...

Wah,..Semangat baru nech kang jaloe,..
Semangat kang...!

indungg said...

Sudah meluncur ke demo nya,...
Keren jg kang,...Ijin pake ni ilmu suatu saat,..
Sukses

Syamsul Alam said...

wow! n waduh... Huehueheuheu..... postingannya tetep keren euy! Tapi, bingungnya itu loh...... heuheuheuehue........

Bang Ir said...

wah info ini masuk lemari....nih?
wew..seep kang@

belly wijaya said...

waseli mantaff nie ilmunya kang suhu! dah lama saya kepengen blog ada slide shownya. Tapi pas ketemu soal ngutak atik script ato HTML, mmmh.. nyerah deh ane :)

BambangOke said...

Makin manteb kang.,,,

Kristina Dian Safitry said...

wah..keren sekali kang. berpengaruh ma loading?

chokichim's pena said...

akoe selalu mempelajari ilmu dari mas jaloee.akoe sangat berterimakasih banyak,sampai bisa mengenal blog dengan baik semoga sukses di tahun 2009....

david said...

wah keren nech...patut di coba

Qittun said...

Keren kang templatenya...

Baidewei saya request tutorial design untuk search bar dong kang... :D

sandy said...

manteb tenan nui tutor n infonya kang..

firdaus.a said...

Asik euy.. jquerry deui.. :)

nuhun kang.

harry seenthing said...

kang kalo foto slide shownya mantafff gag yah kalo dimasuk kan di tempat aku, hehehehehe mantaff aja nih hasil karyanya kang...semoga berhasil yah.....mau mampir lagheee ke sebelahnya akh...kali aja ada yang baru

MINHADZUL ABIDIN said...

kang bagus bgt... slide shownya.. tapi gimana kaang ya.. koq slide nya diatas judul header.. bantuin donk.. makasih..

bloggeraddicter said...

saya ndak tahu ini kang...wekekekek

baidewei alamatnya itu doang kang?, ndak ada jalannya suhu? binun saya...langsung gang? biar ndak salah euyyyy...hihihi

besok mo saya kirim kang ;)

siap terima kejar paket aja...huehehehe

Cahaya Biru said...

Heheh.... nice... nice...

erwinyustiawan said...

wah sip kang..tp saya uda terlanjur cinta pake template yg lama..:)

KURNIA SEPTA said...

gimana ya???
saya kok kurang paham!!!
di kasih demonya donk!!

JALOE said...

@ Kurnia Septa

Anda baca artikelnya ngga yach....capeee deh :(

Lyla said...

duh.. pengin ganti templet tp agak males juga hehe...

dede said...

salut kang jaloe, template2 na euy,, hebat lah..

gratisan said...

Keren banget scriptnya ... ane bookmark dulu yah. Btw maaf nih udah setahun lebih tidak berkunjung :D

Roni - Blog 503 said...

wew.. kebetulan banget nih kang, ane emang suka templet2 falconhive

boleh tukar link kang ? linknya dah saya masukkan :)

junjungpurba said...

yang ini bagus, saya mau bikin artikelnya juga:D

ujan said...

kang jaloee, bisa bantu saya ? hehehhe

Zippy said...

Wew, makin gila aja bos tutor'x. . .
Hihihihi. . .
Tapi boleh juga tuh bwt dicoba, ya..walau keliatan'x bakalan puyeng dengan kode2 HTML'x, wkwkwkwk. . .
Hidup bos Jaloe deh. . .
*Lho, kayak kampanye Caleg aja, hahaha. . .

Cebong Ipiet said...

loh perasaan td siang ud komen..kok g ada yak..hikz dasar koneksi lelet
sudah nyuba kang, berhasiiil
hyeueheyue tengkiyu
lah saya ngintip langsung di remedy, ndak mudeng yg mana yg bwt slide nya

subagya said...

rightnav: ['http://i120.photobucket.com/albums/o190/jaloewig/mangga%20magazine/img13.gif', -4, 30]}
kang nilai -4, 30 apa maksudnya yak? bisa di perjelas ga yak.?

JALOE said...

@ Subagya

penejelasannya ada di sini chal http://catalog-tutorial.blogspot.com/2008/08/bingkai-untuk-sebuah-karya-puisi.html

subagya said...

@ kang jaloee > seep langsung meluncur ke TKP

Fuadi Daud said...

wah bisa di coba nih kang jaloee...

mas link mas da di pasang di blog ku, silahkan di cek mas...

gimme backlink

title : Fuadi Daud
http://fuadidaud.blogspot.com

JALOE said...

@ Fuadi Daud

trima kasih mas atas link-nya.. tapi untuk semnetara saya sedang off dulu pertukeran link mas.. maaf moga di maklumi..

Baka Kelana said...

Mantap Bos...mau di coba dulu nich

Thanks ya

Curup Kami said...

ikutan coba -coba ya:hehe

JoVie said...

aku sebenernya udah tahu dan sering berkunjung ke falconhive, dan mencoba template dia yang ini tapi gak tahu cara ngatur slideshow headernya.... , udah lama pengen tahu cara ini tapi karena gak mudeng juga caranya..untung disini dijelaskan secara detail..dimodif lebih bagus juga..thx banget Kang..

oh ya...ada satu lagi nih kang, Template "clean" di btemplates.com tuh keren banget tapi gimana ngatur slideshow image nya...tolong bantu yah akang?? plisss..

Radith Prawira said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.


kunaon iye kang?

JALOE said...

@ Radith Parawira

coba hilangkan saja tanda ieu kang " & " { kode anu di tambahkeun- barusan)

Radith Prawira said...

kode " & " dmnya kang? di source file yg ane unduh nda ktm karakter itu. dan kalo di kode templatenya kan ada banyak. T_T ,,maap ga mudeng : Peace:

JALOE said...

@ Radith Pra

wah lagi pasang javascript enya ?? mun teu bisa di pasang di template langsung bikin saja link external script file js...

Radith Prawira said...

tq kang jaloe.. berhasil juga akhirnya.. klo yg sekarang dipake di template minima, tp aku mau host file jsnya di google pages aku ( biar ga ngerepotin si akang ^^ ) tp pas ke alamat ini : http://jaloee.googlepages.com/Sjquery.txt' type='text/javascript , 404 nda ktm kang T_T

@jovie

template "clean" disettingnya di "Edit html" tp rebek dia, msh banyak erornya >_<

zlam said...

Bro..klo liat demonya..slide show posisinya horisontal. Gimana klo aku mau ubah slide shownya jadi vertikal ? Script mana yg mesti aku ganti..?
Trus untuk kode yg ini : a href='YOUR-POST-LINK' title='YOUR-POST-TITLE, maksudnya gimana ya aku kurang jelas...? Thx ya bro...

Radith Prawira said...

bantu jawab dikid, kalo ngubah dari horisontal jadi vertikal ane nda faham,mgkn javascriptnya?coba cari di dynamicdrive tp kalo yg "your-post-link" itu alamat post yg mau ditampilin kalo org ngeklik gambar yg ada di slideshow itu , kalo "your-post-title" kalo org ngarahin mouse/kursornya ke salah satu gambar yg mejeng di slideshownya ntr keluar tulisan gt

JALOE said...

@ Zlam

kalau menurut sy pingin vertikal bagusnya jangan pake script ini.. soalnya perlu banyak di edit dan rada ribet juga..

Radith Prawira said...

kang, ko saya mau uninstall nda isa yh? keluar tulisan gini "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "body" must be terminated by the matching end-tag "


padahal saya cuma ngedelte kode css, js-nya, dan kode htmlnya.

JALOE said...

@ Radih Prawira

kayaknya delete nya kurang bersih tuh boss

Radith Prawira said...

alhamdulillah udah bisa kang..emang saya yg kurang bersih deltenya tryt,, *maaf baru reply lg :Peace:

--

btw kang, kode css yg buat ngatur tombol navigasinya ( yg ada di paling kiri dan paling kanan ) yg mana yh? ane background bodynya item, jadi tombolnya keliatan kotak putih gt

JALOE said...

@ Radith Prawira

oh itu di javascript-nya, di baris nomor 8

Radith Prawira said...

wah tq kang replynya.. waduh di jsnya yh.. ga ngerti lg.. >_< ttp hatur tengkyu bgt2 buat kang jaloe.. sukses terus kang ^_^

Ahmad Munawir said...

makasih infonya.
http//:www.ahmadmunawir.com

investasi online terbaru dan tercepat said...

bagusan mana mas di photobucket ato tinypic?

DNA Photography said...

thnks buat infonya...

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial