Kamis, 04 Desember 2008

Membuat Horizontal Menu Navigasi

Yang sering berkujung ke Buabuazone pasti sudah tidak asing dengan horizonal menu navigasi. Nah tutorial kali ini kita mencoba membuat menu navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger. Dengan sedikit sentuhan pada CSS, widget Linklist yang semula banyak digunakan sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi secara horizontal. Seperti ini cara pembuatannya :



Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas 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}


Masih pada halaman Edit HTML kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna Biru 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>


Silahkan disimpan dan lihat hasilnya. oh hampir lupa..rekan bisa menyesuaikan warna latar dan textnya sendiri ya :)


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.

Selamat Mencoba^_^

Tidak ada komentar:

Selamat Datang Di Buabuazone Nusantara | Agama Islam Terbaru : Ekonomi Syariah, Segera : Tentang Agama Islam Lainnya | Bisnis Dan Internet Terbaru : Bisnis Minyak Nilam, Segera : Tutorial Bisnis Online Lainnya | Budaya Terbaru : Budaya Jawa, Segera : Budaya Papua | Ekonomi Dan Politik Terbaru : Penjelasan Tentang Inflasi, Deflasi, Dan Bank, Segera : Perkembangan Perekonomian Indonesia | Militer Terbaru : Tentara Nasional Indonesia, Segera : Armada Perang Tentara Nasional Indonesia | Musik Terbaru : Lagu-Lagu Anti Komersil Dan Lagu-Lagu Rock Festival Indonesia, Segera : Penyanyi-Penyanyi Legenda Indonesia | Olahraga Terbaru : Liputan Seputar Piala Dunia 2010, Segera : Berita Terbaru Dan Hasil Pertandingan Terbaru Piala Dunia 2010 | Pendidikan Dan Pengetahuan Terbaru : Tarsius, Primata Terkecil Di Dunia, Segera : Informasi Tentang Ilmu Pengetahuan Lainnya | Sastra Terbaru : Kisah Si Malin Kundang, Segera : Cerita-Cerita Rakyat Lainnya | Wisata Terbaru : 10 Monumen Yang Paling Menakjubkan Di Dunia , Segera : Kota-Kota Tujuan Wisata Indonesia | Selamat Membaca Dan Tataplah Dunia Bersama Buabuazone Nusantara...^_^
 
© Copyright by Buabuazone Nusantara  |  Template by http://blogtemplate4u.com/