Menu Navigasi Horizontal

Hari yang hepy dan ngak ngebosanin for ngepost hari apa itu sich gue juga juga bingung wkkwkwkkwk,oke langsung saja sob pada kali ini saya akan ngepost bagaimana Cara Membuat Navigasi Horizontal Pada Blog, Navigasi horizontal adalah kumpulan dari beberapa menu yang biasa terdapat pada hedaer blog sobat, kalo udah bisa di tangkap dan dimengerti langsung aja dech tipsnya sob nich gue beriin :
Membuat Menu Navigasi Horizontal 
Cara Membuat Menu Navigasi Horizontal
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:

/*-- (Menu/Nav CobaSanasini Code) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search CobaSanaSini Code) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

7. Kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'>
8. Jika sudah ketemu taruh kode berikut di bawahnya:

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

9. Kita dapat menganti kode warna sesuai dengan template blog kita, dan Simpan Template jika sudah selesai.
10. Untuk menambahkan menu yang ada di navigasi horintal, kita klik Elemen Halaman. Lihat gadget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan.

0 Coment "Menu Navigasi Horizontal", Baca atau Masukkan Komentar

Posting Komentar