News Update :

30 November 2011

Cara Membuat Tab Content Mudah dan Simple

3 komentar
Salam Sobat Blogger semua semoga kabar baik semua..kali ini saya akan share Cara Membuat Tab Content yang Simple dan tak perlu Edit HTML yang menyebabkan error template kita dan anda juga harus secara manual dalam memasukkan isinya... caranya cukup mudah dan penggunaannya pun cukup mudah yaitu kita tinggal tambahkan pada gadget template.

Sebenarnya cukup banyak cara membuat Tab Content yaitu dengan jquery maupun css tapi saya share yang paling mudah dan simple.

Kelebihannya:

  1. Dapat mengakomodasi jumlah widget yang tidak terbatas
  2. Menjaga penampilan asli widget tab
  3. Sepenuhnya widgetized untuk kemudahan instalasi dan penghapusan. Jika Anda tidak menyukai apa yang dilakukannya, cukup menghapus gadget HTML / Javascript.

Caranya :

  1. Login ke akun Blog Anda
  2. Klik Rancangan -- Elemen Halaman -- Add Gadget -- HTML/Java Script
  3. Biarkan Judul Kosong
  4. Copy code berikut dan paste :

    <style type="text/css">
    .tabber {
    padding: 0px !important;
    border: 0 solid #bbb;
    }
    .tabber h2 {
    float: left;
    margin: 0 1px 0 0;
    font-size: 12px;
    padding: 3px 5px;
    border: 1px solid #bbb;
    margin-bottom: -1px; /*--Pull tab down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
    cursor:pointer;
    -moz-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
    background: #fff;
    border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
    border: 1px solid #bbb;
    padding: 10px;
    background: #fff;
    clear:both;
    margin:0;
    }
    .codewidget, #codeholder {
    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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#codeholder').bloggerTabber ({
    tabCount : 3
    });
    });
    </script>

    <!-- to make sure the widget works, do not alter the code below -->
    <div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>


    - tabCount : 3 == untuk menambah jumlah tab content
  5. Posisi gadget HTML / Javascript di atas gadget yang ingin Anda tabify
  6. Klik Save dan lihat blog anda
CATATAN

- Pastikan setiap Widget/gadget ada judulnya karena tabber tidak akan bekerja dengan baik tanpa judul
- Judul widget pendek saja
- Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" kesalahan dalam IE untuk beberapa non-desainer template. Jika itu terjadi, widget ini bukan untuk Anda

thank to: http://www.bloggersentral.com

Related Post Cara Membuat Tab Content Mudah dan Simple

+ komentar + 3 komentar

24 Januari 2012 13.27

thank you kang, info nya sangat membantu :D

Terimakasih wahidsetiawann atas Komentarnya di Cara Membuat Tab Content Mudah dan Simple
31 Januari 2012 18.19

I am very happy to see you here. Thanks for share your thought about blogging. And the best part of it, we all in the warmest community and find the greatest people like you, my friend. I am proud to be your friend here. God bless you.

Terimakasih zhi cun lee atas Komentarnya di Cara Membuat Tab Content Mudah dan Simple
10 Agustus 2012 22.25

thank you gan, and jgn lpa mampir di blog sy ne

Terimakasih kasmawan27 atas Komentarnya di Cara Membuat Tab Content Mudah dan Simple

Posting Komentar

silakan tinggalkan komentar anda, karena komentar anda sangat membantu membangun blog ini.No Spam No Porn.