Cara merubah tampilan menu template thesis

Cara merubah tampilan menu template thesis ~ Mempercantik blog memanglah hal yang sering dilakukan atau diterapkan oleh seorang blogger, baik itu blogger baru / newbie seperti saya maupun blogger yang sudah master, Nah, kali ini saya ingin membahas tentang menu pada template Daftar ISI yang saya gunakan ini yaitu Template Thesis.

Pada dasarnya menu yang pada template bawaan Thesis menurut saya terlihat sangat sederhana, tapi tentunya akan telihat lebih cantik lagi bila menu itu dirubah, biar template thesis ini terlihat lebih bagus dan cantik.
Disini saya sengaja mengganti menu template thesis ini dengan menu yang digunakan template Bamz Style 5 dan untuk menerapkan menu itu tidak terlalu sulit, yakni hanya perlu menambahkan / mengganti kode html Daftar ISI saja.

Perhatian : Cara ini hanya berlaku pada template thesis

1. Tekan tombol F3 untuk mencari kode ]]></b:skin>
2. Setelah itu Copy Paste kode di bawah ini tepat di atas kode ]]></b:skin>

/* ------ navbar ------------- */
#NavbarMenuAtas{height:32px;background: #333;}
#NavbarMenuleftAtas{width:750px;float:left;margin:0;padding:0}
#NavbarMenurightAtas {width:210px;font-size:11px;float:right;margin:0;padding:4px 0 0}
/* (Menu/Nav) */
#navatas{z-index:1;padding:2px 0 5; margin-bottom:0px; clear:both; margin:0 auto;height:32px;}
#navatas,#navatas ul{list-style-type:none;list-style-position:outside;position:relative;text-align:left;font-size:12px;padding:0px 1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#navatas a{height:24px;display:block;color:#eee;text-decoration:none;background:none;padding:7px 6px 1px 6px;}
#navatas a:hover{color:#fff;background:#222;}
#navatas li{float:left;position:relative;padding:0px 0px}
#navatas ul{position:absolute;display:none;top:100%;width:164px;left:0;background:#333;border-top:1px solid #444; border-bottom:1px solid #222;}
#navatas li ul a{border-top:1px solid #444; border-bottom:1px solid #222;width:150px;float:left;}
#navatas ul ul{top:auto;background:none}#navatas li ul ul{left:11.76em;background:#333;margin:0px 0px 0px}
#navatas li:hover ul ul,#navatas li:hover ul ul ul,#navatas li:hover ul ul ul ul{display:none}
#navatas li:hover ul,#navatas li li:hover ul,#navatas li li li:hover ul,#navatas li li li li:hover ul{display:block}
/* ------ navbar ------------- */

3. Kemudian cari kode <div id='header-wrapper'> lengkapnya seperti di bawah :

<div id='header-wrapper'>
<div id='menu'>
<ul class='menunav superfish'>
  ...
</div>

4. Ganti teks berwarna hijau dengan kode html di bawah ini :

<div id='NavbarMenuAtas'>
<div id='NavbarMenuleftAtas'>
<ul id='navatas'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul></div></div>

5. Sekarang sobat tinggal edit saja tag # dengan link yang ingin di tuju. sampai disini pasti sobat paham semua.

6. Jangan lupa Simpan Template

Sobat juga bisa meletakkan kode no.4 di atas kode <div id='header-wrapper'>, jadi nantinya sobat akan punya 2 menu di atas header.
Kalau gitu selamat mencoba and happy blogging. 

Tulisan Lainnya :
Tukar Link | V-datoe
Tentang | V-datoe
Cara menghilangkan widget attribution blogspot | V-datoe
Cara merubah tampilan menu template thesis | V-datoe