Cara Membuat Navigasi Horizontal Pada Blog

Tutorial yang sekarang aku kasih adalah tutorial membuat navigasi horizontal pada blog.


Dari dulu aku berkelana mencari tutorial untuk membuat navigasi horizontal ini.Tapi gak nemu-nemu.Kemudian baru tau kalau blogger.com udah di perbarui dan bisa membuat static page.Tapi hasilnya kurang bagus dibandingkan static page yang ini.Ini loh namanya navigasi horizontal :



Berawal dari mengganti template menjadi seperti sekarang ini aku pun mencoba-coba untuk mengupas kode untuk membuatnya.Dan voila!!Ketemu juga akhirnya....
Bagi yang tertarik ayo silakan ikuti langkah-langkahnya.

1. Login ke blogger --> Tata Letak --> Edit HTML
2. Jangan lupa centang dulu kotak "Expand Widget Template" nya
3. Kopi kode dibawah dan paste diatas kode ]]></b:skin>.

/* navbar
================== */

#NavbarMenu {
background: #555 ;
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://www.revolutiontwo.com/demo/church/wp-content/themes/church_10/images/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
Keterangan :

Kode yang berwarna merah dapat diganti dengan kode warna sesukamu.Untuk kode warna lengkap bisa cari disini
Kode yang berwarna biru penting karena disesuikan dengan lebar template blog sobat.

4. Kemudian cari kode dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

dan seterusnya.........

</b:section>
</div>
Dan kopi dan paste kode dibawah ini tepat dibawahnya kode warna merah atau biru tergantung dari template sobat.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>page</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Daftar isi</a></li>
</ul>
</div>

<div id='NavbarMenuright'>
&lt;form action=&#39;/demo/church/index.php&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt; &lt;input id=&#39;searchbox&#39; name=&#39;s&#39; onblur=&#39;if (this.value == &#39;&#39;) {this.value = &#39;Search this website...&#39;;}&#39; onfocus=&#39;if (this.value == &#39;Search this website...&#39;) {this.value = &#39;&#39;;}&#39; type=&#39;text&#39; value=&#39;Search this website...&#39;/&gt; &lt;input id=&#39;searchbutton&#39; type=&#39;submit&#39; value=&#39;GO&#39;/&gt;&lt;/form&gt;
</div>
</div>
Kode warna biru adalah alamat yang dituju  
Kode warna merah adalah judul dari menu yang ditampilkan.

5. Di preview dulu kalau belum yakin.
6. Kalau sudah tinggal di save aja deh.

Kode tadi bisa di modif-modif untuk yang ngerti dan sudah lumayan lama berkutat dengan kode HTML.

Sekian deh......
u comment i follow
Bookmark and Share
Dapatkan Artikel terbaru dari blog ini, langsung ke e-mail anda dengan berlangganan disini.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Sudah Baca Yang Ini ?



Comments :

16 comments to “Cara Membuat Navigasi Horizontal Pada Blog”

aan mengatakan...
on 

nice posting,,ganti templte yak??

Dimas mengatakan...
on 

mantap ih tutorialnya, dicoba dulu...

gak mutu mengatakan...
on 

waw ganti tampilan ....
mantaff juga infonya ....

Rahad 2 Six mengatakan...
on 

@aan > iya nih sob...
@dimas > silakan dicoba....
@gak mutu > trims udah komen disini...

mas acrom mengatakan...
on 

mantab mas ,perlu dicoba nih...

van mengatakan...
on 

kerennn.,...
ngikutan mantappp ahh bro

h4ns mengatakan...
on 

wah menarik neh,,jadi pengen nyobain :)

baburinix! mengatakan...
on 

keren juga tuh....thanks infonya...

darahbiroe mengatakan...
on 

langsung praktik yaw heheh tengkyu sekali lagi yaw,, trik nya mangtab

berkunjung dan ditunggu kunjungan baliknya
makasihhh
:D

antokcupu mengatakan...
on 

makasih sob tutorialnya

blogwalking

Darin mengatakan...
on 

mantap juga nih tipsnya :)
salam kenal sob.

sda mengatakan...
on 

makasih tutorialnya...
pusing kalau edit HTML, hiks...

narti mengatakan...
on 

bisa dibuat sendiri ya? keren jadinya nih...
makasih sharingnya.

Rizky2009 mengatakan...
on 

panjang bgt sob scriptnya

Link Tea mengatakan...
on 

Makasih banget sob atas infonya.. bisa langsung copy nih haha..

Saung Web mengatakan...
on 

Wah tutorialnya mantap nih sob.. boobmark ah siapa tahu nanti perlu hehe

Posting Komentar

Blog ini DoFollow.
Jadi silahkan berkomentar disini.

Yang penting komentar bukan Spam,Porno,maupuun berunsur SARA.Jika ada yang seperti itu akan langsung dihapus.


Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Friends

 

Copyright © 2009 by Rahad 2 Six