15 March 2010

Cara Membuat Menu Tab View


Oke kita mulai pelajaran hari ini sob,, yaitu tentang membuat menu Tab Veiw, seperti milik saya yang ada pada widget footer paling bawah. Anda bisa liat kan! he2x. Posting ini saya buat karna template saya sangat sempit dan memiliki 2 side Bar sebelah kanan dan kiri dan loading Blog pun jadi agak lama loadingnya apabila saya banyak menaruh aplikasi widget di sebelah kiri-kanan posting. alhasil nantinya yang mau berkunjung ke blog ini keburu pindah ke lain hati untuk mencari artikel !!

Sedikit Info : Pada saat pertama Anda browsing blog Anda, Maka Search Enggine akan meload "alah apa ya bahasanya yang sesuaui EYD" mybe memproses sebelah kiri dari blog Anda.

Apabila sudah tidak sabar, Yuk kita mulai membuat tab view hari ini dan langka - langkahnya adalah sebagai berikut :

1. Masuk ke halaman Dashboard > Tata Letak > Edit HTML

2. Lakukanlah BackUp template, agar bisa mengembalikan template kesayangan Anda apabila terjadi eror. Untuk mengetakui cara Backup klik di sini.

3. Apabila sudah pada posisi Edit HTML carilah code ]]></b:skin>, dengan menggunaka 'F3' pada KeyBoard atau 'Ctr F' untuk mencari kode ]]></b:skin>.

4. Copy kode brikut lalu Paste tepat diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft 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.Tabateonsoft 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.Tabateonsoft 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.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

KET :

  • 12px
  • = Untuk Mengubah Ukuran Text pada TAB
  •  #E8E8E8
  • = Untuk Merubah warna Tab setelah disorot cursor
  •   #E8E8E8
  • = Unutk Mengubah warna TAB setelah di klik cursor
  •  240px
  • = Untuk mengubah tinggi kotak TAB
  •  11px
  • = Untuk mengubah ukuran text pada kotak TAB 
  •  #EFF0F1
  • = Untuk mengubah warna background pada kotak kolom TAB.

5. Lalu Copy kode berikut dan letakan di atas kode <b:skin>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

6. Simpan Template.

7. setelah mengikuti langkah diatas sekarang klik > Elemen Laman > Tambah Gadget > klik Add (Plus) Pilih HTML/JavaScript.

8. Copy paste kode berikut pada editor HTML/JavaScript :

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<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">tabateonsoft_name('Tabateonsoft');</script>

9. Klik Simpan dan lihat hasilnya.

Penting :

Apabila Anda ingin menambahakan No TAB VIEW, Cukup gunakan tambahkan Kode ini :

<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 5 anda
</div>
</div><!-- end Tab -->


ini contoh lengkapnya :

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>Blog Banner Friend</a>
<a>tab3</a>
<a>tab4</a>
<a>tab5</a>
<a>tab6</a>
<a>tab7</a>
<a>tab8</a>
<a>tab9</a>
<a>tab10</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
UNDER MAINTENETS
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 5 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 6 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 7 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 8 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 9 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
UNDER MAINTENETS
Disini letakkan kode untuk tab 10 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Artikel ini di kutip dari sumber blogkomputers.blogspot.com

Terimakasih,



Cara Membuat Menu Tab View Rating: 4.5 Diposkan Oleh: Sarifa Marwa

5 komentar:

  1. Good tutorial..

    Tapi rada2 ngeberatin blog klo pake tab...

    ReplyDelete
  2. mas saya mw nanya, tentang menu bar di template yang saya pakai sudah bawaan dari templatenya menunya horizontal, kemudian saya mau merubah nya agar terlihat drop down menu ketika mau di pilih. gimana ya caranya. tolong bantu donk mas..

    link saya: www.freetaskatcampuss.co.cc

    ReplyDelete
  3. Ane juga dah pake cara ini, hampir banyak blog yang bahasnya sih, hehe.
    Jadi ya ga unik hehe.
    Maaf

    ReplyDelete
  4. masih sulit untuk di mengerti :(

    ReplyDelete

Komentar Spam, Link Aktif, dan URL Blog Takkan Muncul. Tidak semua pertanyaan sempat/bisa dijawab.