Cara Buat Menu Bar di Blogspot

(Menu Bar Blogspot)

Menu bar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menu bar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halaman-halaman utama yang ada pada suatu blog itu, tanpa harus mencari dengan membuka semua postingan di blog tersebut.

• Berikut cara buat Menu Bar di blogspot:

1. Login ke akun Blogger

2. Sekarang Klik Template

3. Klik EDIT HTML

4. Sekarang Cari Kode </head> agar mudah dalam pencarian tekan Ctrl+f

5. Letakan kode di bawah tepat di atas kode </head>

<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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0DCqJnh3QIz_ABvwNJfstfWygh6ESvigZ6HENMwdurS_e5idG0jSDTZhc8pIK_TusuV3QZRXSuSzeVtNVviQMYKXeOBvOMGARZBDcZAr6f48QDNTnVzsoGP8sfnm555jzO3lOW9khyphenhyphen1hu/s1600/slide-left.gif&quot;) no-repeat left top;   margin:0;   padding:0 0 0 5px;   text-decoration:none;   } 
#tabs28 a span {   float:left;   display:block;   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tMLzO1lgZp2yQHNsxN67ESNAX1pR_J1zTbFk7nvquoEHE4a-TXFjaKFWOjsVV5aqDNu7WzQfITVQvm2hn6EimkWaBFc0FjglOEYr7dUMMRbQmyPgRAMsDWU16yAoTpnUjhpmpgV5fiU2/s1600/side-right.gif&quot;) 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

8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript

9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)

<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>

Catatan: ganti tanda # dengan alamat URL
ganti Link 1 - Link 8 dengan nama menu yang anda inginkan.

10. Klik Simpan

# Selamat Mencoba #