Memasang Widget Multi Tab di Blogger

6/09/2012

Menu-Tabs-WidgetWidget di sidebar dari blog dengan wordpress bisa didesain dengan sangat baik sehingga bisa memberikan tampilan yangbisa menghemat tempat juga. Misalnya widget dengan sidebar yang memiliki beberapa tab (multitab), contohnya seperti pada gambar di samping, yang terlihat ada beberapa Tab (subcribe, latest tricks search). Anda bisa melihat hasilnya dari multi tab widget tersebut dari Live Demo di bawah ini.

Live Demo

Namun jangan takut jika anda pengguna setia blogger, tampilan seperti ini pun bisa dipakai pada template blogger. Dengan menambahkan beberapa kode CSS dan Jquery. Saya akan mencoba membuat tutorial proses instalasinya semudah mungkin sehingga bagi pemula pun masih bisa mengikutinya.

Tutorial menambahkan Widget Multi Tab ke Blogger

Ada 3 langkah yang harus dilakukan,

  1. Menambahkan JQuery dan JavaScript ke template Blogger anda
  2. Menambahkan kode CSS
  3. Menambahkan kode HTML


langkah 1- Menambahkan JQuery dan JavaScript ke template Blogger Anda

  1. Menuju ke Blogger > Template > Edit HTML
  2. Jangan lupa Backup templateanda dahulu
  3. Cari kode  ]]></b:skin> (gunakan bantuan Ctrl+F pada browser)
  4. Tepat di bawah kode tersebut, paste paste kode berikut ini –> TTO Menu Tabs JavaScript
  5. Simpan template Anda
  6. Selesai
Langkah 2- Menambahkan kode CSS
  1. Masih di HTML templatecari kode berikut ]]></b:skin> lagi
  2. Tepat di atas kode tersebut paste kode di bawah ini:
/*---- Wordpress Style MBT Menu Tabs----*/
.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}
Anda bisa mengganti kode warna #A46F38 dengan kode  kode warna HexaDecimal dari template anda sehingga tab bisa terlihat lebih sesuai dan sempurna menyatu dengan template anda.
Langkah 3- Menambahkan kode HTML
  1. Masih di bagian HTML Template, cari kode berikut <div id='sidebar-wrapper'>
  2. Jangan centang expand widget template.
  3. tepat sebelum kode <div id='sidebar-wrapper'> paste kode di bawah ini,
<div class='MBT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                      
</div>   
<div style='clear:both;'/>                       
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                        
</div>   
                       
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>
</div>
<div style='clear:both;'/>

Keterangan: anda bisa mengganti Subscribe, Latest Tricks dan Search dengan Judul Widget yang anda inginkan.




Simpan Template
  

 Langkah 4 (tambahan).  Sekarang menuju ke Page Elements/tata letak. Anda akan melihat tampilan seperti di bawah ini,
Blogger-Page-Elements Menu tabsSekarang anda bisa menambahkan widge, lalu lihat hasilnya..


Kalau semua langkah sudah anda lakukan dengan benar dan tidak ada crash antar script, seharusnya multitab widget sudah bisa muncul di blog anda.

Selamat mencoba 


sumber

All posts here about online store, tips, tricks, SEO, Store Service, store builder with Blogspot, Wordpress or Opencart.
Contact me if You need help or more question about service. Enjoy reading.....

Artikel Terkait

Previous
Next Post »

9 komentar

Write komentar
Dianriny
AUTHOR
29 Juni 2012 15.51 delete Komentar ini telah dihapus oleh administrator blog.
avatar
kedai acemaxs
AUTHOR
26 Februari 2015 09.55 delete

Thanks infonya gan, sangat membantu :)
http://kedaiacemaxs.com/

Reply
avatar
28 Maret 2015 10.30 delete

makasih banyak infonya sob

Reply
avatar
H Max
AUTHOR
6 April 2015 18.47 delete

Happiness is having a large, loving, caring, close-knit family in another city.
- ICS Abn Telefoonnummer

Reply
avatar

#/ Dilarang melakukan SPAM.
#/ Dilarang Komentar mengandung Link/URL di kolom komentar
#/ Dilarang Komentar SARA dan Makian
#/ Dilarang ngiklan
Melanggar ketentuan di atas, komentar langsung dihapus..!!!
Emoticon