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

    Apa Itu PKM (Program Kreativitas Mahasiswa) dan Jenisnya

    Oleh
    Pengertian PKM (Program Kreativitas Mahasiswa) Apa itu PKM? PKM adalah singkatan dari Program Kreativitas Mahasiswa yang diselenggarakan oleh Dikti guna memberi ruang untuk para Mahasiswa menunjukkan kreativitasnya. PKM merupakan salah satu bentuk upaya yang dilakukan Direktorat Penelitian dan Pengabdian kepada Masyarakat (DP2M), Ditjen Dikti dalam meningkatkan kualitas peserta didik (mahasiswa) di perguruan tinggi agar kelak dapat menjadi anggota masyarakat yang memiliki kemampuan akademis dan atau profesional yang dapat menerapkan, mengembangkan dan meyebarluaskan ilmu pengetahuan, teknologi dan atau kesenian serta memperkaya budaya nasional. Sejarah PKM PKM dilaksanakan pertama kali pada tahun 2001, yaitu setelah dilaksanakannya program restrukturisasi di lingkungan Ditjen Dikti. Kegiatan pendidikan , penelitian dan pengabdian kepada masyarakat yang selama ini sarat dengan partisipasi aktif mahasiswa, diintegrasikan ke dalam satu wahana yang diberi nama Progra...
    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