Cara Membuat dan Memasang Menu Navigasi pada blog atau website

Cara membuat dan memasang menu navigasi horizontal pada blog atau website - Biasanya letak menu navigasi itu ada di header atau diatas header blog atau website. Nah tujuan membuat menu navigasi itu sendiri adalah  untuk  memudahkan pengunjung blog, agar bisa dengan mudah menjelajahi semua isi blog atau website Anda. Selain itu, menu navigasi juga dapat memberi manfaat bagi Anda semua untuk mempromosikan website Anda ke seluruh jaringan Search Engine yang ada diseluruh dunia. Seperti gambar yang ada dibawah ini.

Cara buat dan pasang atau membuat dan memasang menu navigasi di sebuah header blog atau web site

Ok, biar Anda tidak pusing kita mulai saja. Silahkan perhatikan dan ikuti langkah berikut.

  • Langkah pertama Login ke blog anda, lalu klik tata letak, setelah itu klik edit HTML kemudian copy-paste kode srcipt dibawah ini lalu letakkan di atas kode ]]></b:skin>


/*-- (Menu/Nav) --*/
#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) --*/
#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}



  • Langkah kedua cari kode ini <div id='outer-wrapper'><div id='wrap2'&gt biasanya kode ini terletak dibawah tag  <body>  setelah anda menemukan kode tadi kemudian copy-paste kode script dibawah ini dan letakkan dibawahnya kode yang berwana biru diatas ini.

<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>


  • Kemudian langkah yang terahir klik simpan, dan lihat hasilnya. Dan untuk warna latar tex bisa anda sesuaikan sendiri

Catatan:
Kalau Anda ingin menambah menu, caranya gampang, buka kembali "Elemen Halaman" .
Lalu perhatikan widget paling atas, nah disitu sudah terlihat witget baru dengan title "Top Tabs" dan anda tinggal  klik edit dan tambahkan menu yang ingin anda ditampilkan.
Sampai disini dulu, selamat mencoba dan semoga berhasil

2 komentar:

My Properties mengatakan...

Halloooo Bosss... ini aku yg komentar

Blognya OK punya boss...

2 Juni 2010 11.38
DUIT GRATIS mengatakan...

OK BGAT

12 Agustus 2011 11.07

Poskan Komentar

Terimakasih buat Anda yang sudah mau menyempatkan waktunya untuk berkunjung ke blog ini. I will try to help if there are difficulties Portable