Cara Membuat Menubar Di Blog Dengan dan tanpa perlu mngedit HTML/CSS

Hai lagi!! hehehe :D

Aku mau ngasih tau nih cara bikin mnu bar di blog dengan mudah...
Ada yang harus edit HTML dulu, ada juga yang ga pake edit HTML segala...
Nah, sekarang aku kasih tau yang pake edit HTML dulu ^_^
Yang ga pake edit HTML ada di bawahnya....


  • Tanpa Edit HTML


1. Login ke Akun Bloggr kamu. (Tentunya donk -_- )

2. Klik "Tata Letak" atau "Layout"
3. Klik di sebelah nya yang dilingkari (Laman)


4. Kalau sudah, Klik "Laman baru"

5. Nanti, akan keluar Sidebar kaya gini



6. Tulis Judul menu/laman yang kamu mau, Misalnya: About me dll.


7. Laman sudah selesai di buat
8. Sekarang, kalau kalian buka "Tata Letak" / "Layout" ada kolom yang nunjukin laman seperti gambar di bawah.

9. Kamu udah bisa nyusun lamannya/ menggser lamannya dan mencentang laman yang mau kamu tampilkan   di blog


10. Jadi sekarang kalau kamu buka blog kamu nanti akan muncul laman yang  kamu buat tadi ^_^


  • Edit HTML


Ini Contoh nya


1. Login dulu ke akun blog kamu.

2. Klik "Template"  pada blog yang mau kamu kasih Menu Bar.





3. Trus, Klik "Edit HTML".



4. Cari kode </head> supaya cepet, kamu tekan tombol Ctrl + f  kalo ga juga bisa pake tombol F3
5. Taroh kode di bawah ini tepat di atas kod </head> tadi

<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/AVvXsEixGfAYtnB8DlWZHz4L9vwK-ipUkfN6i1NRXhojEqn9FOlUCDMz6XLM5IxvOlxo-9wYAy6KYDV9p3JQEsIUANZchrKRyjRI5mXQvEwGZ4IansaTvYu904d2LMQjq8uE-KrohemLFbaOEG6L/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/AVvXsEgu2UQ9JeVjVd7N7vqqsfPwRWkfqayKZnW5SVsGX2xHsaeAJx4mdmT_ApfddIp-D1J2h0XxYFR5ontOS8nA_nUXzgDJ0RjkXJS9vZ7ujnPVejmu0C7iM0s6ZnihP7pnd_23On_PUA5jsBkB/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>

NB: Kamu boleh ganti angka 10  (Buat panjang jarak menu ke atas) dan 50 (Panjang sebelah kiri)

6. Sekarang kita ke "Tata letak" atau "Layout"

7. Klik "Tambahkan Gadged" Pilih "HTML/Javascript" *Klik kotak kecil yang ada tanda + nya*


8. Judul Gadged nya ga perlu di isi... cukup isi Kolom Konten nya aja 


9. Taroh Scpirt di bawah ini di Kolom Konten

<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, dan selesai! ^_^

NB2: Tanda pagar (#) di ganti pakai URL blog kamu dan tulisan Link 1 sampai Link 8 di ganti sama nama menu yang kamu mau Misalnya: About me, Contact, Dan lain-lain

Terimakasih, Semoga bermanfaat! ^_^
Enjoy Blogging! ^_^

1 komentar: