| Mobile | RSS

Home / Tutorial Blogspot / Blog article: Melebarkan DropDown Menu Blog Archives Blogspot

Melebarkan DropDown Menu Blog Archives Blogspot

May 12th, 2009 | No Comments | Posted in Tutorial Blogspot

Jika anda mempunyai blog dan anda menggunakan blogger atau blogspot miliknya Google, anda pasti tahu apa itu Blog Archive atau sering disebut juga dengan Arsip Blog. Biasanya Blog Archive diletakan di sidebar.

Blog Archive bisa anda temukan pada menu Edit Layout -> Page Elements seperti ini:

blog archives 4 Melebarkan DropDown Menu Blog Archives Blogspot

Jika anda klik Edit, ada 3 style yang bisa anda dipilh untuk Blog Archive seperti ini:

blog archives 3 Melebarkan DropDown Menu Blog Archives Blogspot

salah satunya adalah DropDown Menu saya beri kotak merah. Jika anda memilih style DropDown Menu maka tampilan Blog Archive di sidebar blog anda akan seperti ini:

blog archives Melebarkan DropDown Menu Blog Archives Blogspot

Coba anda perhatikan bahwa ukuran DropDown Menu-nya tidak selebar sidebar yang ada, ini sangat tidak enak dipandang dari segi estetika template. Nah… bagaimana jika DropDown Menu dibuat menjadi selebar ukuran sidebar seperti ini? Kan menjadi lebih bagus kan?

blog archives 2 Melebarkan DropDown Menu Blog Archives Blogspot

Nah… untuk melebarkan DropDown Menu agar ukuran lebarnya disesuaikan dengan lebar sidebar template anda cara sbb:

Langkah pertama:

Buka template blogspot anda, perhatikan kotak merah gambar dibawah ini -> Edit HTML

edit html Melebarkan DropDown Menu Blog Archives Blogspot

setelah itu centang pada kotak kecil Expand Widget Templates seperti gambar dibawah ini:

expand widget Melebarkan DropDown Menu Blog Archives Blogspot

Langkah kedua:

Carilah code seperti dibawah ini (warna biru):

<b:includable id=’menu’ var=’data’>
<select expr:id=’data:widget.instanceId + &quot;_ArchiveMenu&quot;’>
<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>

Sudah ketemu? Anda dapat gunakan CTRL + F untuk mempermudah pencarian code dibawah. Coba CTRL + F, masukkan _ArchiveMenu, gampangkan?

Jika sudah ketemu gantilah code diatas dengan code dibawah ini (warna merah):

<b:includable id=’menu’ var=’data’>
<select expr:id=’data:widget.instanceId + &quot;_ArchiveMenu&quot;’ style=’width:100%’>
<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>

Simpanlah template anda dengan klik SAVE TEMPLATE.

SELESAI

Related Posts with Thumbnails

Random Posts

1809 views, 3 so far today |

Leave a Reply






Increase your PageRank BloggingGratis Top 100 Sites
ping.sg - the community meta blog for singapore bloggers Internet Marketing & SEO (Blogs) - TOP.ORG Google bot last visit powered by Bots Visit Yahoo bot last visit powered by  Bots Visit Msn bot last visit powered by  Bots Visit Subscribe to updates
Preview on Feedage: click-overall-money-maker Powered by  MyPagerank.Net blogarama - the blog directory TopOfBlogs Blog Directory Blogging Tips Blogs - BlogCatalog Blog Directory