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:
7. Kemudian cari kode <div id='outer-wrapper'><div id='wrap2'>
8. Jika sudah ketemu taruh kode berikut di bawahnya:
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.
*) dikutip dengan perubahan dari Horizontal Menu Navigasi
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}
#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 + "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>
<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>
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.
*) dikutip dengan perubahan dari Horizontal Menu Navigasi
Hanya bisa menyimak saja, Mas. Soalnya urusan kutak-katik template gini mesti hati-hati saya karena itu bukan bidang keahlian saya. :)
BalasHapustq info nya di coba dulu
BalasHapushttp://www.jasaadsense-termurah.blogspot.com
cukup menarik tapi sayang saya masih bingung untuk mengotakngatik nya
BalasHapusyoyoiiiiiiiiiiiii
BalasHapusTerimakasih komentarnya, ini hal mudah untuk membuat navigasi blog kita lebih baik.
BalasHapusbagus juga untuk mempermudah navigasi blog kita dan juga memperbagus tampilan
BalasHapussalam kenal,
RegiAdi
keren gan..boleh copas gak artikelnya?
BalasHapusKalo menggunakan CSS gimana gan ?
BalasHapuskeren, tapi sayang cuman buat blogger.com ya kang?
BalasHapusKang Kurnia Septa, sya request donk cra biar cpat akun sya di approve sma Goggle AdSense.. Thx..
BalasHapusMASIH BINGUNG BRO...
BalasHapus@Kurnia Septa:
BalasHapusass....
bagus banget artikelnya.. tapi kang, saya ga dapet tuh cari kode yang ke2 nya <div id= 'outer wraper.....
udah berkali2 di cari tapi ga nemu
gimana tuh kang??
mas, saya udah bikin menuhorizantalnya,tapi kenapa ada beberapa yang kebawah jadinya, padahal masih ada tempat kosong disamping kanannya,,.gimana caranya supaya bisa di geser dan di sejajarkan semua,mksih.
BalasHapus"Kami tidak dapat menyimpan template Anda.
BalasHapusHarap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Lebih dari satu widget ditemukan dengan id: HTML3. ID Widget seharusnya unik." <--- Mas klo ini knpa y?
ass, gan, ane mau bagi” seputar informasi seputar astronomi nie kunjungin za di blog ane di bawah ini and sekalian nie minta pendapat seputar blog ane : )
BalasHapushttp://nanosciencerooms.blogspot.com/
terimakasih nie sebelumnye hehe
wss
wah kalo yang ini ane g brani mas,,skrip codenya panjang bgt,,heheeee tapi lumayan buat tabungan il mu ane,,nakasih mas :D
BalasHapusterimakasih atas pencerahannya mas...:)
BalasHapusgan ko ane g nemu <div id='outer-wrapper dst. . . ya d edit html???
BalasHapusmklum bru 2 hri blajar ngblog
ga bisa nemu yg kedua..hikz
BalasHapusgk isa kk di punya ku udah gk isa lagi soalnya dah lebih dari 3 yng sama HTML3
BalasHapussaya gk isa2 mas beri solusinya dong mas soalnya kalimat yng di suruh cari tuh gk ad sma sekali nah itu gimana mas solusinya ?
BalasHapussalam kenal mas :D
BalasHapusSaya sudah mencoba buat tombol navigasi tapi selalu gagal.
BalasHapusSaya sudah mencoba buat tombol navigasi tapi selalu gagal.
BalasHapusgan ko ane g nemu <div id='outer-wrapper dst. . . ya d edit html???Please bijimana gan solusina ya....maturnuwun
BalasHapuswah mantap kang menunya!
BalasHapussaya tidk menemukan div id nya gan, udah di cari berkali - kali pun ga ketemu.. kasih solusinya dong...
BalasHapusgrazie ya bang
BalasHapussedang dicoba nih hehe
kok kode keduanya gak bisa bang ?
BalasHapusmampir ke blog ane http://briliantdiamond.blogspot.com/
MASIH BINGUNG MASS...
BalasHapusnggak nemuin pilin EDIT HTML nya....
@resep masakan: ya mengapa tdk ada?? div id
BalasHapusMakasih infonya Gan!!
BalasHapusThis is very interesting, You're an excessively professional blogger. I have joined your rss feed and look ahead to in the hunt for more of your magnificent post. Also, I've shared your site in
BalasHapusmy social networks
Here is my blog ; Kohls-Printable-Coupons.Net
aq dah coba untuk yang pencarian pertama ketemu, tapi untuk yang pencarian di bawahnya
BalasHapusngga ketemu, jadinya ngga jadi nyoba. tp penasaran, gmn ya?
aku baru minggu ini mengenal dunia blogger alhdllah udh punya blog,mngganti tmplate,tpi yg blum aku pahami cara memisahkan artikel kita sesuai kategorinya misal
BalasHapusHOME,PENDIDIKAN,UMUM,CERITA,CURHAT,IKLAN
Cara untuk memisahkan diatasnya yg blum saya pahami mnta bantuannya.bisa langsung ke suherdiantihuruhara@gmail.com
terimksih ditunggu ovininya
saya belum paham tentang nama nma yg ada diblog dan fungsinya maklum aku masih pemula,yg blum aku pahami itu cara tata letak dan horizontal dalam memisahkan dan mengelompokan setiap artikel yg berbeda di bagian paling atas
BalasHapusminta ovininya mksih