Kemaskan Sidebar: Bina Drop Down Menu Untuk Label.

Ruang kedai yang kemas adalah antara faktor penarik pelanggan. Samada kedai fizikal ataupun kedai maya (online). Susunan yang berserabut akan menyukarkan pelanggan mencari produk. Antara jenis kedai online ialah blog. Selain produk, blog anda juga perlu berada dalam keadaan tersusun untuk memudahkan pelanggan mencari apa yang diingini apabila 'masuk' ke 'kedai' anda.

Side bar adalah seperti salah satu ruang dalam kedai. Antara widget yang perlu ada di side bar ialah Label. Label ini berfungsi seperti papan tanda di dalam pasaraya, sebagai penanda pembahagian jenis-jenis produk. Jika papan tanda mengambil ruang yang berlebihan, produk anda mungkin akan tersorok ataupun tidak dapat ditemui pelanggan.

sumber : Progressive Grocer

Dalam entry Tips Rekaan Layout Blog, saya ada sentuh sedikit tentang side bar. Selalunya senarai label akan bertambah mengikut pertambahan isi blog. Dan apa bila senarai ini semakin panjang, ia akan mengambil ruang yang agak besar di side bar blog kita. Jadi, macam mana kita boleh jimatkan ruangan side bar tanpa membuang widget ini? Antara caranya ialah kita tukarkan format widget berkenaan, kepada jenis 'Drop Down' seperti di bawah.

Tutorial ini akan tunjukkan cara-caranya. Kali ini, kita akan gunakan HTML.

1. Mula-mula, log masuk ke akaun blogspot anda.

2. Kita akan tambah dulu widget label. Jika anda sudah mempunyai widget ini, anda boleh skip bahagian ini dan terus ke langkah 3.

Klik pada 'Layout' > 'Add a Gadget'.

Menu 'Add a Gadget' akan keluar dan scroll hingga anda jumpa widget 'Labels'. Klik pada butang '+'.

Seterusnya, anda boleh tetapkan setting Labels atau gunakan saja default setting. Klik 'Save'.

3. Sekarang kita akan edit kod HTML untuk ubah format menu label. Klik 'Template' > 'Edit HTML'.

4. Window HTML akan dipaparkan. Bawa kursor anda ke ruang yang di highlight seperti di bawah dan klik mouse di mana-mana dalam ruangan tersebut. Tekan 'Ctrl+F' dan satu butang search akan keluar di bahagian atas kanan ruangan HTML. Type 'Label1'. Hasil carian akan di highlight dengan warna kuning.

5. Sekarang, select (highlight) pada keseluruhan baris seperti di bawah. Pastikan selection anda bermula dengan <b:widget dan berakhir dengan </b:widget>.

6. Seterusnya copy kod di bawah dan paste pada selection anda di ruangan HTML yang berkenaan.

<b:widget id='Label1' locked='false' title='Label' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'><option>Pilih Label</option><b:loop values='data:labels' var='label'><option expr:value='data:label.url'><data:label.name/>(<data:label.count/>)</option></b:loop> </select> <b:include name='quickedit'/> </div> </b:includable></b:widget>

Hasil anda perlu kelihatan seperti di atas. Klik 'Save' > 'View Blog'. Menu anda sudah bertukar format dan side bar anda akan kelihatan lebih tersusun. Untuk mengubah kedudukan widget ini, pergi ke 'Layout' dan drag saja petak 'Label' anda ke kedudukan yang anda mahu. Selamat mencuba!