Totorial Blog: Membuat CSS Menu

Salam hangat semuanya, terimakasih sudah mampir di sini. Apa sih yang akan anda dapatkan di postingan saya kali ini? Disini anda akan mengetahui cara membuat CSS Menu. Bagi para blogmaster seperti anda tentu sudah tahu apa itu CSS menu. CSS Menu bisa diaplikasikan untuk membat menu navigasi seperti gambar di bawah ini.

Screenshot CSS menu diatas adalah menu navigasi yang ada di blog saya saat ini. Hasil akhir tutorial blog: membuat CSS menu yang saya tulis kira-kira seperti menu navigasi diatas.

Kayaknya saya gak perlu berlama-lama lagi deh, langsung saja ke topik bahasan membuat CSS Menu berikut:

1. Log in ke Blogger.com
2. Klik Tata Letak > Edit HTML
3. Cari kode berikut: ]]></b:skin>
4. Pastekan kode CSS berikut tepat diatas ]]></b:skin>

/*NAVIGASI*/

#menu
{
margin-bottom: 10px;
height: 34px;
padding: 0px 0;
}

#menu ul
{
margin-bottom:3px;
padding: 7px;
height: 34px;
text-align: center;
}

#menu ul li
{
list-style: none;
display: inline;
float: left;
height: 28px;
padding: 5px;
}

#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
height: 28px;
color: #ffffff;
padding: 5px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: none;
background: #00A651;
}

#menu ul li a:hover
{
height: 28px;
color: #ffffff;
background: #FF0000;
text-decoration: none;
}

/*END OF NAVIGASI*/

5. Langkah selanjutnya adalah meletakkan menu navigasi di elemen blog. Disini saya letakkan menu navigasi di bagian atas main wrapper sehingga saya memperoleh menu navigasi seperti yang sudah ada di blog saya ini. Cari kode <div id='main-wrapper'>

6. Pastekan kode HTML berikut tepat diatasnya

<div id='menu'>
<ul>
<li><a href='#' >Nama Menu #1</a></li>
<li><a href='#' >Nama Menu #2</a></li>
<li><a href='#' >Nama Menu #3</a></li>
</ul>
</div>

Ganti tanda pagar (#) dengan url halaman blog yang akan ditampilkan, ganti nama menu # dengan nama yang sesuai. Contoh:

<li><a href='http://mohkaris.blogspot.com' >HOME</a></li>

Jika anda ingin menambahkan link lagi, tambahkan kode: <li><a href='#' >Nama Menu #4</a></li> sebelum </ul>

Selamat mencoba

Enjoy!!