Merubah Lebar Menu Arsip

Posted by Unknown on Wednesday, February 11, 2009

Cara Merubah Lebar Menu Arsip : Jika pada postingan sebelumnya telah diposting tentang cara mengubah lebar pada Menu Pulldown maka kali ini Tips Trik Blog akan mengaplikasikannya pada menu arsip. Dengan tips ini, kita dapat mengubah lebar menu arsip yang dapat disesuaikan dengan lebar side bar blog masing-masing sehingga akan terlihat rapi dan tentunya lebih estetis.

Menu arsip adalah salah satu widget default blogger yang mempunyai tiga opsi tampilan, yaitu Hierarki, Daftar Flat, dan Menu Pulldown. Untuk itu, kita diberi kebebasan untuk memilihnya sesuai dengan selera masing-masing. Bagi yang menyukai tampilan menu pulldown mungkin merasa kurang “pas” atau kurang “nyaman” dengan lebar defaultnya di mana kita tidak diberikan opsi untuk merubah lebarnya. Dengan keadaan seperti itu, menu arsip yang tampil pada side bar mungkin akan menjadi terlalu pendek atau terlalu panjang & tidak serasi dengan lebar side bar sehingga tampilannya kurang bagus.

Di bawah ini saya berikan contoh lebar menu arsip sebelum dilakukan perubahan di mana lebarnya tidak serasi dengan lebar menu pulldown yang lainnya.

Dalam screenshot di atas, menu “Arsip Blog” terlihat lebih pendek dibandingkan dengan menu pulldown yang ada di bawahnya sehingga terlihat kurang rapi.

Bagi yang tertarik, silakan ikuti tipsnya berikut ini.

Langkah-langkah merubah lebar menu arsip adalah sebagai berikut.

Pertama, login ke http://blogger.com hingga masuk Dasbor >> Tata Letak (layout) >> Edit HTML

Kedua, centangi “Expand Template Widget

Ketiga, cari kode seperti di bawah ini.

</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

Keempat, tambahkan kode style='width:200px' pada kode yang ini.

<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>

Sehingga menjadi seperti di bawah ini.

<select expr:id='data:widget.instanceId + "_ArchiveMenu"' style='width:200px'>

Secara keseluruhan menjadi seperti di bawah ini. (kode yang berwarna merah adalah kode yang baru saja kita tambahkan)

</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"' style='width:200px'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

Catatan :

Angka 200px menunjukkan lebar menu yang dapat diubah sesuai kebutuhan.

Atau kita dapat menggantinya dengan prosentase tertentu, misalnya kita ingin lebar menu arsip ini selebar side bar yang ada maka ganti kodenya dengan style=’width:100%’. Atau dapat diganti sesuai dengan prosentase yang diinginkan, semakin kecil prosentasenya maka semakin pendek menunya dan sebaliknya.

Kelima, simpan template

Keenam, selesai

Sekarang, pastikan lebar menu arsip yang ada di side bar menjadi sesuai yang kita inginkan. Di bawah ini adalah “Arsip Blog” yang telah saya kustomasi lebarnya sehingga lebarnya menjadi sama dengan menu pulldown yang ada di bawahnya.

Setelah saya lakukan kustomasi (perubahan lebarnya), hasilnya seperti screenshot di bawah ini.

Selamat Mencoba!!

Baca juga yang ini.

  1. Cara Pembuatan Menu Pulldwon
  2. Kustomasi Menu Pulldown
  3. Menentukan Lebar Menu Pulldown
  4. Scrollbar dalam postingan
  5. Membuat Scrollbar pada bodi postingan
  6. Chatting dengan Camfrog
  7. Installasi dan Registrasi Pada Camfrog
  8. Memulai Chatting dengan Camfrog
  9. Pentingnya Silahturahmi Antar Kerabat/Teman

Description: Merubah Lebar Menu Arsip Rating: 4.5 Reviewer: Unknown - ItemReviewed: Merubah Lebar Menu Arsip

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

Post a Comment