|Page copy protected against web site content infringement by Copyscape|[News Today] | International | Intelejen AS intai perjalanan KA Kim Jong II | Berantas Mafia , China bentuk satuan keamanan khusus | 9 Mayat tanpa kepala ditemukan di jalan raya Meksiko | Condeleeza Rice : Amerika tidak percaya Korea Utara | Amerika bela Kebijakan Perang atas dasar Teror | Iran mengeksekusi gantung lima terpidana mati | 60 Tentara Sri Lanka tewas saat rebut wilayah Tamil | Source : | kompas.com | tvone.co.id | Liputan 6 SCTV | yahoo.co.id | Created by : | Adrian - defcon-blacklist[dot]blogspot[dot]com | ||

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Sunday, December 14, 2008

Horizontal Menu Navigasi

Yang sering berkujung ke blog o-om.com pasti sudah tidak asing dengan horizonal menu navigasi. Nah tutor 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. Ya sudah, dari pada saya cuap2 gak jelas langsung ke cara pembuatan aja ya :)


Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini

lalu letakan diatas kode ]]>


/*-- (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 <body> 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. oh hampir lupa..temen-temn blogger
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 :)

Source from o-om.com

Visit this site.
Template by - Adrian | Daya Earth Blogger Template