CARA MEMBUAT MENU NAVIGASI DI BLOGSPOT

Mungkin anda sudah pernah melihat website-website para profesional atau yang lebih dikenal dengan nama webmaster, tampilan-tampilan website mereka sangat bagus sekali sehingga kita yang hanya masih pemula ini ingin membuat juga seperti itu, alhasil kita memang tidak bisa sebagus mereka, tetapi paling tidak kita bisa membuat website menyerupai punya para webmaster. hehe..

Setelah penjelasan mengenai Read More sebelumnya. Sekarang kita masuk kepenjelasan yang lain yang tidak kalah penting yaitu Membuat Menu Navigasi. Menu nagivasi adalah menu yang ada pada navbar yang dibuat selain untuk menambah cantiknya tampilan website, juga untuk mengelompokan kategori postingan kita agar pengunjung website kita bisa memilih posting sesuai dengan kategori yang diinginkan. Misalnya "Home", "Profil", dan "Curhat".

Sebelum sampai pada Menu HTML dan CSS yang akan diuraikan disini. Beberapa waktu yang lalu saya sempat berkunjung kerumahnya (baca : Blog) mas Isnaini saya dapat oleh-oleh untuk membuat menu HTML yang bisa anda lihat disini. karena pada dasarnya semua Menu Navigasi sama saja tergantung kreasi anda saja.

Singkat saja dibawah ini adalah menu HTML yang akan kita masukan kedalam kategori Template pada Template Classic di Blogspot.

< div id="navcontainer">
< ul id="navlist">
< li>< a href="http://namablog.blogspot.com/home.html">Home< /a>< /li>
< li>< a href="http://namablog.blogspot.com/profil.html">Profil< /a>< /li>
< li>< a href="http://namablog.blogspot.com/curhat.html">Curhat< /a>< /li>
< /ul>
< /div>

Kode HTML tersebut diatas akan kita letakkan sebelum kode dibawah ini :

< !-- Begin #content -->


Sedangkan untuk kode CSSnya seperti dibawah ini:

# navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
# navlist li
{
display: inline;
list-style-type: none;
}
# navlist a { padding: 3px 10px; }
# navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
# navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Kode CSS tersebut diatas akan kita letakkan setelah kode dibawah ini :

/* Header
----------------------------------------------- */

setelah anda meletakkan dengan benar kode-kode diatas, maka anda simpan perubahan template, lalu anda coba lihat blog, bagaimana tampilan website anda. sekian


Selamat Mencoba...!!!