Masukkan Image Slide Show dalam Header

Salam semua,

Kali ini aku nak kongsikan 1 godek yang diminta oleh l@n@.
Aku telah berjaya mengodeknya tadi dan korang boleh tengok kat blog ini.

Jom godek...

Sebelum itu, korang kena tukarkan sedikit HTML kod dalam template korang.

1) Pergi ke Layout>Edit HTML

2) Cari kod ini

<div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML2' locked='yes' title='' type='HTML'/>
</b:section>
 </div>

3) Kemudian tukarkan jadi seperti di bawah:

<div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
 </div>

4) Save dan Layout blog korang akan jadi seperti di bawah




Kemudian apa yang korang perlu buat ialah pergi ke photobucket.com dan upload gambar-gambar korang. Kepada yg belum register, silalah mendaftarkan diri.. free je.

Apabila korang telah upload gambar korang, klik create slideshow dan masukkan berapa banyak gambar korang.(tapi tak silap aku 3 je boleh..heheheh). Kemudian save dan cari ruangan share dan copy Direct Link
Refer gambar di bawah:-


Sesudah korang mendapatkan kod korang tadi, pergi ke Layout>Add a Gadget(bahagian header tadi) > HTML/JavaScript Add

Masukkan kod dibawah kedalam HTML/JavaScript.

<div style="width:660px; text-align: center;">
<embed width="660" src="http://w987.photobucket.com/pbwidget.swf?pbwurl=http://w987
.photobucket.com/albums/ae360/bedot82/437101de.pbw" wmode="transparent"height="210"
type="application/x-shockwave-flash"></embed></div>

Kemudian korang tukarkan width, height dan link(Direct link dari photobucket tadi) korang refer pada kod berwarna merah.

p/s: width size mesti mengikut header korang, jangan belasah je nanti blog jadi merapu..

Siap....

Sesiapa yang kurang paham, jangan segan-segan tinggalkan komen.