navigasi horisontal2 0

Nah 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 <b>menu navigasi secara horizontal</b>.




Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>

<span style="color: rgb(51, 51, 255);">/*-- (Menu/Nav) --*/</span>
<span style="color: rgb(51, 51, 255);">#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}</span>
<span style="color: rgb(51, 51, 255);">#nav-left{float:left; display:inline; width:600px}</span>
<span style="color: rgb(51, 51, 255);">#nav-right{float:right; display:inline; width:100px}</span>
<span style="color: rgb(51, 51, 255);">#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}</span>
<span style="color: rgb(51, 51, 255);">#nav ul li{float:left; list-style:none}</span>
<span style="color: rgb(51, 51, 255);">#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}</span>
<span style="color: rgb(51, 51, 255);">#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}</span>
<span style="color: rgb(51, 51, 255);">#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}</span>

<span style="color: rgb(51, 51, 255);">/*-- (Search) --*/</span>
<span style="color: rgb(51, 51, 255);">#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;</span>
<span style="color: rgb(51, 51, 255);">-moz-border-radius-bottomright:10px;</span>
<span style="color: rgb(51, 51, 255);">-moz-border-radius-topleft:10px;</span>
<span style="color: rgb(51, 51, 255);">-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}</span>
<span style="color: rgb(51, 51, 255);">* html #search{margin-right:8px}</span>
<span style="color: rgb(51, 51, 255);">#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}</span>


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


Silahkan disimpan dan lihat hasilnya

sumber : o-om

Baca Juga Artikel Terkait