Jun 23, 2008

Scroll Window Atau Scroll Box Dalam Sidebar

Kawan kita Ardamia dan Sweetalia ada bertanya melalui shoutbox blog ini bagaimana cara untuk menyediakan 'scrolling window' atau 'scrolling box' dalam sidebar blog kita. Insyallah kita cuba terangkan bagaimana cara menyediakannya dan mohon maaf kerana lambat memberi response.

Pertama: Menggunakan 'script' sedia ada (contoh disertakan di bawah)untuk dimasukkan terus dalam widget sidebar sekiranya widget sidebar ini asalnya dibina menggunakan pilihan 'HTML/Javascript' dalam gadget yang disedikan oleh blogger.

Kedua: Menggunakan 'script' yang akan di masukkan dalam template kod blog kita. Pilihan ini untuk semua widget dalam sidebar yang TIDAK dibina menggunakan pilihan 'HTML/Javascript' dari kemudahan gadget yang disedikan oleh blogger.

1. Kod 'script' yang digunakan terus dalam widget sidebar. Gunakan 'script' ini untuk membuat scrolling window atau scrolling box bagi semua widget dalam sidebar yang dibuat menggunakan kemudahan 'HTML/JavaScript' dalam gadget blogger. Boleh dimasukkan ke dalam widget telah sedia dibuat atau boleh digunakan untuk widget baru yang belum dibuat.

 

  

  



1.1  'Script':

<div style="border: 1px solid #000000; background-color:#ffffff; width:170px; height:250px; overflow:auto; color:#555555;">
Masukkan di sini script atau text atau senarai yg digunakan dalam widget </div>

1.2   border: 1px solid #000000: garis keliling window, kod warna '#000000' boleh diubah mengikut kesesuaian anda. Jadikan border: 0px; jika tidak mau menggunakan boder. (Sila lihat tajuk 'Kod Hexadecimal Waran' untuk memilih kod warna).

1.2.1  background-color:#ffffff; adalah warna latarbelakang kepada scroll window atau scroll box yang akan dipaparkan. Kod warna '#ffffff' boleh dibuah mengikut kesesuaian warna anda.

1.2.2  width:170px; dan height:250px; adalah lebar dan tinggi window atau box yang akan dipaparkan dalam sidebar. Pinda nilai px ini bersesuaian dengan ruangan sidebar blog anda contoh 150px atau 200px atau lain yang sesuai. Klik 'Preview' dulu selepas nilai dipinda untuk melihat kedudukkan sebenar window atau box dalam sidebar.

1.3  Contoh Scroll box tanpa border, height=100px, width=270px:



2.  Buka kod template blog anda dan masukkan script (contoh di bawah)

 

  

 2.1  Copy dan masukkan 'Script' berikut dalam bahagian CSS (Cascading Style Sheet) kod template blog anda.  Duduknya di mana-mana antara <head> dengan ]]></b:skin> di sebelah bawah berhampiran dengan CSS '#sidebar'.  Warna background, width, height, font size dan border boleh dipinda supay sesuai dengan ruang sidebar blog anda sama seperti keterangan 'script' lagi satu di atas.

2.2  'Script':

#scrolling1 { overflow: auto; height: 350px; width: 100%; background-color:#FFFFFF; border:1px solid #6A5555; margin: 5px auto; padding:8px; font-size: 12px; color: #6a5555; text-align: left; }

2.3  Dua tag yang akan dimasukkan dalam kod widget dalam kod template ialah: <div id ='scrolling1'>  sebagai pembuka scrolling window atau scrolling box. </div>  sebagai penutupnya.

2.3.1   Kod bagi setiap widget yang anda buat dengan kemudahan Add a gadget blogger akan bermula dengan <b:widget> dan diakhiri dengan </b:widget> serta dikenali dengan id="BlogRoll1" atau id="BlogList1" atau id="LinkList1" atau lain-lain yang berkenaan. Kod dan tag ini duduk di bawah bahagian < div class='Sidebar'> blog anda  

2.3.2  Pastikan widget yang mana satu dalam sidebar anda scrolling window atau scrolling box akan dibuat. Kemudian cari kode untuk widget ini dalam kod template blog anda.

2.3.3  Dalam kod untuk widget berkenaan taip dan masukkan tag <div id='scrolling1'> sebelum tag <div class='widget-content' ... > .  Kemudian telusur ke bawah daripada sini taip dan masukkan kod </div> sebelum tag  </b:includable>.

2.3.4  Contoh kod dan tag untuk satu widget. Tag warna biru yang perlu ditaip masuk seperti berikut:

<b:widget id='Gadget1' locked='false' title='Main Game Dulu' type='Gadget'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:renderingUrl != ""'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div id='scrolling1'>
<div class='widget-content' style='border: 1px solid #999; padding: 2px'>
<b:if cond='data:trackingUrl != ""'>
<img expr:src='data:trackingUrl' height='1' width='1'/>
</b:if>
<iframe expr:height='data:height' expr:id='data:moduleId' expr:name='data:moduleId' expr:src='data:renderingUrl' frameborder='0' style='width: 100%; display: block'>
</iframe>
</div>
<b:else/>
<data:errorMessage/>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

(Lihat contoh widget "Blog Sahabat" dalam sidebar blog ini)

Setelah siap ditaip masuk jangan lupa pinda nilai dalam script (para 1.2) supaya sesuai dan cukup muat ruang sidebar blog anda. Klik "Preview" dulu untuk melihat kedudukkan kesesuaian. Jangan lupa klik SAVE TEMPLATE jika telah selesai.


Jangan lupa untuk meninggalkan catatan komen anda di bawah dan sebarang pautan yang dibuat ke blog ini sangat dihargai.

8 comments:

Azmi Ramli said... [Balas komen ini]

nice blog.

Mrmnj said... [Balas komen ini]

Blog yg banyak informasi... suka view blog ni.

Calipso said... [Balas komen ini]

terima kasih Azmi n Mrmnj,

jangan lupa mampir lagi...

lover said... [Balas komen ini]

masih bingung...

Calipso said... [Balas komen ini]

lover tang mana bingung tu,

bagi tau mana yang tak jelas nanti boleh diperjelaskan sewajarnya... jangan segan...

ibnunurdin at yahoo dot com

Abang Isaifuddin Abang Noran said... [Balas komen ini]

kalau bubuh bawah post boleh x?

Admin said... [Balas komen ini]

boleh juga letak bawah pos.

Ashaary Hassan said... [Balas komen ini]

Thanks bro..

Post a Comment