Home » » Membuat tab view di blogspot

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
Share this article :

0 komentar:

Posting Komentar

Bisnis Dahsyat tanpa modal
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2013. free - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger