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>.
/* navbarKeterangan :
================== */
#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;
}
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'>Dan kopi dan paste kode dibawah ini tepat dibawahnya kode warna merah atau biru tergantung dari template sobat.
<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>
<div id='NavbarMenu'>Kode warna biru adalah alamat yang dituju
<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'>
<form action='/demo/church/index.php' id='searchform' method='get'> <input id='searchbox' name='s' onblur='if (this.value == '') {this.value = 'Search this website...';}' onfocus='if (this.value == 'Search this website...') {this.value = '';}' type='text' value='Search this website...'/> <input id='searchbutton' type='submit' value='GO'/></form>
</div>
</div>
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......
nice posting,,ganti templte yak??
mantap ih tutorialnya, dicoba dulu...
waw ganti tampilan ....
mantaff juga infonya ....
@aan > iya nih sob...
@dimas > silakan dicoba....
@gak mutu > trims udah komen disini...
mantab mas ,perlu dicoba nih...
kerennn.,...
ngikutan mantappp ahh bro
wah menarik neh,,jadi pengen nyobain :)
keren juga tuh....thanks infonya...
langsung praktik yaw heheh tengkyu sekali lagi yaw,, trik nya mangtab
berkunjung dan ditunggu kunjungan baliknya
makasihhh
:D
makasih sob tutorialnya
blogwalking
mantap juga nih tipsnya :)
salam kenal sob.
makasih tutorialnya...
pusing kalau edit HTML, hiks...
bisa dibuat sendiri ya? keren jadinya nih...
makasih sharingnya.
panjang bgt sob scriptnya
Makasih banget sob atas infonya.. bisa langsung copy nih haha..
Wah tutorialnya mantap nih sob.. boobmark ah siapa tahu nanti perlu hehe