Jumat, 25 Maret 2011

Membuat tab view di blogspot


Tab view berfungsi meletakkan link, gambar atau apapaun juga terserah selera. Keuntungannya adalah menghemat space sidebar maupun postingan dengan membaginya memiliki kamar sendiri-sendiri yang akan tampil saat tombol tab di klik. Banyak sekali sebenarnya cara membuat tab view dan salah satunya dibawah ini.bagi yang berkenan silahkan ikuti langkah-langkah di bawah ini

Berikut cara-cara menambah tab view di blogspot:
  • Log in dulu ke blog anda
  • kemudian klik tata letak
  • klik Edit HTML
  • cari kode <head>
  • kemudian copy paste kode di bawah ini persis di bawa kode <head>
    <script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

  • kemudian cari kode ]]></b:skin>
  • Letakkan kode dibawah ini persis 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;}

  • kemudian simpan.
  • Kalau sudah disimpan templatenya tinggal memasang tabnya di elemen halaman, dengan menambah widget baru dan pilih html/javascript lalu masukkan kode dibawah ini
    <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>

  • Simpan dan jangan lupa masukkan kode script yang ingin anda tampilkan di teks yang berwarna merah
  • Sekarang liat hasilnya
Selamat Mencoba......
Diposting oleh M-xit di 21.30

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)