Beranda » Tutorial Blog » 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 5091 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!

Cara Membuat Menu TabView dengan JQuery

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

Diposting oleh

Owner CV. Studio Web, sebuah perusahaan jasa pembuatan website SEO, jasa desain blog, google adwords, jasa SEO profesional. Hubungi CS Kami telpon/SMS/WA: 082310361484 (Puspa) untuk respon layanan cepat

2 Komentar untuk Cara Membuat Menu TabView dengan JQuery

a Artikel Terkait Cara Membuat Menu TabView dengan JQuery

cek ranking website di myserpchecker

Mau Cek Ranking Website Menggunakan WhatsMySerp? Begini Caranya

T 21 July 2017F , A Darmanto SEO

Kadang sebagai pemilik website, biasanya penasaran ingin cek ranking website untuk keyword yang diinginkan. Cek ranking web juga biasanya sering dilakukan dan ditanyakan oleh mereka yang sedang ikut kontes SEO atau sedang pesan seo website untuk keyword tertentu ke penyedia jasa... Selengkapnya

Cara Membuat Label Yang Di Klik Hanya Tampil Judulnya Saja.

Cara Membuat Label Yang Di Klik Hanya Tampil Judulnya Saja.

T 16 September 2012F A Darmanto SEO

Membuat label yang di klik hanya tampil judulnya saja adalah salah satu tips blog dan juga triks para blogger agar jumlah pageviews blog kita lebih banyak.Cara membuat label yang di klik hanya tampil judulnya saja juga bertujuan untuk memudahkan pengunjung... Selengkapnya

Cara menghilangkan Tulisan Home atau Beranda di Footer Blog

Cara menghilangkan Tulisan Home atau Beranda di Footer Blog

T 26 June 2011F A Darmanto SEO

Cara menghilangkan Tulisan Home atau Beranda di Footer Blog platform blogspot. Tutorial blog ini saya buat karena terkadang ada yang berpendapat tulisan Home atau beranda di footer blog,membuat kurang indah halaman blog. Oleh karena itu,kali ini saya akan memposting tutorial... Selengkapnya

+ SIDEBAR

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

Legalitas Usaha

CV. STUDIO WEB
SIUP: 503.9/192/KPPT/PMK/11-22/II/2015
TDP: 112236321645
Akta Notaris no. 01
Detail Legalitas Kami Klik disini

Alamat

Office:
Jl. Raya Gili Tugel – Kreo KM 1, Rt. 039 Rw. 005

Desa Cibuyur, Kec. Warungpring

Kab. Pemalang, Jawa Tengah,52358