Membuat Menu Bar Pada Blogspot

Post ini diambil dari http://Tanpa-isi.blogspot.com

Menu Navigasi Horizontal CSS ini memang menarik untuk menghias blog anda.Menu ini saya dapatkan dari Dynamic Drive. Dari pada saya banyak omong langsung aja kita buat Chrome Menu Bar CSS Di Blogspot :

DEMO


Loggin ke Blogger
Pilih Rancangan - Edit Html - expand widget template
Kemudian Letakkan kode berikut diatas kode ]]></b:skin>

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XjCXMfyFc0Rv0wgx2QJemPX6zSnTeHoJuSQE5E83LLySXaENBzaI6Cgir5Z2dQWNnd84TSQLHHX6xJvzTxjKjj1O7ElD9zfTB6qqA-Vw5Vd8ipMZHuavkS4TFXVioQPUxT4kaIwd5ZF2/s1600/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VHin6W-_b5m1NZ_7VWJ9UlGZ_BWQX6xOBogHukIb8k3M2d581e12BI2-5cuVnnIALL91O7pobkPcl3Ur8dKxTtbpc0vmUNCiEK_fMBtkYmFcqoIwmsue-H-T9WkhSnAPgEd14chrFYre/s1600/chromebg2.gif) center center repeat-x;
}
</style>

Kemudian Save Template.

Langkah selanjutnya adalah menambahkan menu ke Element Halaman , berikut caranya :

Pilih Tata Letak - Tambah Widget - pilih HTML/Javascript, kemudian copy paste kode berikut :

<div id="chromemenu">
<ul>
<li><a href="URL LINK ANDA">Home</a></li>
<li><a href="URL LINK ANDA">Cheat Ninja Saga</a></li>
<li><a href="URL LINK ANDA">Cheat Ayo Dance</a></li>
<li><a href="URL LINK ANDA">Facebook</a></li>
<li><a href="URL LINK ANDA">Trik Internet</a></li>
<li><a href="URL LINK ANDA">Cheat Game</a></li>
</ul>
</div>

Ket :
Ganti Tulisan yang berwarna merah dengan Url tujuan menu anda.
Ganti Tulisan yang berwarna Pink dengan Nama Menu anda.

Kemudian Save.