Membuat menu bar pada Blogger

Posted by Tata Risdian R S.T on Sabtu, 13 Maret 2010 | 0 komentar

Saat jalan jalan di dunia maya aku temukan blog yang memiliki menu bar seperti pada website profesional lainnya. Blog itu di hosting di Blogger. Lalu aku coba untuk buat menu navigasi bar yang hasilnya seperti gambar di bawah ini

menu bar

Sederhana bukan?


Yang pertama adalah membuat style CSS-nya yang kita letakkan di bagian head. Kode nya sebagai berikut:

/* ---- LINK BAR ----*/
#menu_bar {
margin:0;
padding:0;
height:30px;
clear:both;
background: #FFFFFF;
}

#nav_bar ul {
padding-left: 0;
margin: 0;
background-color: #FFFFFF;
color: #000000;
float: left;
width: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#nav_bar ul li { display: inline; }

#nav_bar ul li a {
padding-top: 5px;
padding-bottom: 5px;
padding-left:5px;
padding-right:5px;
background-color: transparent;
color: #03ae03;
text-decoration: none;
float: left;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
}

#nav_bar ul li a:hover {
background-color: #ae4105;
color: #f5f5f5;
}

Nah, kalau sudah tambahkan di bagian body, kode htmlnya. Ini dia



tanda # di ganti dengan link alamat yang di tuju.

Label: