Cara Buat Menu Bar di Blogspot
oke ini adalah gambarnya
berikut caranya:
1. Login ke akun Blogger sobat
<style type='text/css'> #tabs28 { float:left; width:100%; background:#fff; font-size:93%; line-height:normal; border-bottom:1px solid #DD740B; } #tabs28 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs28 li { display:inline; margin:0; padding:0; } #tabs28 a { float:left; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzB4SI7gOkX8mpSrT7pOQ9ouOrrGMI2HLebCX3mdxP6LutrT3uKR4h1GUnpON-GAGz3eqax3vabXbPB5ozZ0nLjf4oqtlRp1XtZYN4OCY1InuFtlPbo6iCsyCTB5jDTIjMj8XgH_1GVt6f/s1600/slide-left.gif") no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabs28 a span { float:left; display:block; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEw4rqBIFqolNrp3QHl4c6KMjX912UuBa9cbDpGxFs2IrwYMNJNAodVmQ0-lNaxdpwVYo7WLk81LkPAZTHZqA1rILbBPvGe48HiCQQJjVDU2A3RudSkS-b895aS-sv1YMNm_1drbxmXRzL/s1600/side-right.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } #tabs28 a span {float:none;} #tabsI a:hover span { color:#FFF; } #tabs28 a:hover { background-position:0% -42px; } #tabs28 a:hover span { background-position:100% -42px; }</style>Catatan:
Anda Boleh Ganti tulisan 10 dengan yang anda inginkan(fungsinya untuk panjang jarak atas)
Anda Boleh Ganti tulisan 50 dengan yang anda inginkan(fungsinya untuk panjang sebelah kiri)
7. Sekarang kita menuju ke layout
<div id="tabs28"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> <li><a href="#"><span>Link 8</span></a></li> </ul> </div>
ganti Link 1 - Link8 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Semoga Bermanfaat..!