Membuat tab view di blogspot - Kusnadi Komputer
Hi quest ,  welcome  |  sign in  |  registered now  |  need help ?
  • Tujuan dari Yayasan Sasmita Jaya adalah mewujudkan suatu sarana pendidikan yang murah dan terjangkau oleh seluruh lapisan masyarakat tanpa melupakan kualitas dari pendidikan itu sendiri
  • SMK yang memiliki kesetaraan dalam Ilmu dan Teknologi, Mampu bekerja, Ber-akhlak mulia, dan selalu Ikhlas dalam Pengabdian.
  • Layanan Hosting serta desain website, sehingga akan menjadi sebuah solusi lengkap untuk kebutuhan website bisnis anda.
  • Sajikan saat hangat dengan secangkir teh, saya percaya, Anda akan mendapat pujian dari keluarga tercinta. Selamat Mencoba.
  • Wujudkan impian anda untuk segera HAMIL.
  • Hanya dengan satu akses untuk pencarian dari 47.732.098 pekerjaan yang dipublikasikan oleh 70.845 situs di dunia

Minggu, 19 Juni 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 Unknown di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)