Cara Mudah Membuat Widget Multi Tab Di Blog

Memang tidak ada salahnya memasang beragam widget di sidebar, tapi jika widget itu memenuhi blog, apa gunanya? yang ada malah membuat pengunjung blog pergi dari blog karena melihat tampilan blog yang terlalu banyak widget. Salah satu cara agar tetap mempunyai beragam widget tapi tidak membuat pengunjung pergi adalah dengan menempatkan pada satu tempat untuk beberapa widget. Itulah yang akan Web-Cyber posting kali ini. Web-Cyber akan memposting cara mudah membuat widget multi tab di blog. Langsung saja inilah caranya, cekiproot:

Login kedalam blogger.
Klik Template
Sebelum mengedit, ada baiknya membackup template sobat dulu (optional)
Edit HTML
Cari Kode ]]></b:skin> jika sudah letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi

Tambahkan kode dibawah ini tepat dibawah kode <div id='sidebar-wrapper'> jika tidak ada kode tersebut, sobat bisa cari kode yang berhubungan dengan sidebar

<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(".tabs-widget-content-tab").hide();
                $("ul.tabs-widget-tab li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-tab:first").show();
  
                $("ul.tabs-widget-tab li a").click(function() {
                    $("ul.tabs-widget-tab li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-tab").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-tab'>
<li><a href='#tab1'>Nama Tab1</a></li>
<li><a href='#tab2'>Nama tab2</a></li>
<li><a href='#tab3'>Nama Tab3</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                  
</div>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                    
</div>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                   
</div>
</div>
<div style='height:5px;clear:both;'/>

Jika sudah cari kode </head> , jika sudah ketemu, letakkan kode dibawah ini tepat diatas kode tadi

*Catatan : jika di template sobat sudah terdapat jquery, kode tersebut tidak usah dipasang

Ganti Nama Tab1, Nama Tab2, dan Nama Tab3 dengan nama widget sobat (agar sesuai)

Jika sudah, simpan template sobat
Pergi ke tata letak, disitu akan ada 3 elemen baru, sobat tinggal tambahkan gadget sesuai keinginan sobat. Jika sudah, sesuaikan nama widget sobat dengan Nama Tab tadi

Sekian tutorial kali ini, semoga berhasil sobat.. Salam

Title : Cara Mudah Membuat Widget Multi Tab Di Blog
Description : Memang tidak ada salahnya memasang beragam widget di sidebar, tapi jika widget itu memenuhi blog, apa gunanya? yang ada malah membuat pen...

Cara Mudah Membuat Widget Multi Tab Di Blog

Related Posts

2 Komentar Blogger