earth

Guestbook

/* Iklan google ads */
Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuat blog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widget dalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Lalu bagaimana cara membuat Tabview Section ini? Caranya gampang saja, kamu tinggal mengikuti langkah-langkah berikut. Kelihatannya memang ribet karena penjelasannya cukup panjang, tapi jika dipraktekkan akan terasa mudah. Coba saja...
Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman Dasbor, pilih Rancangan - Edit HTML.
  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Cari kode ]]></b:skin> (gunakan Control F atau F3).
  • Kopi CSS berikut lalu tempelkan (paste) di atas kode ]]></b:skin> tadi (sebaiknya diletakkan di bawah CSS untuk sidebar):
    /*-- Tabview Section -- */
    .tabs-widget {
    list-style:none;
    list-style-type:none;
    margin:0;
    padding:0;
    height:24px;
    border-bottom:1px solid #A4A4A4;
    }
    .tabs-widget li {
    list-style:none;
    list-style-type:none;
    margin:0 0 0 4px;
    padding:0;
    float:left;
    }
    .tabs-widget li:first-child {margin:0}
    .tabs-widget li a {
    background-color:#d4d4d4;
    color:#000;
    text-shadow:1px 1px 1px #fff;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    -moz-border-radius-topleft:7px;
    -moz-border-radius-topright:7px;
    -khtml-border-radius-topleft:7px;
    -khtml-border-radius-topright:7px;
    -webkit-border-top-left-radius:7px;
    -webkit-border-top-right-radius:7px;
    border-right: 2px solid #adadad;
    padding:5px 10px;
    display:block;
    text-decoration:none;
    font:bold 11px Arial,Helvetica,Sans-serif;
    text-transform:uppercase;
    }
    .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current {
    background-color:#A4A4A4; 
    color:#000;
    text-shadow:1px 1px 1px #fff;
    border-top-left-radius:7px;
    border-top-right-radius:7px;
    -moz-border-radius-topleft:7px;
    -moz-border-radius-topright:7px;
    -khtml-border-radius-topleft:7px;
    -khtml-border-radius-topright:7px;
    -webkit-border-top-left-radius:7px;
    -webkit-border-top-right-radius:7px;
    border-right: 2px solid #adadad;
    text-decoration:none;
    }
    .tabs-widget-content {margin-top:5px; background:#F4F4F4}
    .tabviewsection {margin:0 0 2px 0}
    
  • Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>.
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/>
    <script src='http://enes-sc.googlecode.com/files/tabsectionplugin.js' type='text/javascript'/>
    
    Catatan:
  • Bagi yang menggunakan frame work dari mootools, letakkan script tersebut di bawah script mootools.
  • Bagi yang menggunakan script jQuery, seperti pada perintah Top/Down Page, hapus salah satunya.
  • Kemudian cari kode untuk widget sidebar, seperti berikut:
    <b:section class='sidebar' id='sidebar1' preferred='yes'>
    
  • Setelah ketemu, kopi dan tempelkan script berikut di atasnya:
    <div class='tabviewsection'>
    
    <script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery(".tabs-widget-content_sc-01-id").hide();
        jQuery("ul.tabs-widget_sc-01-id li:first a").addClass("tabs-widget-current").show();
        jQuery(".tabs-widget-content_sc-01-id:first").show();
    
        jQuery("ul.tabs-widget_sc-01-id li a").click(function() {
              jQuery("ul.tabs-widget_sc-01-id li a").removeClass("tabs-widget-current a"); 
              jQuery(this).addClass("tabs-widget-current"); 
              jQuery(".tabs-widget-content_sc-01-id").hide(); 
        var activeTab = jQuery(this).attr("href"); 
        jQuery(activeTab).fadeIn();
              return false;
        });
    });
    </script>
    
    <ul class='tabs-widget tabs-widget_sc-01-id'>
    <li><a href='#widget_sc-01-id1'>Tabmenu 1</a></li>
    <li><a href='#widget_sc-01-id2'>Tabmenu 2</a></li>
    <li><a href='#widget_sc-01-id3'>Tabmenu 3</a></li>
    <li><a href='#widget_sc-01-id4'>Tabmenu 4</a></li>
    </ul>
    
    <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id1'>
    <b:section class='sidebar' id='sidebartab1' showaddelement='yes'>
    <b:widget id='HTML73' locked='false' title='' type='HTML'/>
    </b:section>                                       
    </div>       
    
    <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id2'>
    <b:section class='sidebar' id='sidebartab2' showaddelement='yes'>
    <b:widget id='HTML74' locked='false' title='' type='HTML'/>
    </b:section>                                         
    </div>       
    
    <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id3'>
    <b:section class='sidebar' id='sidebartab3' showaddelement='yes'>
    <b:widget id='HTML75' locked='false' title='' type='HTML'/>
    </b:section>                                        
    </div>
    
    <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id4'>
    <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
    <b:widget id='HTML76' locked='false' title='' type='HTML'/>
    </b:section>                                        
    </div>
    
    </div><!-- end tabviewsection -->
    <div style='clear:both;'/>
    
    Keterangan:
  • Ubahlah judul Tabmenu 1, Tabmenu 2, Tabmenu 3, dan Tabmenu 4 sesuai dengan judul menu yang diinginkan.
  • Jika sidebar blog kamu kecil, hapuslah salah satu Tabmenu dengan cara menghapus kode, misalnya Tabmenu4:
    <li><a href='#widget_sc-01-id4'>Tabmenu 4</a></li>
    
    dan kode:
    <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id4'>
    <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
    <b:widget id='HTML76' locked='false' title='' type='HTML'/>
    </b:section>
    </div>
    
  • Jika ingin mengubah Tabview ini menjadi toggle, ganti fadeIn() pada script jQuery dengan slideToggle("slow").
  • Jika ingin menambahkan, tambahkan kode-kode seperti pada cara penghapusan, hanya saja kamu harus mengubah id4 menjadi id5, id6, dst. Juga pada id='sidebartab4' harus diubah menjadi sidebartab5, sidebartab6, dst. Begitu juga pada id='HTML76' harus diubah menjadi HTML77, HTML78, dst.
  • Simpan hasil kerjaan kamu. Jika ingin melihat hasil sementara, lakukan pratinjau, hasilnya akan tampak seperti ini:
