jika kalian memang sudah mencoba cara pertama dan berhasil , ya bagus lah . .
Sekarang saya akan membahas yang berbeda versi .
Membuat Menu Navigasi Horizontal merupakan salah satu tips untuk memperindah blog serta mempersingkat
halaman blogger .
Gambar di atas merupakan salah satu contoh menu navigasi horizontal .
Untuk membuatnya , silahkan lihat caranya di bawah ini :
1. Login blogger --> Rancangan --> Edit HTML ( Centang expand widget )
Nb: Untuk menghindari kegagalan silahkan copykan script template anda ke notepad atau download template lengkap .
2. Silahkan cari kode ]]></b:skin> ( Ctrl + F ) lalu ketikan kodenya
Lalu copykan script di bawah ini tepat di atas ]]></b:skin> :
#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding: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; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 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:-24px 0 0 170px;}
#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;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding: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; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 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:-24px 0 0 170px;}
#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;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
3. Silahkan hapus menu yang <body> , Atau jika memang tidak ada , langsung aja copy paste script di bawah ini tepat di bawah <body> :
<div id='outer'>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://computers-place.blogspot.com'>Home</a></li>
<li><a href='#'>Komputer</a>
<ul>
<li><a href='http://computers-place.blogspot.com/search/label/Sekitar%20Komputer%20Dan%20Perbaikan'>Komputer Dan Perbaikan</a></li>
<li><a href='http://computers-place.blogspot.com/search/label/Sistem%20Operasi%20%28OS%29'>Sistem Operasi ( OS )</a></li>
<li><a href='http://computers-place.blogspot.com/search/label/Virus'>Tentang Virus</a></li>
</ul></li>
<li><a href='#'>Download</a>
<ul>
<li><a href='http://computers-place.blogspot.com/search/label/Download%20Driver'>Download Driver</a></li>
<li><a href='http://computers-place.blogspot.com/search/label/Download%20Anti%20Virus'>Download Anti Virus</a></li>
<li><a href='http://morosoft.blogspot.com/search/label/Download%20Anti%20Virus'>Free Download Software</a></li>
<li><a href='http://zone4gamer.blogspot.com/search/label/Download%20Anti%20Virus'>Free Download Game</a></li>
</ul></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://computers-place.blogspot.com/search/label/Tutorial%20blogger'>Tutorial Blog</a></li>
</ul></li>
<li><a href='#'>Internet</a>
<ul><li><a href='http://computers-place.blogspot.com/search/label/Internet'>Internet   »</a>
<ul><li><a href='http://computers-place.blogspot.com/search/label/Cara%20dapat%20uang%20dari%20internet'>Cara Dapat Uang Dari Internet</a></li>
<li><a href='http://computers-place.blogspot.com/search/label/Internet'>Internet</a></li>
<li><a href='http://computers-place.blogspot.com/search/label/Software%20Internet'>Software Untuk Internet</a></li>
</ul></li>
<li><a href='Link'>Kode kode Warna</a></li>
</ul></li>
<li><a href='#'>Zona Aneh</a>
<ul><li><a href='http://computers-place.blogspot.com'>Unik</a></li>
<li><a href='/'>Gila</a></li>
<li><a href='/'>Hiburan</a></li>
</ul></li>
<li><a href='Link'>Judul</a></li>
<li><a href='Link'>Judul</a></li>
</ul>
</div>
</div>
</div>
Merah : Gantilah dengan link yang akan anda masukan
Hijau : Gantilah dengan nama judul anda
Ungu : Gantilah dengan nama judul tab yang anda inginkan
:a:
:b:
:c:
:d:
:e:
:f:
:g:
:h:
:i:
:j:
:k:
:l:
:m:
:n:
:o:
:p:
Subscribe to email feed
