Home » » Cara membuat Menubar di blog

Cara membuat Menubar di blog

Written By Unknown on Kamis, 03 April 2014 | 02.09

 -Ehm....g mna ni kabarnya sobat bloger???, saya harap baik-baik aja, di kesempatan kali ini saya mau shere tentang "Cara membuat Menubar di blog"  oke langsung saja disimak sobat bloger!!!!!
sobat sudah pada tau menubar itu apa kan? Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu. 
oke ini adalah gambarnya




 Gemana sob keren kan? 
berikut caranya:
1. Login ke akun Blogger sobat
 
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/AVvXsEh3xu45W-RiNeT7Hb47oOEK7yJKOwg1ujufrSvEvFkQTblZVh2J7oBMKpNZ3STZqdoOymYjbEy4zXFKE-Il_E34sDMNtRZLNSOBP7UU3wmMtE7gn_jQRX5FKP4Z8OkdGTAUFQqvB6rFq-vR/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/AVvXsEj-o_H5yXFA3ocGJvOrdHKQUgWMl7Ni0FKzDBKCMdptmLBVynj0Dg0wtreU8IVTohHRoUlxNC0nxTzShKMnOu7SyBb5dLUb4VJpG0Z-lgu0p_ZWGMjETvPvZC2ABJW79MCcvmq3vcbY9BLj/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>
10. Klik Simpan
catatan: ganti tanda # dengan alamat URL
             ganti Link 1 - Link8 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Tutorial membuat menu di blog Semoga Bermanfaat..!
Kalau Sobat masih binggung bisa Komentar atau menjalin pertemanan melalui:
Via Facebook

Admin : Andi Supriyanto Harefa
Via Twitter
Admin : Andi Supriyanto Harefa
Share this article :

0 komentar:

Posting Komentar

Cartoons Comments Pictures

Follow

Featured Posts

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. Rumah Technology - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger