TUTORIAL

CARA  MEMBUAT MENU NAVIGASI PADA BLOG

PRAKTIS DAN MUDAH

Anda baru belajar nge-blog dan tampilan blog anda membuat anda dan hampir memutuskan berhenti nge-blog? Tenang saja, anda tidak sendiri dan hal itu hampir dialami oleh semua blogger termasuk blogger-nya www.breakthrough4all.blogspot.com ini. 

Menu navigasi adalah menu pada web atau blog yang memudahkan pengunjung masuk sesuai dengan isi web atau blog anda. Menu navigasi sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan. Menu navigasi ada yang vertikal dan horizontal.

Kali ini kita akan membuat menu navigasi horizontal yang biasanya 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 mengaplikasikan menu horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah seperti gambar di bawah ini :

Akh, pasti anda sudah gak sabaran ya. Langsung aja kita masuk ke langkah-langkah praktisnya ya:

• Login atau masuk ke blog yang ingin anda buat aplikasi menu navigasi.
• Pilih tata letak atau layout.
• Klick tambahkan gadget.
• Pilih HTML/JavaScript.
• Masukkan (copy) semua kode berikut ini pada kolom ‘content’
  
  

<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.breakthrough4all.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME</span></a>

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

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

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

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

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

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

<form action="http://www.breakthrough4all.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>

• Berikutnya ganti tulisan warna merah pada kod di atas dengan alamat link milik anda dan yang warna biru dengan nama menu navigasi yang anda inginkan.
• Kemudian klick ‘save’.
• Eit....... ada info tambahan! Bila anda mau menambah menu navigasi, tinggal copy aja salah satu kod di atas seperti contoh berikut :

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

• Gantilah nama menu, misalnya, TUTORIAL menjadi nama menu navigasi yang anda inginkan. Demikian halnya bila anda ingin menghilangkan salah satu atau beberapa menu navigasi pada blog anda, delete aja kod tertentu.
• Sekarang jadi dech tampilan blog anda makin keren dan silakan nikmati sensasi baru nge-blog

Selamat mencoba! Bila anda punya yang lebih uptodate tolong jangan lupa berbagi di comment ya.