Cara pasang Jquery Slideshow Header

Satu lagi efek JQuery yang di rasakan sangat mudah untuk di cuba. Slideshow header yang boleh anda lihat di sini(sila klik), sememangnya sangat menarik dan mudah untuk di pasang di blogspot. Anda tidak perlu menggunakan sebarang software atau teknik flash yang sukar dan sedikit membebankan dari segi loading. Ini kerana script jquery adalah ringan dan efek yang terpapar adalah 'smooth'. Ia berbeza dengan teknik javascript dan HTML biasa yang di lihat efek pergerakannya adalah kaku, tidak menarik dan ada kalanya tersekat-sekat.

Untuk mencuba JQuery slideshow header seperti yang boleh anda lihat di sini, adalah di nasihatkan supaya anda mencubanya di sebuah blog yang lain yang menggunakan template yang ringkas dan background Header yang kosong. Di cadangkan supaya anda menggunakan Template Minima.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML

Langkah 2

Pada script template, cari kod </head>

Langkah 3

Salin dan paste kod biru di bawah di atas kod </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://sites.google.com/site/javascript10/jquery.innerfade.js' type='text/javascript'/>

Langkah 4

Kembali ke paparan Layout dan seterusnya klik Add A Gadget => HTML/Javascript.

Salin dan edit kod merah di bawah dengan menggantikan image URL yang di bold dengan image URL anda sendiri.

<script>
$(document).ready(function() {
$('#image_rotate').innerfade({
speed: 1800,
timeout: 3300,
fx: 'fade',
containerheight: '365px'
});
});
</script>

<ul id="image_rotate" style="list-style: none;">
<li><img src="masukkan URL image di sini" /></li>
<li><img src="masukkan URL image di sini" /></li>
<li><img src="masukkan URL image di sini" /></li>
</ul>

Seterusnya, paste pada ruang Content HTML/Javascript dan Save.

Langkah 6

Delete Header yang asal (lama) dan drag Header yang baru ke bahagian atas dengan menggantikan tempat Header yang asal (lama). Cara pasang Jquery Slideshow Header

{ 33 comments.. read them below or add one }

Mentrox Mentrox 2:32 PM
berat x kalau pakai header ney??
Liyanaa. Liyanaa. 2:37 PM
haah berat tak?
Nescafe ais Nescafe ais 2:42 PM
Rasanya tak berapa berat sangat kalau saiz image kecik.
Nescafe ais Nescafe ais 2:45 PM
Apa-apa hal, cuba Test dulu. Aku takut ada part yang aku tertinggal.hehe
nEo.. nEo.. 2:55 PM
Aku nak cuba sekarang.

p/s-kalau on ym,buzz aku kejap bro,aku invi.
nEo.. nEo.. 3:38 PM
@nEo..

x jadi bro,ade yg x kena ni,gambar je keluar,xde slide.
nescafe aisnescafe ais 4:10 PM
@nEo... Jap.aku test semula.aku rasa silap kod js
Fina Fento Fina Fento 4:23 PM
saya takleh delete header sbb kod header ada kat dalam bhgn edit html tu :-s
Nescafe ais Nescafe ais 4:31 PM
@nEo..

Ok bro. Dah ok. Tadi silap paste kod js.
nEo.. nEo.. 8:18 PM
@Nescafe ais Ok bro,dah jadi,tapi macam mana kalau nak centerkan slide tu bro,pasal kedudukannya bila siap kat sebelah kiri.

p/s-aku dah padam dah,saja test pakai sekejap tadi.
Wan Perlis Wan Perlis 1:30 AM
amat menarik
template aku guna ni tak membenarkan letak gambar
Fina Fento Fina Fento 10:07 AM
tak jadi..takleh drag header baru ke header yg asal
Nescafe aisNescafe ais 11:12 AM
@Fina Fento
Header lama tak boleh delete erk?
Fina Fento Fina Fento 2:31 PM
tak boleh pun..header tu pun yg dah sedia ada kat dlm blog. cuma gambar sy tu sy edit tambah..
Nescafe aisNescafe ais 2:41 PM
@Fina Fento

Boleh delete. Tapi kena delete dari css template. ID pada HTML pun kena delete juga. Tapi leceh sikit.
bellar0ssa bellar0ssa 11:35 PM
bro.sangat2 need ur help skrg ni.. ada masalah kat blog.tapi tak tahu nak buat camne.. entah nape org kate tak boleh nak bace entri.. saye pon tak tahu nk buat cmne..
Nescafe aisNescafe ais 11:44 PM
@bellar0ssa

Dah reply kat shoutbox & email
bellar0ssa bellar0ssa 12:00 AM
hm yg kat emel xdpt.hm sy pernah bagi script kt bro kan.dpt x dulu tu.saya tak tahu yg mane nk didelete.. minta tlg bolh x bro?
Nescafe aisNescafe ais 12:10 AM
@bellar0ssa

Dah reply emailnya. Tapi ada keluar Boxbe. Apa benda tu.

Cuba buang script page view yang dari amitjain.co.cc tu. Kalau nak senang, bak sini username dgn password. Send kat email
ClotBundle ClotBundle 5:51 AM
Kasi banyak lagi ilmu jquery, facebook connect, google connect.... TQ
Nescafe ais Nescafe ais 4:25 PM
@nEo..

Cuba masukkan kod css ni atas ]]></b:skin>

#image_rotate {
padding: 0px 180px;
}

Edit 180px tu
Iza Iza 10:33 PM
blog aku dah berat la....
Nescafe ais Nescafe ais 10:39 PM
@Iza

Kalau dah berat, rasanya tak payah cuba lah
petite_girlz07 petite_girlz07 9:34 PM
xleh wt r..hhuhhuhu.waaaaaaaaaaaaaaaaaa

xdpt cri yg LANGKAH 2 ...
yg mntk kod head 2........
hhuhuhuh..tolong sy......
heygirl heygirl 4:17 PM
salam

klu nak buat slideshow kat side bar camne?
FIFIEY LYCHEE MARATION FIFIEY LYCHEE MARATION 1:37 AM
kenapa asyik tak bole je ni??help me please!!
Eddy Eddy 12:34 AM
dah buat.. tapi kuar gambar jer.. takder slideshow.. mcm mana
eyna eyna 2:37 PM
kuar gambar jek besau lak tu...tp x jadik slide pon...nape ek....huhuu
Nur Fazliana Nur Fazliana 10:12 PM
very useful! blog sy dah jadik!hehe
AnonymousAnonymous 8:08 PM
bro,dr smalam test,kuar gambar ajer..slideshow nyer tak jadi...nape ek?rasa dah follow betul2 dah..

-sue-
ivan kavalera ivan kavalera 6:02 PM
Thanks infonya. Nice post.
utak atik utak atik 6:03 PM
Wah..hasilnya keren!
♥NesBoolat♥ ♥NesBoolat♥ 5:48 PM
x boleh pn..knpe gmbr kluar stgh je??