Blog yang bagus adalah blog yang mempunyai menu navigasi yang mudah untuk dilihat pengunjung. Misalnya dipasangkan di atas postingan blog. Biasanya di menu navigasi ditampilkan menu about, sitemap, contact us, dll. Selain memudahkan, juga akan mempercantik blog sobat. Jadi tambah kerenlah pokoknya. Cekibrot yah sob, tutorialnya !!
Cara Membuat Menu Navigasi Horizontal
1. Login ke akun blogger sobat
2. Masuk ke menu Template > Edit HTML
3. Sobat cari kode berikut :
]]></b:skin>
4. Setelah ketemu, sobat copy paste kode berikut di atasnya :
/*-- (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}
5. Kemudian cari kode :
<div id='outer-wrapper'><div id='wrap2'>
6. Setelah ketemu, sobat taruh kode berikut ini 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 + "search"' 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 == '') {this.value = 'Cari artikel disini';}' onfocus='if (this.value == 'Cari artikel disini') {this.value = '';}' 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>
7. Silahkan disimpan dan lihat hasilnya. oh hampir lupa..sobat
bisa menyesuaikan warna backgroundnya sesuai template sobat. Tinggal ganti bagian backgroundnya.
Untuk menambah menu, silahkan sobat buka kembali Tata Letak
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 :)
Diposting Oleh : Boeztanoel ~ Blogging, Trik, Tips, Free Software
Sobat sedang membaca artikel tentang Cara Membuat Menu Navigasi Horizontal di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya.
Get this widget [ Here ]
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
=))
$-)
[-X
\:D/
^:)^
>:/
.png "Backlink"){kind=small}