Cara Membuat Menubar Pada Blog

Cara Membuat Menubar Pada Blog.

Kali ini saya akan menjelaskan tentang bagaimana Cara Membuat Menubar Pada Blog. Menubar adalah sebuah kotak atau bar yang berisikan sebuah navigasi link. Fungsi dari Menubar yaitu untuk menyimpan berbagai link-link penting pada suatu blog, agar blog tampil lebih rapih dan menarik, dan juga mempermudah para pengunjung untuk mengakses halaman-halaman utama pada blog tersebut. Berikut adalah contoh Gambar Menubar pada blog yang akan saya pakai pada pembahasan kali ini.

Membuat Menubar

   Seperti yang terlihat pada Gambar Menubar di atas, menubar tersebut memiliki sebuah submenu tambahan yang muncul apabila kursor mouse mengenai Salah satu menu utama tersebut yang dinamakan menu dropdown .


Berikut adalah Cara Membuat Menubar Pada Blog seperti pada Gambar Menubar diatas :

1. Masuk / Login ke blogger.com dengan menggunakan akun blog Anda.
2. Masuklah pada halaman Template.
3. Lalu klik Edit HTML kemudian Lanjutkan.
4. Cari kode  ]]></b:skin> menggunakan tombol pintas pada keyboard dengan menekan tombol " Ctrl + F " .
5. Copy code skript di bawah ini :
   

   #menubar{
   width:900px;
   height:32px;
   border:2px Double #0FF;
   background:-moz-linear-gradient(bottom, #0BF 40%, #8CF 60%);
   margin: 0 auto;
   }
   #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{
   border-right:3px groove #0FF;
   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: -moz-linear-gradient(bottom,#0ff 5%, #0BF 10%, #008 85%);
   color:#0FF;
   text-decoration:none;
   }
   #menubar li li a, #menubar li li a:link, #menubar li li a:visited{
   font-size: 12px;
   background:-moz-linear-gradient(bottom, #0BF 40%, #8cf 60%);
   color: #fff;
   text-decoration:none;
   width: 150px;
   padding: 0px 10px;
   line-height:30px;
   }
   #menubar li li a:hover, #menubar li li a:active {
   background: -moz-linear-gradient(bottom,#0ff 5%, #0BF 10%, #008 85%);
   color: #0FF;
   }
   #menubar li ul{
   z-index:9999;
   position:absolute;
   left:-999em;
   height:auto;
   width:170px;
   margin-top:32px;
   border:2px groove #0FF;
   }
   #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. Kemudian taruh kode tersebut tepat diatas kode ]]></b:skin> .
7. Jika sudah, tinggal mencari kode  <div id="content-wrapper"> , jika tidak ada coba cari kode <div=id header... dan jika benar-benar tidak ada dari kedua jenis kode yang dicari tersebut, masukanlah kode script pada area header. Dengan cara mengklik tab " Lompat ke widget " dan pilih menu " Header1 ".
   untuk lebih jelasnya perhatikan Gambar di bawah ini :
   
   

   

   Membuat Menubar

   
   Lalu cari kode </b:section> .
   
8. Kemudian copy kode script dibawah ini :
   

   <div id='menubar'>
   <ul>
   <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Menu 1</a>
   <ul>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu1</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu1</a></li>
   </ul></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Menu 2</a>
   <ul>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu2</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu2</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu2</a></li>
   </ul></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Menu 3</a>
   <ul>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu3</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu3</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu3</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu3</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu3</a></li>
   <li><a href='http://obray-inisetut.blogspot.com/'>Dibawah Menu3</a></li>
   </ul></li>
   </ul>
   </div>

   
   - Tulisan berwarna merah bisa diganti dengan link url yang akan Anda gunakan pada menubar tersebut.
   - Tulisan berwarna biru bisa diganti dengan nama tampilan menu yang Anda inginkan pada menubar tersebut.
   
9. Taruh kode script diatas yang sudah dicopy, tepat diatas kode <div id="content-wrapper"> ,  jika tidak ada kode tersebut masukanlah tepat dibawah kode <div=id header..., atau jika tidak ada kedua kode tersebut masukan kode tersebut tepat dibawah kode </b:section> seperti pada gambar dicara no.7 . Untuk lebih jelasnya perhatikan gambar dibawah ini :
   
   

   

   Membuat Menubar

10. Jika sudah menaruh kode script seperti pada Gambar diatas, Kemudian klik " Pratinjau template " terlebih dahulu agar tidak terjadi hal-hal yang tidak diinginkan.
11. Jika sudah sesuai membuat menubar yang diinginkan dan tidak terjadi hal yang tidak diingikan, silahkan klik " Simpan template " .

Demikian bagaimana Cara Membuat Menubar Pada Blog yang saya sampaikan. Semoga dapat dimengerti dan dipelajari oleh Anda.

Semoga bermanfaat .