Cara membuat menu bar di blogspot dengan mudah

1. Silahkan masuk ke akun Blogger agan.
2. Klik halaman "Template" download template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan.
3. Centang "Expand Template Widget".
4. Terus silahkan cari kode ]]></b:skin> denan menggunakan Ctrl + F.
5. Simpan kode script di bawah ini tepat di atas kode ]]></b:skin>


    #menubar{
    border-bottom:4px solid #ff0000;
    width:1025px;
    height:32px;
    background:#000000;
    float:center;
    margin-bottom:3px;
    }
    #menubar ul{
    float:left;
    margin:0;
    padding:0;
    }
    #menubar li{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }
    #menubar li a, #menubar li a:link{
    float:left;
    padding:8px 12px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    }
    #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
    background: #ff0000;
    color: #fff;
    text-decoration:none;
    }
    #menubar li li a, #menubar li li a:link, #menubar li li a:visited{
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    text-decoration:none;
    width: 150px;
    padding: 0px 10px;
    line-height:30px;
    }
    #menubar li li a:hover, #menubar li li a:active {
    background: #000000;
    color: #ffffff;
    }
    #menubar li ul{
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    margin-top:32px;
    border:1px solid ##ff0000;
    }
    #menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
    left:auto
    }
    #menubar li:hover, #menubar li.sfhover{
    position:static
    }      


6. Untuk seterusnya silahkan cari kode <div id="content-wrapper">
7. Simpan kode script di bawah ini tepat di atas kode <div id="content-wrapper">

   
<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='http://aryrisnajars.blogspot.com'>Home</a>
        </li>
        <li>
          <a
href='http://aryrisnajars.blogspot.com'>Software
       </a></li>
        <li>
          <a href='http://aryrisnajars.blogspot.com'>Games</a>
        </li>
  <li>
           <a href='http://aryrisnajars.blogspot.com'>Blogger</a>
        </li>
  <li>
           <a href='http://aryrisnajars.blogspot.com'>Internet</a>
        </li>
  <li>
           <a
href='http://aryrisnajars.blogspot.com'>Tips & Trik
        </a
href='http:></li>
  <li>
           <a
href='http:></a
href='http:></li></ul></div>

8. Simpan Template.

Note:

    Sesuaikan kode #ff0000 (border bawah menubar), 1025px (lebar menubar), #000000 (background menubar).
    Silahkan nama menubar yang berwarna biru Home sesuai dengan keinginan agan.
    Ganti link yang berwarna kuning http://aryrisnajars.blogspot.com dengan link agan.