Tuesday, January 22, 2013

Bagaimana Cara Membuat Pilihan Menu Pada Blog?

  4 comments    
Categories : 
Hey Guys!
Kali ini gua akan memposting cara membuat Menu Bar pada blog. Caranya sih pake script, tinggal di copy paste aja gitu :D.  Okey nih gua kasih cara-caranya plus scriptnya. Check this out!


  • Pertama - tama, masuk ke Akun Blog Sobat
  • Klik Template dan Klik Edit HTML
  • Selanjutnya, cari kode ]]></b:skin> (gunakan Ctrl + F), dan Copy Paste Code dibawah tepat di atas kode tersebut.
ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyoUuZKBRSUNOE3fJX3Vv6_ToxM74-0zGXjcUd0h8qD8lgldz7P4GB5AZGzW0Gr2TOcWjcXT5bDbbYmWlKCkC6fuMULA9SlrgERk7aq5lb2VPDBGzXsBrGPmqntVif1k_6bPDIgukyhs/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}ul.menu li {display:block;float:left;margin:0;padding:0;}ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyoUuZKBRSUNOE3fJX3Vv6_ToxM74-0zGXjcUd0h8qD8lgldz7P4GB5AZGzW0Gr2TOcWjcXT5bDbbYmWlKCkC6fuMULA9SlrgERk7aq5lb2VPDBGzXsBrGPmqntVif1k_6bPDIgukyhs/s1600/bg.png") repeat-x top left;text-decoration:none;}ul.menu .current a {color:#fff;font-weight:700;}/*Garis Merah*/ul.menu.red{background-color:#B11718;}ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}
  • Setelah kode tersebut selesai ditambahkan, silahkan Save Template. 
Selanjutnya, Masuk ke Tata Letak dan ikuti langkah - langkah berikut :
  • Klik Tambah Gadget
  • Lalu tambahkan Fungsi Pihak ke tiga HTML/Javascript
  • Selanjutnya, Copy Paste Kode di Bawah
<ul class="menu red">
  <li class="current"><a href="http://reyknowledgeable.blogspot.com//" target="_self">Home</a></li>
  <li><a href="http://reyknowledgeable.blogspot.com/" target="_self">Software</a></li>
  <li><a href="http://reyknowledgeable.blogspot.com/" target="_self">Video</a></li>
  <li><a href="http://reyknowledgeable.blogspot.com/" target="_self">Sport</a></li>
  <li><a href="" target="_self"></a></li>
</ul>

Note : Silahkan ganti tulisan yang warna merah dengan link blog anda, lalu yang warna biru dengan kata-kata/menu yang anda inginkan. 

SELAMAT MENCOBA!!! 

Thank You sudah membaca artikel blog ini.
Dan Terimakasih juga sudah mampir di blog ini, komentar serta masukan sangat berguna untuk perkembangan blog ini :)
Dan Jangan lupa baca artikel yang lainnya juga ya :D

Bye!

4 comments: