Menu navigasi horizontal biasa digunakan pada situs web atau blog.
Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.
Menu horizontal ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping.
Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.
Menu ini sangat mudah diaplikasikan pada template blog, karena cara membuat menu navigasi horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah seperti gambar di bawah ini :
Jika berkeinginan memasang atau membuat menu navigasi horizontal di blog Anda bisa ikuti langkah-langkahnya sebagai berikut :
Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.
Menu horizontal ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping.
Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.
Menu ini sangat mudah diaplikasikan pada template blog, karena cara membuat menu navigasi horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah seperti gambar di bawah ini :
- Login atau masuk ke blog Anda.
- Pilih blog yang ingin Anda pasang menu horizontal.
- Pilih tata letak atau layout.
- Tambahkan gadget.
- Pilih HTML/JavaScript.
- Masukkan kode di bawah ini.
<style type="text/css">
/*----------------------------------*/
.Nav a { width: auto; height: auto; text-decoration: none; }
.Nav a { text-align: center; text-decoration:none;color:#ffffcc; 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:#000033; font-weight:bold; border:3px; background-color: #ffcc99;}
</style>
<div style="border: 3px solid #ffcc99; height:px;background-color:#FF6633;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="://www.nimbuzzin.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME/span></a>
<a href="://www.nimbuzzin.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">About Me</span></a>
<a href="://www.nimbuzzin.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Contact</span></a>
<a href="://www.nimbuzzin.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Internet</span></a>
<a href="://www.nimbuzzin.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Tips</span></a>
<a href="://www.nimbuzzin.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Blogging tips</span></a>
<form action="http://www.nimbuzzin.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 = "search...";}" onfocus="if (this.value == "search...") {this.value = ""}" value="Search..." type="text" /> <input class="btn" name="" " value="search" type="submit" span style="font-weight:bold; font-size:12px; color:#ff3399" />
</form>
</div></div>
- Ganti yang warna merah dengan alamat link milik Anda.
Warna dan ukuran menu navigasi horizontal ini bisa Anda edit sesuai dengan keinginan.
- Kemudian save.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon