Tentunya teman- teman sudah tahu apa itu menu horizontal. Menu navigasi ini biasanya tempatnya di bagian atas dan biasanya di isi link- link yang ditujukan ke halaman- halaman tertentu. Kalau menu navigasi horisontal di blog saya berisikan HOME, TENTANG SAYA, FREE SOFTWARE, dst......OK...kalau tidak faham / mudeng dengan kata- kata saya tadi langsung saja saya beritahu sedikit gambarannya di bawah ini atau langsung saja lihat di Blos saya biar lebih jelas.
Tetapi kali ini akan saya share cara- cara yang sudah saya praktekan di Blog saya ini yang selanjutnya teman- teman bisaa memodifikasinya sendiri menyesuaikan dengan warna / corak / ukuran template blog teman- teman agar lebih serasi. OK..mari kita mulai
Membuat Menu Navigasi Horizontal di Blogspot
- Login ke akun Blogger teman-teman
- Pada Dashboard Pilih Tata Letak - Edit HTML
- Jangan lupa back up dulu template teman- teman dengan mengeklik Download Template Lengkap jika nantinya terjadi kesalahan yang sudah terlanjur kita lakukan dan sudah kita simpan
- Cari kode ]]></b:skin>
- OK...sudah ketemu? kalau sudah letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi
/* navbar
================== */
#bg_nav{
background:#ffffff;
width:900px;
height:29px;
font-size:11px;
font-family:Arial,Tahoma,Verdana;
color:#000000;
font-weight:bold;
margin:0px auto 0px;
padding:0px;
border-top:1px dotted #ececec;
border-bottom:1px dotted #ececec;
overflow:auto}
#bg_nav a, #bg_nav a:visited{
color:#000000;
font-size:11px;
text-decoration:none;
text-transform:uppercase;
padding:0px 0px 0px 3px}
#bg_nav a:hover{
color:#000000;
text-decoration:underline;
padding:0px 0px 0px 3px}
#navleft{
width:650px;
float:left;
margin:0px;
padding:0px}
#navright{
width:220px;
font-size:11px;
float:right;
margin:0px;
padding:0px 0px 0px 0px}
#navright a img{
border:none;
margin:0px;
padding:3px 5px 0px 0px}
#nav{
margin:0px;
padding:0px;
list-style:none}
#nav ul{
margin:0px;
padding:0px;
list-style:none}
#nav a, #nav a:visited{
background:#ffffff url('http://i47.tinypic.com/16ibkvc.jpg')repeat-x top left;
color:#000000;
display:block;
font-weight:bold;
margin:0px;
padding:8px 15px 8px 15px;
border-left:1px solid #ffffff}
#nav a:hover{
background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
color:#000000;
margin:0px;
padding:8px 15px 8px 15px;
text-decoration:none}
#nav li{
float:left;
margin:0px;
padding:0px}
#nav li li{
float:left;
margin:0px;
padding:0px;
width:130px}
#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
width:120px;
float:none;
margin:0px;
font-size:80%;
padding:5px 5px 5px 5px;
border-bottom:0px dotted #000;
border-left:0px dotted #000;
border-right:0px solid #ffffff}
#nav li li a:hover, #nav li li a:active{
background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
border-bottom:0px dotted #000;
padding:7px 30px 7px 10px}
#nav li ul{
position:absolute;
width:10em;
left:-999em}
#nav li:hover ul{
left:auto;
display:block}
#nav li:hover ul, #nav li.sfhover ul{
left:auto}- Sesuaikan kode yang berwarna hijau dengan ukuran template kamu
- Sesuaikan warna- warna agar serasi dengan template blog kamu. Untuk kode warna bisa dilihat DISINI
- Jika sudah selanjutnya cari kode di bawah ini [fokuskan pencarian pada kode berwarna hijau]
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Trik blog | Blog | Free software | free mp3 (Header)' type='Header'/>
</b:section>
</div> - Tambahkan Kode ini Tepat di bawah kode di atas
<div id='bg_nav'>
Catatan:
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://didikandweta.blogspot.com/'>home</a></li>
<li><a href='http://didikandweta.blogspot.com/'>Tentang saya</a>
<ul>
<li><a href='http://didikandweta.blogspot.com/2009/12/siapakah-didik-ma-saya-itu.html'>Tentang DIDIK MA</a></li>
</ul></li>
<li><a href='#'>Free software</a>
<ul>
<li><a href='http://didikandweta.blogspot.com/'>software Hp</a></li>
<li><a href='http://didikandweta.blogspot.com/search/label/Software'>software Komputer</a></li><li><a href='http://didikandweta.blogspot.com/search/label/portable'>Portable software</a></li>
</ul></li>
<li><a href='#'>Tips dan trik</a>
<ul>
<li><a href='http://didikandweta.blogspot.com/search/label/facebook'>Tips facebook</a></li>
<li><a href='http://didikandweta.blogspot.com/search/label/panduan%20blog'>Trik Blog</a></li>
</ul></li>
<li><a href='#'>free mp3</a>
<ul>
<li><a href='http://didikandweta.blogspot.com/2009/11/free-download-mp3-terbaru.html'>new mp3 pop</a></li>
<li><a href='http://didikandweta.blogspot.com/search/label/mp3%20koplo'>mp3 dangdut koplo</a></li>
</ul></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://didikandweta.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- akhir bg_nav -->- Ganti kode kode yang berwarna merah dengan link link yang ingin dituju
- Kode- kode yang berwarna hijau bisa teman- teman ganti sesuai keinginan teman- teman
- Ganti http://didikandweta.blogspot.com/ dengan alamat blog teman-teman
- Klik Pratinjau atau langsung Klik Simpan Template
Demikian artikel tentang Membuat Navigasi menu Horizontal di blog ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Navigasi menu Horizontal di blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
