Cara Memasang Menu Horizontal

di Senin, Agustus 16, 2010

Apa kabar teman-teman. Selamat menunaikan ibadah pusa bagi yang menjalankannya. Hmm,, kali ini ane ingin posting tentang Menu Horizontal. Artikel ini di tulis berdasarkan salah satu request sobat blog ane yang ingin membuat menu horizontal, sebagai sobat yang baik,,hehe,, apa lagi di bulan ramadhan ini, alangkah baik nya jika ane membantu,,hihi.

Tutorial ini ane dapatkan dari blog sejuta umat o-om.com , he. Soalnya ane pun masang menunya dari tutorial beliau. Baik, mari langsung ke TKP..^^.

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog teman-teman.


Caranya :

1. Pertama masuk halaman Edit HTML
2. Kopi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>

3. /*-- (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}
   

Kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.

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

Simpan Template teman-teman. Dan Lihat hasilnya.

Catatan : Untuk menambah menu, silahkan buka kembali "Elemen Halaman" kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan. Semoga BErhasil,..!!!

Sekian dari ane. Semoga bermanfaat. :) .

Sumber o-om.com

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Elvindinata BLog di inbox anda :

Delivered by FeedBurner

Baca Juga Yang Lainnya