Membuat Menu Bar Blogspot

Inilah salah satu cara membuat menu bar di blogspot agar pengunjung dapat dengan mudah mencari menu-menu yang di inginkan. Cara membuat menu bar blogspot adalah sebagai berikut :
ke Dashboard->Pilih Tata Letak/Layout ->Tambah gadget->pilih HTML/Java Script
kemudian copy pastekan kode berikut :

<div id="colormenu">
<span class="blue"><a href="#">Menu1</a></span>
<span class="red"><a href="#">Menu2</a></span>
<span class="green"><a href="#">Menu3</a></span>
<span class="yellow"><a href="#">Menu4</a></span>
<span class="green2"><a href="#">Menu5</a></span>
</div>
<style type="text/css">
#colormenu {
margin: 5px;
padding: 5px
}

#colormenu a {
font-family: Arial, Helvetica, sans-serif;
padding: 6px 20px 9px 20px;
font-size: 15px;
color: #000;
text-decoration: none;
font-weight: bold;
text-transform: uppercase
}

#colormenu .blue a, #colormenu .red a, #colormenu .green a, #colormenu .yellow a, #colormenu .green2 a {
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out
}

#colormenu .blue a {
border-top: 6px solid #326abd
}

#colormenu .red a {
border-top: 6px solid #b8462c
}

#colormenu .green a {
border-top: 6px solid #a5cc3b
}

#colormenu .yellow a {
border-top: 6px solid #e6ab07
}

#colormenu .green2 a {
border-top: 6px solid #2b9435
}

#colormenu .blue a:hover {
color: #FFF;
background-color: #326abd;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .red a:hover {
color: #FFF;
background-color: #b8462c;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .green a:hover {
color: #FFF;
background-color: #a5cc3b;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .yellow a:hover {
color: #FFF;
background-color: #e6ab07;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .green2 a:hover {
color: #FFF;
background-color: #2b9435;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}
</style>

Simpan Pengaturan--> Coba lihat hasilnya. Selesai
Catatan Mr. Yellows:
- Tempatkan widgetnya di area yang lebar
- Ganti tanda # dengan URL yang di inginkan
- Ganti Menu1, Menu2 dan seterusnya dengan kata-kata yang di inginkan