.rbbox{border: 1px solid #D8D8D8;padding: 5px; background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: #EFFBEF;}

Menambah Widget Tab View

|



Cara menambah widget tab view untuk blogspot

Tab view adalah sebuah widget yang bisa digunakan untuk mengelompokkan informasi atau berita berdasarkan kategori yang di tentukan.
widget tab view ini sangat berguna, selain bisa menghemat space pada tampilan blog kita widget ini pun bermanfaat untuk mempermudah pengunjung blog untuk mencari informasi yang dibutuhkan.

untuk menambah widget tab view di blogspot seperti gambar diatas bisa menggunakan teknik-teknik berikut ini, cara menambah widget tab view ini sudah lama dipakai dan bila teman-teman blogger memiliki trik yang baru silahkan memberikan komentar pada posting ini.

langkah-langkahnya adalah sbb :

  1. masuk ke Edit HTML
  2. Copy script dibawah ini dan letakkan sebelum code ]]></b:skin>
  3. div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }

    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Menu Utama Atas */
    text-align: center;
    height: 24px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: &quot;Arial&quot;, Times New Roman, Serif; /* Font Menu Utama Atas */
    font-weight: 900;
    color: #000080; /* Warna Font Menu Utama Atas */
    }

    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #BDBDBD; /* Warna background Menu Utama Atas */
    }

    div.TabView div.Pages
    {
    clear: both;
    background-color: #FFFFFF; /* Warna background Kotak Utama */
    border: 1px solid #000000; /* Warna border Kotak Utama */
    overflow: hidden;
    }

    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }

    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
  4. berikutnya copy script dibawah ini dan letakkan sebelum code </head>
  5. <script type='text/javascript'>
    function tabview_aux(TabViewId, id)
    {
    var TabView = document.getElementById(TabViewId);

    // ----- Tabs -----

    var Tabs = TabView.firstChild;
    while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

    var Tab = Tabs.firstChild;
    var i = 0;

    do
    {
    if (Tab.tagName == "A")
    {
    i++;
    Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
    Tab.className = (i == id) ? "Active" : "";
    Tab.blur();
    }
    }
    while (Tab = Tab.nextSibling);

    // ----- Pages -----

    var Pages = TabView.firstChild;
    while (Pages.className != 'Pages') Pages = Pages.nextSibling;

    var Page = Pages.firstChild;
    var i = 0;

    do
    {
    if (Page.className == 'Page')
    {
    i++;
    if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
    Page.style.overflow = "auto";
    Page.style.display = (i == id) ? 'block' : 'none';
    }
    }
    while (Page = Page.nextSibling);
    }

    // ----- Functions -------------------------------------------------------------

    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

    function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
    </script>
  6. Simpan template anda
  7. masuk ke page element dan tambahkan gadget baru dengan tipe HTML/JAVASCRIPT
  8. letakkan code dibawah ini di gadget yang baru anda buat
  9. <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 350px; height: 250px;">

    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>

    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  10. simpan hasil editing anda
  11. letakkan widget baru anda di posisi yang telah anda tentukan
  12. untuk memberi Judul tinggal ganti saja teks "Tab 1" menjadi "Berita IT"
  13. sedangkan untuk membuat isi dari masing-masing tab tinggal mengganti teks Tab 1.1 dengan link, seperti contoh dibawah ini
  14. <ul><li><a href="http://arbakid.blogspot.com/2010/02/menambah-scroll-box-di-sidebar-blogspot.html">Tutorial scrol box</a></li>
  15. link silahkan disesuaikan dengan posting artikel anda
  16. lihat hasilnya
semoga informasi repost ini bisa bermanfaat







Add to GoogleShare

Posting terkait:

Please wait...

5 comments:

berontak otak mengatakan...

manteb gan langsung aku praktekin,,, heheheh blogku masih berantakan,,,

amirkhan mengatakan...

mas arba,saya mau nanya nie...cara membuat entri baru supaya tidak numpuk diatas postingan kita yang pertama gimana ya??contohnya kalo setiap ada yang klik di blognya mas arba,masih tetap berada di blog aslinya..contoh,www.arbakid.blogspot.com/2010/02/menambah-widget-tab--view.html gimana mas??
trims...oh ya kalo bisa kirim tutorialnya ke ahmilsaja@yahoo.com

admin mengatakan...

untuk amirkhan..boleh saya minta alamat blognya,,soalnya bingung ne baca pertanyaan agan...maap yah..

Cil's story mengatakan...

Mas Arba terima kasih info-nya tapi saya ada sedikit kesulitan...
setelah saya praktekkan semua info diatas, kenapa yah justru di bagian paling atas malah tertulis kode-kode html yang ditaruh sebelum
minta petunjuk y mas...

admin mengatakan...

ada salah satu caracter dari penutup script blogger yang terhapus,,periksa skrip pembuka dan penutupnya apkah masih ada atau terhapus