Menu ini sangat mudah diaplikasikan pada template blog, karena ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah seperti gambar di bawah ini :
Cara-cara pembuatannya...
1. login ke blog sobat
2. pilih tata letak - add gadget - html javascript
3. copy kode dibawah ini, kemudian paste di kolom html javascript
<style type="text/css">
/*----------------------------------*/
.Nav a { width: auto; height: auto; text-decoration: none; }
.Nav a { text-align: center; text-decoration:none;color:#D8D8D8; padding:1px 20px 1px 20px;font-weight:bold; font-size:12px; }
.Nav a:hover {padding:3px 20px 3px; 20px; text-align:center; text-decoration:none; color:#FFFFFF; font-weight:bold; border:3px; background-color: #B8B8B8;}
</style>
<div style="border: 3px solid #FFFFFF; height:px;background-color:#000000;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="http://alexandro-tips.blogspot.com">Home</a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Blog/Seo</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Blackberry</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">PC/Laptop</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Populer</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Trik Hp</span></a>
<a href="http://alexandro-tips.blogspot.com"><span style="font-weight:bold; color:#FFFFFF; ">Umum</span></a>
<form action="http://alexandro-tips.blogspot.com/search" id="searchform" method="get" style="display: inline; float:right; padding-right:10px; padding-bottom:px" > <input id="searchbox" maxlength="" name="q" onblur="if (this.value == "") {this.value = "...";}" onfocus="if (this.value == "...") {this.value = ""}" value="..." type="text" /> <input class="btn" name="" " value="cari" type="submit" span style="font-weight:bold; font-size:12px; color:#ff3399" />
</form>
</div></div>
4. Ganti kode yang berwarna merah dengan link sobat.
5. save...
selamat mencoba, saya pastikan menu navigasi pada blog sobat sudah terpasang..
<style type="text/css">
/*----------------------------------*/
.Nav a { width: auto; height: auto; text-decoration: none; }
.Nav a { text-align: center; text-decoration:none;color:#D8D8D8; padding:1px 20px 1px 20px;font-weight:bold; font-size:12px; }
.Nav a:hover {padding:3px 20px 3px; 20px; text-align:center; text-decoration:none; color:#FFFFFF; font-weight:bold; border:3px; background-color: #B8B8B8;}
</style>
<div style="border: 3px solid #FFFFFF; height:px;background-color:#000000;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="http://alexandro-tips.blogspot.com">Home</a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Blog/Seo</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Blackberry</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">PC/Laptop</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Populer</span></a>
<a href="http://alexandro-tips.blogspot.com/"><span style="font-weight:bold; color:#FFFFFF; ">Trik Hp</span></a>
<a href="http://alexandro-tips.blogspot.com"><span style="font-weight:bold; color:#FFFFFF; ">Umum</span></a>
<form action="http://alexandro-tips.blogspot.com/search" id="searchform" method="get" style="display: inline; float:right; padding-right:10px; padding-bottom:px" > <input id="searchbox" maxlength="" name="q" onblur="if (this.value == "") {this.value = "...";}" onfocus="if (this.value == "...") {this.value = ""}" value="..." type="text" /> <input class="btn" name="" " value="cari" type="submit" span style="font-weight:bold; font-size:12px; color:#ff3399" />
</form>
</div></div>
4. Ganti kode yang berwarna merah dengan link sobat.
5. save...
selamat mencoba, saya pastikan menu navigasi pada blog sobat sudah terpasang..
sudah saya masukan kekolom javascript kok gak jadi to ?
BalasHapusdimana salahnya ,...mohon petunjuk lagi gan...mksh.