Cara Membuat Menu TabView Di Blog dengan Mudah Skip to main content

Cara Membuat Menu TabView Di Blog dengan Mudah

Oleh

Cara Membuat Menu TabView Di Blog

Cara Membuat Menu TabView Di Blog
Cara membuat Menu TabView di blog memang sangat mudah. Menu Tab View ini sebenarnya diadaptasi dari Worpress. Dengan ukuran yang kecil, Menu Tab View dapat menghemat banyak tempat dan bisa memuat banyak ruang. Selain menghemat tempat, Menu Tab View juga berguna untuk mempercantik tampilan blog.

OK, jadi kali ini saya akan bahas 2 model untuk membuat menu Tab View..

1. Cara Membuat Menu Tab View Di Blog

Menu Tab View yang akan kita bahas kali ini adalah yang memakai JQuery, pemasangannya pun sangat simple dan praktis, tanpa edit HTML template yang membingungkan para pemula. Anda cukup menambah satu widget untuk dipasang kode Menu Tab View ini.

Logika pemasangan Menu Tab View itu seperti ini. Tiga widget yang berada dibawah kode Menu Tab View akan menjadi isi dari Tab.

Metode pemasangan Menu TabView

OK, jadi mari kita bahas cara membuatnya..
  • Login ke akun Blogger anda
  • Masuk ke menu Tata Letak
  • Silahkan klik Tambah Gadget, kemudian pilih HTML/Java Script
  • Masukkan kode dibawah ini
<style type="text/css">
.blogtabs {padding: 0px !important;border: 1px solid #bbb;}

.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}html .blogtabs h2.active {background: #fff;}.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}.btab, 

#showtabs {display:none;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<script type="text/javascript" src="http://bloggergubug.googlecode.com/files/tabviewjquery.js"></script><script type="text/javascript">$(document).ready(function() {$('#showtabs').simpleBlogTab ({organictabs: 3});});
</script>
<div id="showtabs">
</div>
    • Klik Simpan tanpa diberi nama
    • Untuk mengisi Tab, silahkan letakkan widget yang akan dijadikan Tab dibawah widget yang memakai kode diatas tadi.
    • Anda juga bisa mengatur jumlah Tab dengan mengubah angka yang diberi background warna kuning, silahkan ubah angka 3 dengan jumlah Tab sesuka anda.
    Untuk tinggi, lebar, warna, dan lain-lain, silahkan sesuaikan sendiri dengan keinginan anda.


    source
    Label:

    Comments

    Post a Comment

    Silahkan berkomentar!!!

    Popular posts from this blog

    Kode Emotion Facebook Terlengkap

    Oleh
    Bagi teman-teman yang sering chattingan dengan facebook pasti sudah gak asing lagi dengan kode emoticon di bawah ini. Tapi , disini emoticon nya unik dan lucu lho. Mau tau apa kode emoticon nya . Langsung meluncur ke TKP Gan . (ingat! kode-kode ini hanya bisa digunakan di chatting facebook)  KODE SMILE FACEBOOK CHAT STANDART  Kode Emotion Facebook Terbaru 2012 [[334954663181745]] – Kode Emotion Facebook untuk Spongebob [[332936966718584]] – Kode Emotion Facebook Hello Kitty [[326134990738733]] – Kode Emotion Facebook Pikachu [[297354436976262]] – Kode Emotion Facebook Santa Claus [[269153023141273]] – Kode Emotion Facebook Poring [[252497564817075]] – Kode Emotion Facebook Kerokeroppi [[250128751720149]] – Kode Emotion Facebook Domo Kun [[249199828481201]] – Kode Emotion Facebook Konata Izumi [[236147243124900]] – Kode Emotion Facebook Pokeball [[224502284290679]] – Kode Emotion Facebook Nobita [[223328504409723]] – Kode Emotion Facebook G...
    Post a Comment
    Read more

    Alamat Sekolah SD / SMP / SMA di Kota Kediri

    Oleh
    Inilah daftar Sekolah di Kediri: 1 MIN BANDAR KIDUL Jl. Agus Salim Gg VIII NO 32 A 2 MIN SEMAMPIR Jl. Mayor Bismo 67 B 3 SD Islah Terpadu Al-Azhar Jl. Tamansari Gg. Masjid Nurul Huda, Kel. Tamanan, Kec. Mojoroto 4 SDN 2 DANDANGAN Jl. Singosari 10 B 5 SDN BALOWERTI 1 KEDIRI Jl. Balowerti I/2 Kediri 6 SDN BALOWERTI 2 KEDIRI Jl. Balowerti V/15 Kediri 7 SDN BALOWERTI 3 KEDIRI Jln. Balowerti V/9 Kediri 8 SDN BANARAN I JL. BANARAN 46 B KEDIRI 9 SDN BANARAN II JL. BANARAN 46 B KOTA KEDIRI 10 SDN BANDAR KIDUL 1 KEDIRI Jl. KH. Wackhid Hasyim 190 11 SDN BANDAR KIDUL 2 KEDIRI Jl. Penangungan IV C/18 Kediri 12 SDN BANDAR KIDUL 3 KEDIRI Jl. Penangungan IV/10 13 SDN BANDAR LOR 1 KEDIRI Jl. KH. Wachid Hasyim VB/59 Kediri 14 SDN BANDAR LOR 2 KEDIRI Jl. KH. Wachid Hasyim VB No. 56 Kediri 15 ...
    Post a Comment
    Read more

    Test Apakah Kamu Seorang Psikopat???

    Oleh
    Nah, pernah kan melihat cerita2 tentang para pembunuh berantai yang supersadis. Nah, mereka bisa digolongkan sebagai psikopat. Di Amerika, ternyata ada tes yang dikembangkan oleh para psikiater untuk menguji apakah seseorang adalah pembunuh berantai atau bukan. Tes ini konon sukses diujikan pada pembunuh berantai terkenal Ted Bundy (yang konon bahkan bisa lolos dari tes detektor kebohongan,,,hiiiy serem). Nah, ternyata tes2 ini nggak dibeberin untuk umum dan aku hanya berhasil mendapatkan 4 pertanyaan saja dari internet. Ada dua versi jawaban dari tiap pertanyaan, yaitu jawaban yang umumnya akan diberikan oleh orang normal pada umumnya dan ada pula jawaban versi psikopat yang sangat mengerikan. Siap, 4 pertanyaan itu adalah .... 1. Ada seorang anak yang mendapat hadiah ulang tahun berupa sepeda dan sepatu bola (ada versi yang menyebutkan bola sepak). Namun ia membencinya. Kenapa? 2. Ada dua orang wanita bersaudara, Bertha dan Martha. Suatu hari ibu mereka meninggal dan pada h...
    Post a Comment
    Read more