Cara membuat menu navigasi horizontal

abitalita

Tutorial Blog

3.26.2012

Belum ada komentar

Bagi sobat bloger mungkin sudah tidak asing lagi dengan yang namanya menu Navigasi horizontal.disini saya akan coba berbagi bagaimana cara Membuat menu Navigasi horizontal sederhana dan hudah di terapkan pada sebuah Template,dimana menu ini biasanya teletak dibawah header atau judul postingan. untuk penampakannya kira kira seperti gambar di bawah ini...:D

Bagaimana cara membuatnya..? ikuti langkah dibawah ini :

• Masuk ke blog sobat
• Pilih tata letak atau rancangan.
• Klik tambah gadget.
• Pilih HTML/Java Script.
• Kemudian masukkan kode di bawah ini.(untuk judul biarkan kosong saja)

<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 15px;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:#4445d4;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="http://abitalita.blogspot.com"><span style="font-weight:bold; color:#FFFF00; ">HOME</span></a>
<a href="http://abitalita.blogspot.com/search/label/Software"target="_blank"><span style="font-weight:bold;color:#FFff00;">DOWNLOAD </span></a>
<a href="http://www.jkmhal.com/quran/quran.php"target="_blank"><span style="font-weight:bold; color:#FFff00;">AL-QUR'AN</span></a>
<a href="http://www.formulabisnis.com?id=abila_abiel"target="_blank"><span style="font-weight:bold; color:#FFff00;">BISNIS INTERNET</span></a>
<a href="http://abitalita.blogsopt.com"target="_blank"><span style="font-weight:bold; color:#FFff00;">TV ONLINE</span></a>
</div></div>

• Ganti yang berwarna biru dengan link sobat.
• Dan untuk yang merah ganti dan sesuaikan dengan judul link sobat.
• Klik simpan

Dan lihat hasilnya, selamat mencoba semoga membantu..