Home » » Cara membuat Tab View (Versi 2)

Cara membuat Tab View (Versi 2)

Hi...Pembaca oktri.co.cc,Menyambung pembahasan sebelumnya yaitu Cara membuat Tabview ,,kali ini saya berbagi Tips membuat Tab View.Seperti yang kita lihat ketika Blog ini ,tab view yang digunakan juga berbeda dari Tab View yang lalu,yang terlihat lebih Trendy dan lebih “dinamis”.

Bukan berarti Tab View yang sebelumnya kurang bagus,,tapi teknologi terus berkembang, begitupun pimikiran orang.Tentu kita sudah mengetahui Tab View,tapi untuk lebih memahaminya tidak ada salahnya kita ulang membahasnya.

Tab View merupakan sebuah Widget yang dapat meletakkan link atau gambar atau apapun juga kedalamnya,yang tentu akan memakan Sidebar jika ditampilkan semuanya sampai kebawah,dengan Tab View ini kita dapat menghemat pemakaian Sidebar.dan banyak sekali cara pembuatan Tab View begitupun Bentuknya,seperti pada posting terdahulu cara membuat menu tab view dan ini juga salah satu caranya.

Sebenarnya bukan saya yang membuat Script Tab view ini,saya hanya sebagai penyambung lidah saja dari pembuat aslinya di Ateonsoft.com.

Berikut langkah-langkahnya

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML


4.Pada Kotak Edit HTML cari Kode ]]></b:skin>

5.Lalu Copy Kode berikut dan Pastekan 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;}

6.Lalu letakkan kode berikut dibawah kode <head>  

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


7.Save Template

8.Pergi ke halaman Element Halaman

9.Klik Add Widget Element

10.Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut



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

 Ok selamat bekerja, Anda bisa mengeditnya sesuka kalian,tuangkan kreatifitas untuk membuat tab view ini lebih bagus.



Artikel Terkait:

11 komentar:

  1. Pertamaxx . . . .

    boss kalo ada yang butuh dokumentasi khusus daerah bandar lampung kesini ya boss, thank's.

    BalasHapus
  2. siap makasih atas pengetahuannya............

    BalasHapus
  3. izin sedot mas oktri,maksih untuk sharingnya, sukses sll buat mas oktri

    BalasHapus
  4. keren kang infonyah ..
    tutorialnya juga ongkeh banget (ok bgt .red)
    kalo tutorial buat bikin tampilan wajah jadi keren ada ga ya kang ?
    aahahahaa ..

    brjanda kang ..
    jangan TERSINGGUNG 6
    kan saiah mah suka brjanda .
    blog saiah juga blog brjanda . ;p

    kalo ada waktu maen atuh ke blog saiah kang ..
    tenang lah .. kopi-kopi doank mah ada .

    hhehee .
    yudiehartlaner.blogspot.com

    BalasHapus
  5. jiahh,,thanks banget.. walau ternyata di javascriptnya ada iklan terselubung,,

    cara promo blog yang keren,,

    BalasHapus
  6. @Fr3nz... ty..oke boss
    @aci smga membantu....!
    @q ingin bisa blogsharing mksh oom sudah mau berkomentar diblog sana yg udah lama ga keurus.....
    @Udiee cii Badudt Ndudd ea ea....
    ditunggu kunjungannya gi diblog ga keurus nie...
    @dy lc mksh jg dah mau berkomentar

    BalasHapus
  7. om saya udah bikin tuh menu ,.,
    tpi saya kga tau masukin/mindahin postingan saya,.,
    caranya gmna ya.,.,
    kirim lewat email saya y om nie emailnya
    a_qinz@yahoo.co.id

    BalasHapus
  8. broww,,yang ini maksudnya apa...??? teks diatas yg warna merah...
    thanks...

    "Disini letakkan kode untuk tab ... anda"

    BalasHapus
  9. koq gak jadi ????
    gw dah ngikutin dari awal sampai akhir

    BalasHapus
  10. berkunjung sahabat...sebenarnya ada juga tab view versi virtual pagination, mungkin akan lebih atraktif dan simpel. ok makasih atas tutornya semoga bermanfaat bagi yang lain.

    BalasHapus
  11. Gan , ane taro link . kok gk kaya di atas ?
    gk rapih , gmna supaya kaya di atas ?
    tolong ane gan .

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri