Beranda » Uncategorized » Cara Membuat Menu TabView dengan JQuery

Cara Membuat Menu TabView dengan JQuery

T Diposting oleh pada 11 May 2012
F Kategori
b 2 komentar
@ Dilihat 355 kali
Cara Membuat Menu TabView dengan JQuery.Setelah catatan membuat menu multi tab kemarin saya bagikan,pada catatan saya kali ini akan dilanjut dengan membuat multi TabView pada blog namun dengan Jquery. Membuat tab view dengan Jquery lebih mudah ngga seperti membuat tab view yang kemarin saya bagikan itu.

Tabview pada blog yang satu ini berbeda dengan tabview yang lainya, karena dengan menggunakan script ini, maka beberapa widget kamu akan secara otomatis ada di menu  tabview, Perhatikan  gambar dibawah ini dulu!

  

Pada bagian yang bertuliskan HTML/JavaScript,disitulah nanti sobat pasang kode scriptnya.Pada Tulisan Terpopuler,Kategori, Terkomentari,itu adalah menu-menu yang nantinya akan membentuk Tabview.Untuk lebih jelas dalam pembuatannya, ikuti langkah-langkah berikut ini:

  1. Login ke blogger kamu
  2. Klik rancangan atau design
  3. Klik edit html
  4. Expand template kamu dengan memberi centang di kotak pojok template editor kamu.
  5. Cari kode </head> dan letakkan kode berikut di atas kode </head>

    <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>

  6. Sekarang sobat tambahkan widget baru, letakkan paling atas dari beberapa widget yang akan sobat jadikan tabview seperti penjelasan dan gambar diatas, copy dan paste kode berikut!

    <style type=”text/css”>
    .blogtabs {padding: 0px !important;border: 0 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://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(‘#showtabs’).simpleBlogTab ({organictabs: 3});
    });
    </script>
    <div id=”showtabs”></div>

  7. Lalu simpan. 

Perhatikan 3 widget dibawah widget kode tabwiew pada gambar diatas, dan lihat hasilnya, maka 3 widget dibawahnya yang saya ambil contoh dengan menu Terpopuler,Kategori,Terkomentari akan terkumpul secara otomatis.
Ok sobat Darmanto semua,begitulah cara membuat menu tabview dengan JQuery yang bisa saya bagikan pada catatan saya ini.Semoga dengan menu tabview JQuery ini,sobat lebih mudah dalam membuat Tabview.
Sumber kode script:http://infonetmu.blogspot.com

2 Komentar untuk Cara Membuat Menu TabView dengan JQuery

a Artikel Terkait Cara Membuat Menu TabView dengan JQuery

Muslim AS bertambah setiap hari

T 22 July 2012F A admin

Alhamdulillah,mungkin hidayah terus datang kepada para warga AS.Nyaris setiap hari Muslim AS mendapat perlakuan diskriminatif. Namun, hikmah dibalik perlakuan itu setiap harinya warga AS memeluk Islam. Hal itu diungkap Pendiri Pesantren Mualaf Annaba Center, Syamsul Arifin Nababan, saat bercerita tentang... Selengkapnya

Iklan Teks Diperluas, Fitur Baru Untuk Pengguna Google Adwords

T 8 August 2016F A admin

Kabar baik untuk para pengguna layanan google adword. Baru-baru ini google mengumumkan fitur tambahan yaitu “Iklan Teks Diperluas (Expanded Text Ads)”. Apa itu Expanded Text Ads (ETA)? Expanded Text Ads (ETA) adalah rupa iklan terbaru untuk kampanye penelusuran para pengguna iklan... Selengkapnya

Cara Menganalisa Meta Tag Agar Lebih SEO

Cara Menganalisa Meta Tag Agar Lebih SEO

T 4 August 2012F A admin

Salah satu Tips SEO kali ini akan kembali Jasa SEO Murah bagikan buat para pemburu Tips SEO.Tips SEO kali ini mengenai Cara menganalisa Meta tag.Meta Tag yang kita buat hatus di analisa setiap kali kita membuat meta.Apakah meta tag yang... Selengkapnya

+ SIDEBAR
tempat belajar seo

Ada Pertanyaan? Silahkan hubungi customer service kami untuk mendapatkan informasi lebih lengkap mengenai jasa/produk kami.