Judul : Membuat Navigasi menu Horizontal di blog
link : Membuat Navigasi menu Horizontal di blog
Membuat Navigasi menu Horizontal di blog
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
Demikianlah Artikel Membuat Navigasi menu Horizontal di blog
Sekian Membuat Navigasi menu Horizontal di blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.
