Selasa, 05 Juli 2011

Membuat Menu Navigasi Horizontal

| Selasa, 05 Juli 2011 | 1 komentar

Membuat Menu Navigasi Horizontal

Blog yang bagus itu harus didukung oleh navigasi yang mudah dan tepat. Sekarang kita akan belajar membuat menu navigasi horizontal. Itu tu, menu yang biasanya ada di header blog, ada home,about me dan lain-lain. Dengan menu navigasi yang pas akan membuat pembaca mudah untuk melacak apa yang ada di blog kita.

Cara Membuat Menu Navigasi Horizontal
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Jika sudah ketemu taruh 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}



7. Kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'>
8. Jika sudah ketemu taruh kode berikut 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 + &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>



9. Kita dapat menganti kode warna sesuai dengan template blog kita, dan Simpan Template jika sudah selesai.
10. Untuk menambahkan menu yang ada di navigasi horintal, kita klik Elemen Halaman. Lihat gadget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan.


Untuk menempatkan navigasi di atas apabila tidak ada gadget di header anda, silahkan baca disini

Silahkan Share yah sob! :
Anda sedang membaca artikel tentang Membuat Menu Navigasi Horizontal dan anda bisa menemukan artikel Membuat Menu Navigasi Horizontal ini dengan url http://zidiyuto.blogspot.com/2011/07/membuat-menu-navigasi-horizontal.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Menu Navigasi Horizontal ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Membuat Menu Navigasi Horizontal sumbernya.

1 komentar:

  1. kalo div id='outer-wrapper'><div id='wrap2' gak ada gmana gan....:)]

    BalasHapus

Silahkan berkomentar kepada sobat blogger semua. Diharapkan komentar yang berkaitan dengan isi dari blog ini. Terima Kasih.



TULISKAN KOMENTAR DI BAWAH!!!

Related Posts Plugin for WordPress, Blogger...
 

Sobat Blogger

About Me

Foto Saya
Saya adalah seseorang yang senang berbagi. Oleh karena itu mari kita saling berbagi informasi di dunia maya ini.

My Status

© Copyright 2012. zidiyuto.blogspot.com . All rights reserved | zidiyuto.blogspot.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com