HALO Friend, welcome | LOGIN | DAFTAR
Kamis, 28 Juni 2012 | 17:15 WIB

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.


Bagikan ke :
thumbnail Title: Cara membuat Menu 3TAB Tanpa CSS di blog
Posted by: ANDIK WIN
Rating: 4.5 ★★★★★ - 174.984 Reviews
Reviewer: 1 hour 30 min - 9.999 Kalori
Sponsored Link

2 Komentar di " Cara membuat Menu 3TAB Tanpa CSS di blog"

  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

Poskan Saran, kritik Serta Opini Anda Pada Blog Facewoman :

TERPOPULER :
TERKOMENTARI :
Mari Gabung Di KBN ( KOMUNITAS BLOGGER NEWBIE INDONESIA ) » KLIK DISINITemui Kami di twitter@andikwinclose
(close)
Back Top