Langsung ke konten utama

Memasang Widget Multi Tab di Blogger

Baca Juga

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

Buka Komentar

Komentar

Dianriny mengatakan…
Komentar ini telah dihapus oleh administrator blog.
Unknown mengatakan…
Thanks infonya gan, sangat membantu :)
http://kedaiacemaxs.com/
terimakasih infonya sob
keren banget artikelnya gan
obat asam urat mengatakan…
makasih banyak infonya sob
Unknown mengatakan…
Happiness is having a large, loving, caring, close-knit family in another city.
- ICS Abn Telefoonnummer
Terimakasih Informasinya .....

Popular

2 Template Toko Online Blogspot Gratis Rasa Premium

Untuk me-review Template Toko Online yang pernah didesain ulang Tukang Toko Online, posting kali ini sengaja untuk memberikan sedikit informasi untuk pengunjung setia Tukang Toko Online yang mungkin sempat ketinggalan info mengenai template toko online gratis namun dengan rasa premium.Nah berikut ini adalah 2 template toko online blogspot gratis yang juga memiliki pilihan premium jika anda berniat untuk mendapatkan fitur tambahan yang lebih lengkap. Itulah mengapa ke dua template tersebut be-rasa premium. Anda bisa mengunduhnya secara gratis dari link kedua artikel template tersebut. Jangan lupa meninggalkan komentar berupa saran saran atau apapun demi perbaikan layanan template dari Tukang Toko Online.Berikut ini adalah informasi mengenai ke dua Template Tersebut.


tukutoko THEME
Live DemoDownload Fitur  Super Responsive / mobile firendlyWhatssApp OrderSMS OrderCall OrderHelp Desk widgetHotline button to WhatsApp, SMS & Phone CallSlide MenuRelated Product Postetc.Baca juga :Ngeblog da…

Toko Online Blogspot Super Responsive dengan tukutoko THEME

Template blogspot toko online baru ini dirancang dengan tampilan yang sederhana dan terfokus pada produk yang dijual. Dan yang terpenting adalah sengaja dirancang untuk memfokuskan pada berbagai fitur di tampilan mobilenya. Hal ini untuk menjawab penetrasi akses internet melalui mobile device (smartphone) yang sudah mencapai 80% lebih di Indonesia.Ya, tujuannya adalah untuk menggaet pembeli yang mengakses internet via ponsel karena pasar yang besar tersebut. Otomatis beberapa fitur yang disematkan pada template ini sebisa mungkin fitur-fiturnya juga sudah harus mendukung untuk tujuan tersebut.Sebelum membahas lebih jauh tentang berbagai fitur yang tersemat pada tukutoko THEME ini, sebaiknya Anda memeriksa dulu live demo templatenya, karena difokuskan untuk tampilan yang mobile friendly, Anda bisa mengeceknya melalui ponsel favorit Anda.
Baca juga : 
Template Gratis Download untuk Bisnis Wisata dan Agen TravelNgeblog dan Jualan dengan satu Template Toko Online Gratis ini LIVE DEMODOWNLOAD

Green Store Template untuk Toko Online Blogspot Nuansa Hijau

Template Toko Online Blogspotgratis serba hijau memiliki fitur desain responsive, slide show, dropdown menu, related post dan masih banyak lagi. Template Toko Online ini sangat sesuai untuk memajang berbagai produk herbal, pertanian, perkebunan ataupun produk ramah lingkungan. Template Toko Online Responsive ini tidak menutup kemungkinan juga bisa untuk produk lainnya yang bisa dipajang. Tergantung dari selera Anda sendiri.

Fitur selengkapnya silakan langsung cek di bawah ini. Template ini juga gratis untuk diunduh dengan catatan tidak menghapus footer credit note. Semoga bermanfaat..





Template Name : Green Store Author Maskolis Redesigned & Responsive Designed Tukang Toko Online Feature : Responsive designed, Slide Show, Grid style, Green Style, preview zoom thumbnail, etc. Platform : Blogspot/Blogger
License : Free Template, Free Download DownloadLIVE DEMO

Panduan Setting Template 1. Unzip Template yang sudah anda Download 2. Buka File Templatenya dengan notepad 3. Copy semua file script…
© Tukang Toko Online