Friday, September 13, 2013

Cara Membuat Menu Bar di Blog

Cara membuat Menubar di blog - Hmm,Mungkin agan belum tau apa itu menubar.?!
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 :

                                                 -Sorry,cum pake Paint :D

Berikut caranya :
1.Login ke blog
2.Klik Template
3.Klik "Edit HTML"
4. Cari Kode </head>  (gunakan Ctrl+F agar mudah)
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/AVvXsEjYXSwdmmg8wCv5MjbdJu0vQ5DfEr8X39ve8i_FSa8Rk30L6-SBfkWYwV28PIYskUjHt6_zMtN4k7R1_vNTwKFzhPsZmAMyexvpVALGU3s7wkk5mwv67gy-vnadowzidyXpOd9fHS2Izm2X/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/AVvXsEgLbOwV0nAgplCkinL9LKy31vabnM2oMBMiNN7E2PhxZ92Ecfcb3evmx66tSkeJpbG12FnHlv7T3qNXYSORwJiO73BGytbKuBDoGu5FqIORQMD3OPqQ8Vr4Y4fDojinXDw4YWbjO_4PZTea/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>
 KETERANGAN :
 -Ganti Angka 10 Sesuai keingin-an anda(fungsinya untuk panjang jarak atas)
 -Ganti Angka 50 Sesuai keingin-an anda(fungsinya untuk panjang sebelah kiri)

6.Sekarang ke Tata letak/layout ..
7.Klik add gadged pada bagian atas (disarankan)
8.Pilih "HTML/Javascript"
9.Letakan script html di bawah ini (ingat!,judulnya di kosongkan!!)
<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> 
 Keterangan :
 -Ganti # dengan link agan ...
 -Ganti Lini 1-8 dengan nama menu yang agan inginkan ..
.Untuk menambah lebih banyak slot :D ..
Tambahkan kode : <li><a href="#"><span>Link 8</span></a></li> Sesudah "Link 8" (sebelum </ul>



-Pesan : Repot pada saat menulis Entri baru dengan nama menu yang sesuai tapi gk ketemu ?,atau bingung dengan cara mengisi Link (#) nya??...Baca disini :

No comments:

Post a Comment

Menjadi Donatur untuk blog ini hanya dengan 1 klik iklan.