Selamat pagi sobat gemmbel, kali ini saya mengulas artikel tentang Cara membuat Menubar di blog, sobat sudah pada mengetahui menubar kan? Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.
Seperti ini adalah gambarnya
berikut caranya:- Login ke akun Blogger sobat
- Sekarang Klik Template
- Klik EDIT HTML
- Sekarang Cari Kode </head> agar mudah dalam pencarian tekan Ctrl+f
- Letakan kode di bawah tepat di atas kode </head>
- Sekarang kita menuju ke layout
- Klik Tambahkan Gadget dan pilih 'HTML/Javascript
- Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)
- Klik Simpan
<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/AVvXsEi3bc9c7E1K-_x8ovhDCCKK0UNoNcUGptsV7REMBgqPP19WvYRu4Syhbo33MnTwMrTbcDm61YVANL8OlyrYCWwl-iW_Gt9n3zESGu_7mJVh-EIJnBGYpZz1VbvwQK4TPBJTFShclNEintii/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/AVvXsEhgg9oKguKakQanNBaApU1_pRgirV_7et_MU0oKrpJq4JSjjUTJiGoDixECK4UWDIa4QdLuuEIswrv9S9q_2ncQ7AU51-GSQ-JVnSEyrlM8ohov7PLCn9Jh12U2vgBtq-5qpagIiGBn37CA/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)
#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/AVvXsEi3bc9c7E1K-_x8ovhDCCKK0UNoNcUGptsV7REMBgqPP19WvYRu4Syhbo33MnTwMrTbcDm61YVANL8OlyrYCWwl-iW_Gt9n3zESGu_7mJVh-EIJnBGYpZz1VbvwQK4TPBJTFShclNEintii/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/AVvXsEhgg9oKguKakQanNBaApU1_pRgirV_7et_MU0oKrpJq4JSjjUTJiGoDixECK4UWDIa4QdLuuEIswrv9S9q_2ncQ7AU51-GSQ-JVnSEyrlM8ohov7PLCn9Jh12U2vgBtq-5qpagIiGBn37CA/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>
<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>
<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,
mungkin cukup sekian Cara Membuat Menu Bar di Blogspot, Semoga Bermanfaat..!
