Monday, October 15, 2012

Cara membuat menu dropdown Blog

What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:



To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.


Sorry saya berbahasa Inggris, maklum pernah kursus di EL MATRA, hehe:


ok langsung saja tips nya :

1. Log in di Blogger
2.Klik pada menu template dan Edit HTML
3.cari kode  ]]></b:skin> , gunakan Ctrl+F agar lebih cepat mencari kode
4Copy kode dibawah ini dan Paste di atas kode  ]]></b:skin>

 /*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


5. hapus tulisan yang warna merah dan ganti dengan URL Blog yang ingin di pasang

    menu dropdown
6  ganti tulisan biru tebal dengan menu yang ingin di pasang

7.setelah itu pergi si menu tata letak/widget setelah itu klik add gadget atau tambah gadget

   dan pilih HTML/java script , jika sudah copy script dibawah ini :

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >


8. ganti tulisan yang warna merah dengan URL/alamat Blog kamu,dan tulisan yang warnah biru tebal ganti dengan daftar menu Blog/website kamu.



HAVE FUN,,,,

0 comments:

Post a Comment