Cara membuat Menu 3TAB Tanpa CSS di blog

 Hallo sobat,salam sejahtera.pada kesempatan kali ini saya akan share cara membuat Menu 3Tab.Memang banyak bertebaran cara membuat 3Tab.Tapi kebanyakan trik menggunakan css,Jadi sedikit memberatka untuk blog.tapi kali ini Trik yang saya terapkan cuma memakai java scrip jadi tidak begitu memberatkan.Hasilnya bisa anda di lihat di situs blog facewoman.Untuk mengetahui caranya lebih lanjut,ikuti langkah-langkah di bawah ini :

  1. Logi Blogger
  2. Pilih Tata letak - lalu add java scrip,kemudian masukkan scrip di bawah ini :
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 95px; 
height: 22px; 
text-align: center; 
margin: 0px 0px 0px 0px; 
background-color:#999999;
padding-top: 6px;
border: 1px solid #ffffff; 
border-bottom: 1px solid #ccc; 
font-family: "Arial, Helvetica, sans-serif", Arial; 
font-weight: 900;

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #444343; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; 
overflow: hidden;
background-color: #F2F2F2; 
}
div.TabView div.Pages div.Page
{
padding: 2px;
height: 100%;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
.list {
background: url("") no-repeat left center;
border-bottom:1px dotted #7f7f7f;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">PILAHAN</span></a>
<a><span style="color: #fff">TEPOPULER</span></a>
<a><span style="color: #fff">TAG</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">

Widget anda......

</div>
</div>

<div class="Page">
<div class="Pad">
<div style="border: 0px solid #000; height: auto; overflow: auto;">


Widget anda......

</div>
</div>
</div>

<div class="Page">
<div class="Pad">


Widget anda......

</div></div></div></div></form>

<script src="http://facewoman.googlecode.com/files/3tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script> 
Keterangan :
  1. Ubah tulisan width:300px; height:200px; sesuai Ukuran Selera Tab anda.
  2. Ganti tulisan PILAHAN,TERBARU,TAG Sesuai Keinginan anda.
  3. Ganti tulisan Widget anda......dengan widged sobat.

cara membuat 3tab tanpa css,begitu mudah kan.jika anda berhasil hasilnya akan terlihat seperti di blog facewoman.

2 Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

  1. pertamax.

    saya dulu pernah coba dan membuat loading blog lambat

    BalasHapus
    Balasan
    1. memang benar gan saya juga sudah pernah coba pakai trik yang CSS hasilnya malah memberatkan blog.Tapi kalau pakai trik yang ini tidak demikian.

      Hapus

Posting Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

Lebih baru Lebih lama