06 December, 2010

Cara Mudah Membuat Tab Menu

Dari pengalaman saya sendiri tanpa ribet mengenahi CSS cara membuat tab menu horizontal simple ini langsung merujuk pada  CSSPORTAL.COM.Setelah kita memilih model menu maka akan segera muncul Kode CSS-nya.


Caranya yakni:
1.Masuk pada Blogger
2.Seperti biasa ke LAYOUT=>lalu ke EDIT HTML jangan lupa Back up dan CENTANG expand Widget
3.pusatkan pencarian pada 
<div id='upper-wrapper'>   .   .   .   .   .   .
</div>
titik merah adalah kelanjutan code sedangkan pusat pencarian 
4.Masukkan HTML Code dibawah </div>

HTML Code:
<div id="tabs6">
  <ul>
    <li><a href="#" title=""><span>HOME</span></a></li>
    <li><a href="#" title=""><span>Dhana health Club</span></a></li>
    <li><a href="#" title=""><span>Dhana in Netlog</span></a></li>
    <li><a href="#" title=""><span>Longer Link Text</span></a></li>
    <li><a href="#" title=""><span>Belajar SEO</span></a></li>
    <li><a href="#" title=""><span>Tukar Links</span></a></li>
<li><a href="#" title=""><span>Contact Me</span></a></li>
  </ul>
</div>
KET:
warna MERAH adalah alamat dari links Anda
warna BIRU adalah Judul yang dibuat

Langkah selanjutnya cari kode:]]></b:skin>
letakkan CODE CSS berikut DIATAS kode ]]></b:skin>
CODE CSS
/*- Menu Tabs 6--------------------------- */

    #tabs6 {
      font: bold 11px/1.5em Verdana;
      float:left;
      width:100%;
      background:change-background;
      line-height:normal;
      }
    #tabs6 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabs6 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs6 a {
      float:left;
      background:url("images/tableft6.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs6 a span {
      float:left;
      display:block;
      background:url("images/tabright6.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs6 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs6 a:hover span {
      color:#FFF;
      }
    #tabs6 a:hover {
      background-position:0% -42px;
      }
    #tabs6 a:hover span {
      background-position:100% -42px;
      }

SIMPAN dan lihat hasilnya,reguester maaf telat banget yach.semoga bermanfaat.





related Article:

128 Was Commented to “Cara Mudah Membuat Tab Menu”

Post a Comment

Terima kasih atas komentar Anda/Thanxs for Ur Comments/
感谢您的评论 dan please dont SPAM yach...

 

Dhana Arsega/戴安娜 Copyright © 2011 --Edit and Converted by Dhana Arcamo