Cara membuat menu navigasi horisontal pada blog - Halo sobat
Mas GunKlaten sudah tidak asing lagi dengan yang namanya menu horizontal?. Di sini
Mas GunKlaten akan membuat sebuah menu navigasi horizontal secara sederhana yang tentunya lebih mudah di terapkan pada sebuah template. Menu ini biasanya terletak di bawah header.
Di bawah ini adalah contoh dari gambar menu navigasi horizontal yang akan kita buat.
Kita langsung saja menuju TKP bagaimana cara membuatnya.
- Masuk ke blog sobat
- Pilih tata letak atau rancangan.
- Klik tambah gadget.
- Pilih HTML/Java Script.
- Kemudian 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: #000000;}
</style>
<div style="border: 3px solid #ffcc99; height:px;background-color:#FF3366;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="http://gunklaten.blogspot.com"target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME</span></a>
<a href="http://gunklaten.blogspot.com/2011/04/cara-membuat-gambar-animasi-di-blogspot.html"target="_blank"><span style="font-weight:bold;color:#FFff00;">JUDUL1 </span></a>
<a href="http://gunklaten.blogspot.com/2011/04/cara-memasang-setatus-online-yahoo.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Gunklaten+(GunKlaten)"target="_blank"><span style="font-weight:bold; color:#FFff00;">JUDUL 2</span></a>
<a href="http://gunklaten.blogspot.com/2011/04/sejarah-sendang-sinongko-tegal-sendang.html"target="_blank"><span style="font-weight:bold; color:#FFff00;">JUDUL 3</span></a>
<form action=http://gunklaten.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 = "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 hijau dengan alamat link milik sobat. Bila perlu sobat bisa tambah dengan link sobat yang lain.
Jangan lupa isi juga keterangan yang sesuai pada judul.
- Klik simpan.
oke sahabatku..... semoga bermanfaat salam Mas GunKlaten
