Membuat Menu Horizontal Pada Blog

Posted by Unknown on Saturday 7 September 2013


Cara Membuat Menu Navigasi Horizontal


      Menu navigasi horizontal yang akan kita buat adalah menu navigasi yang bisa kita taruh di atas atau di bawah header. Dan pasti kita menggunakan bantuan javascript/HTML. Karena menggunakan javascript/HTML tidak akan terlalu membebani beratnya blog kalian.Cek it dot...


     Kalian bisa ikuti langkah-langkah praktisnya sebagai berikut :

1. Login atau masuk ke blog kalian.
2. Pilih blog yang ingin kalian pasang menu horizontal.
3. Pilih tata letak atau layout.
4. Tambahkan gadget.
5. Pilih HTML/JavaScript.
6. 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:#0066cc; 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: #0066cc;}
</style>
<div style="border: 3px solid #ffcc99; height:px;background-color:#0066cc;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="http://www.ngulakulik.blogspot.com" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME/span></a>

<a href="http://www.ngulakulik.blogspot.com" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">ABOUT</span></a>

<a href="http://www.ngulakulik.blogspot.com" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">CONTACT</span></a>

<a href="http://www.ngulakulik.blogspot.com" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">INFO</span></a>

<a href="http://www.ngulakulik.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">CSS</span></a>

 <input id="searchbox" maxlength="" name="q" onblur="if (this.value == "") {this.value = "search...";}" onfocus="if (this.value == "search...") {this.value = ""}" value="Search..." type="text" /> 


</div></div>

Lanjutkan:

Ganti yang warna merah dengan alamat link milik kalian.

Warna dan ukuran menu navigasi horizontal ini bisa kalian edit sesuai dengan keinginan.

Kemudian save.

Selamat menikmati tampilan menu baru kalian.

Tulis Komentar Kalian Untuk Membuat Menu Horizontal Pada Blog