Cara Membuat Navigation Menu Chrome di Blog

Oke langsung saja. Contoh Menu Chrome ini adalah menu yang saya pasang di blog ini. Fungsinya adalah agar pengunjung blog anda akan lebih mudah untuk mengakses fitur-fitur yang tersedia di blog anda. Langsung saja anda ikuti langkah berikut:





1. Login ke Blogger
2. Masuk ke Layout>Edit HTML
3. Cari Code: </head> Lalu copy>paste code dibawah ini, diatas code: </head>

<style type="text/css">


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */


#chromemenu{
width: 99%;
font-weight: bold;
font-size: 90%;
}


#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://img33.imageshack.us/img33/1341/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}


#chromemenu ul li{
display: inline;
}


#chromemenu ul li a{
color: #494949;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}


#chromemenu ul li a:hover{
background: url(http://img190.imageshack.us/img190/4451/chromebg2.gif) center center repeat-x;
}


</style>

4. Save editan anda.

5. Masuk kembali ke: Layout>Add a Gadget>HTML/Javascript

6. Copy>Paste Code dibawah ini:

<div id="chromemenu">
<ul><center>
<li><a href="URL tujuan">Nama Menu</a></li>
<li><a href="URL tujuan">Nama Menu</a></li>
<li><a href="URL tujuan">Nama Menu</a></li>
<li><a href="URL tujuan">Nama Menu</a></li>
</center></ul>
</div>

KETERANGAN:

- Ganti Nama Menu dengan Menu blog anda.
- Gantu URL tujuan dengan URL menu blog anda.


SELAMAT MENCOBA :)

Posted in: Trik Blog