Langkah Kedua
  • Setelah disimpan, klik Elemen Laman
  • Perhatikan perubahan yang terjadi, seperti gambar berikut:

  • Edit atau masukkan widget-widget yang kamu kehendaki pada blok-blok Tabmenu yang ada.
    Catatan:
  • Pada setiap Blok Tabmenu, kamu bisa menambahkan lebih dari satu widget, termasuk yang non-HTML/JavaScript (bawaan blogger).
  • Jika ukuran tinggi widget pada setiap blok ingin berukuran sama, lakukan pengeditan pada HTML template. Caranya seperti membuat scrol pada bloglist, yaitu dengan mengubah kode:
  • <div class='widget-content'>
    
    menjadi:
    <div class='widget-content' style='overflow: auto; height: 250px'>
    
  • Jika sudah selesai, ucapkan alhamdulillah...

Ok, segitu aja informasinya, sob... Semoga bermanfaat...
Catatan Tambahan:
Jika kamu ingin membuat Tabview Section ini lebih dari satu, seperti pada blog ini, kamu tinggal mengkopikan script ketiga dan meletakkannya di tempat yang kamu inginkan. Hanya saja kode sc-01 harus kamu ubah menjadi sc-02, sc-03, dst. Juga kode id HTML-nya kamu ubah menjadi HTML77, HTML78, HTML79, HTML80, atau id HTML lain yang belum ada, misalnya HTML500, HTML501, dst.
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    33 komentar

    akhirnya aku bisa menjumpai lagi tutorial Akang disini rindu lihat header diatas, rasanya semngat saya balik lagi kawan blogger satu persatu aktif lagi

    19 Juni 2011 08.48  

    Untuk Tips dan infonya terimakasih sekali nich Kang, meskipun aku entah bisa nyobanya atua gak. Yang pasti save dulu boleh ya.

    20 Juni 2011 09.21  

    Kirain gak bakal posting tentang tabview section pa, tar mau dicoba. Kemaren sempet nyoba tapi gagal pa, makanya gak jadi. Makasih pa, mudah2an berhasil

    20 Juni 2011 12.43  

    cara bikin kode blog gmana ini bos

    21 Juni 2011 20.13  

    Oalah itu namanya trabview section to? hehehe... dulu aku pernah mau buat, tapi gak tahu 'sebutan'nya apa. Jadi waktu minta tolong cara membuatnya jadi gak jelas apa yang aku maksudkan hehehe

    21 Juni 2011 23.58  

    Aku pribadi tak bisa dengan mudah belajar hal2 spt di atas, tapi aku udah merasa tenang karena Kang Enes udah muncul lagi. Jadi jika sewaktu-waktu ada masalah, ada tempat utk bertanya (direpoti) lagi .. *maunya* hehehe

    22 Juni 2011 00.01  

    Wah, kren bro tutor, blog ente juga kren, salam kenal yah. oh iya banner bro dah kutarok di WP aku. makasih bro

    22 Juni 2011 15.27  

    Semakin mantab aja Kang Enes tutorialnya...heheh
    Ruang SC adalah rujukan wajib saya ketika mengutakatik blogspot :)) Biasa we, ku nuhun ah. Heheuh

    28 Juni 2011 16.20  

    Terimakash Kang..sangat membantu sekali tutorialnya :)

    28 Juni 2011 16.21  

    lanjutkan Kang Enes...maknyooss laah!!

    28 Juni 2011 16.22  

    mantaff kang tutorialnya...
    sekarang mulai banyak memposting jQuery...

    6 Juli 2011 19.40  

    wedew punya aq kok ga ada


    tolong....................

    12 Juli 2011 18.42  

    section class='sidebar' id='sidebar1' preferred='yes'

    bang di blog aq kok gak ada yak
    ada alternatif

    16 Juli 2011 16.55  

    keren mas bro...ijin pake scrptnya...

    8 September 2011 23.20  

    itu pada sidebar lalu bagaimana cara memindahkan ke header....??? mohon bantuannya..

    27 November 2011 14.12  

    trimakasih y,,sukses selalu kang

    4 Desember 2011 08.21  

    mantabs tippe nya mas brooo..blognya bisa buat panduan ngeblod..oke thankk.. yang mau nonton TV live dari penjuru dunia click aja http://upstv.blogspot.com/2011/05/al-jazeera-arabiya.html

    3 Januari 2012 19.11  

    "Bagi yang menggunakan frame work dari mootools, letakkan script tersebut di bawah script mootools."

    Ada conflict nie sama mootools.. .. tlong jelasin?

    11 Januari 2012 11.37  

    trs cara postingnya gmn kang klo sudah buat tabview

    4 Februari 2012 00.36  

    mantap nich, dicoba dulu dech,
    salam kenal sukses selalu

    12 Maret 2012 00.07  

    waduh repot juga nich pasang nya
    dicoba dulu dech

    28 Maret 2012 20.32  

    salam kenal, Thanks, sangat membantu............akhirnya blogku bisa lebih baik

    21 April 2012 13.47  

    bang klo ingin ukuran panjang tab-nya gimana..soalnya ane pengen dengan sidebar yg ukurannya normal tapi bisa muat 5 tab...

    19 Oktober 2013 17.56  

    @eNeS

    1 lagi, bisa ga tab" seperti itu saya buat di bwah blogpost. jdi seperti tambah widget jga dan posisinya di bwah blogpost...?

    klo bisa...mohon kasih penjelasannya bang..makasih.

    19 Oktober 2013 19.38  

    Mantab sob, tabview nya berhasil di blog aQ. thanks yach..

    26 Juni 2014 21.16  

    Alhamdulillah berhasil,, terimaksih Kang

    4 Desember 2014 18.40  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler