Share the ideas and innovations to a friend of the world

Horizontal tab menu 10

Apaka sobat pernah liat menu seperti ini ?? atau seperti yang diblog saya ???

menu tab 10-ilmu27.JPG

Ingin mencobanya , ikuti langkah berikut :

Lankah 1 :

  • Pertama login di akun blog saudara atau disini
  • Pilih layout > Edit HTML
  • Saya sarankan download full template saudara
  • Kembali ke pembahasan masi di dalam edit html
  • Centang Expand...
  • Silahkan saudara cari ]]></b:skin> atau bisa juga dengan cara tekan CTRL+F
  • Kemudian Simpan kode berikut tepat diatas kode ]]></b:skin> :
    /*- Menu Tabs 10--------------------------- */ /*credits : http://www.exploding-boy.com */ #tabs10 { float:left; width:95%; font-size:13px; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("http://ilmu27blogger.googlecode.com/files/tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("http://ilmu27blogger.googlecode.com/files/tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }

  • Kemudian cari lagi kode berikut :
    <b:section class='header' id='header' maxwidgets=' 1 ' showaddelement=' no '>


    <b:widget id='Header1' locked=' true ' title='your blog title (Header)' type='Header'/>


    </b:section>


  • Kemudian ganti tulisan yang berwarna merah seperti berikut :
    <b:section class='header' id='header' maxwidgets=' 2 ' showaddelement=' yes '>


    <b:widget id='Header1' locked=' false ' title='your blog title (Header)' type='Header'/>


    </b:section>


Lankah ke 2 :

  • Ke Page Elements/Elemen laman > Add gadget/tambah gadget

ilmu27menu.JPG

  • Pilih HTML/Java Script
  • Copy paste code berikut :
<div id="tabs10"> <!-- tabs10 begin -->
<ul>
<!-- Change the links with your own links -->
<li id="current"><a href="URL Anda"> <span> Home </span></a> </li>
<li><a href="URL Anda"<span>Tutorial Blog</span></a></li>
<li><a href="URL Anda"><span>Registry XP</span></a></li>
<li><a href="URL Anda"><span>My Blog</span></a></li>
<li><a href="URL Anda"><span>Source Code</span></a></li>
<li><a href="URL Anda"><span>Download</span></a></li>
</ul>
</div ><!-- tabs10 end -->

  • Tinggal di SAVE sobat lihat hasilnya...

Semoga bermanfaat !!! kurang jelas silahkan ke tutorial lengkapnya disini....
Anda baru saja membaca artikel yang berkategori Blog dengan judul Horizontal tab menu 10. Anda bisa bookmark halaman ini dengan URL http://ilmu27.blogspot.com/2011/08/horizontal-tab-menu-10.html. Terima kasih!
Ditulis oleh: Imran -

Belum ada komentar untuk "Horizontal tab menu 10"

Post a Comment