Just another WordPress.com site

>

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Membuat menu tab view memang memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa sering sering melihat pratinjau dulu sebelum menyimpan /save template, untuk memastikan kode terpasang atau tidak. Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek.


Cara Membuat Tab View :
1. Login > Layout > HTML “

2. Centang Expand Templates Widget
2. Paste kode dibawah ini diatas kode </head>

<script src=’http://die-silver.googlecode.com/files/ardi33tabviewv2.js&#8217; type=’text/javascript’/>

3. Kalo sudah, letakkan code dibawah ini diatas kode ]]></b:skin>

div.Tabardi33 div.TFs
{height: 30px; overflow: hidden;}
div.Tabardi33 div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabardi33 div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabardi33 div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabardi33 div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabardi33 div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabardi33 div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

4. Lihat Pratinjau Untuk memastikan kode terpasang dengan baik
6. Kemudian save template
7. Selanjutnya pergi ke menu “Page Elements”
8. Trus PIlih “Add a Gadget” = “HTML/Javascript” Terus pilih tempat dimana anda akan menyimpan tab view
9. Kemudian isi HTMLnya dengan script di bawah ini

<form action=”tabardi33.html” method=”get”>
<div class=”Tabardi33″ id=”Tabardi33″>
<div class=”TFs”>
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>

</div>
<div class=”Pages”>
<div class=”Page”><!– Tab –>
<div class=”floor”>
Disini letakkan kode untuk tab 1 anda
</div>
</div><!– end Tab –>
<div class=”Page”><!– Tab –>
Disini letakkan kode untuk tab 2 anda
</div><!– end Tab –>
<div class=”Page”><!– Tab –>
<div class=”floor”>
Disini letakkan kode untuk tab 3 anda
</div>
</div><!– end Tab –>
<div class=”Page”><!– Tab –>
<div class=”floor”>
Disini letakkan kode untuk tab 4 anda
</div>
</div><!– end Tab –>
</div>
</div>
</form>
<script type=”text/javascript”>tabardi33_name(‘Tabardi33’);</script>

Penjelasan :
1. Biru = Judul Tab

2. Coklat = isi dari masing-masing tab berupa kode HTML
“Cara Ini sudah diuji coba di dapur blog admin dan terbukti berhasil”

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Awan Tag

%d blogger menyukai ini: