Horizontal tab menu 10 - Internet Beritaku

Senin, 08 Agustus 2011

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....
Comments


EmoticonEmoticon