Cara Membuat Widget Multi Tab 3 Kolom Di Blog

Cara Membuat Widget Multi Tab tiga Kolom Di Sidebar. Sobat Blogger, sesudah gak update dua hari ini di karenakan ada pekerjaan di dunia nyata, sekarang saya ingin mebagikan artikel tentang cara membuat widget multi tab, seperti yang sudah kita ketahui widget multi berarti double, widget ini berarti dalam satu jajar sidebar bisa memuat 3 kolom widget sekaligus, dengan widget ini anda bisa menghemat ruangan sidebar anda tanpa harus panjang kebawah memakan ruangan di template anda.

Cara Membuat Widget Multi Tab 3 Kolom

Tampilan gambar di atas adalah contoh widget yang akan di buat, widget ini meskipun memuat tiga kolom, tapi widget ini juga sangat ringan untuk loading blog anda, saya sudah praktekan ini dan bekerja dengan baik, selain itu anda juga bisa merubah warna lebar dan nama widget ini, sangat mudah untuk di edit, sekarang bagi anda yang ingin membuatnya , silahkan ikuti tutorialnya.

Cara Membuat Widget Multi Tab Tiga Kolom Di Sidebar.
1. Buka akun blogger anda.
2. Pilih menu Template > Klik Edit Html.
3. Silahkan anda letakan kode di bawah ini tepat di atas kode ]]></b:skin> 


/*----- WMT Madam Via ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.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{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabOPH1WtnGSl40LNHSsZFdD5gqZJm5eMoxiM5zZ2rp83XLmJTYXHegfk8ll9sT9gh1jvs6xfD6m_WaFoHFCjBt3bSd_BDqPENvSWNaUiAXHKZc8xeSnLDFjrpFlEeSfhT5M9TkkI0k7E/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 27px;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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabOPH1WtnGSl40LNHSsZFdD5gqZJm5eMoxiM5zZ2rp83XLmJTYXHegfk8ll9sT9gh1jvs6xfD6m_WaFoHFCjBt3bSd_BDqPENvSWNaUiAXHKZc8xeSnLDFjrpFlEeSfhT5M9TkkI0k7E/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Selanjutnya silahkan anda letakan kode di bawah ini tepat di bawah kode  <div class='column-right-inner'> Kalo tidak ketemu bisa di bawah kode <div id='sidebar-wrapper'> ,kalo masih tidak ketemu juga anda bisa tanya di kolom komentar.

<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();

$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { 
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Populer</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Label</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Arsip</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/> 

5. Klik simpan Template anda, dan silahkan coba menambahkan widget anda.

Sobat blogger jika anda mengalami kendala dalam tutorial ini silahkan anda tanya di kolom komentar, karena menurut saya setiap kode template berbeda-beda.

Akhir kata : silahkan ucapkan Alhamdulillah.

43 Responses to "Cara Membuat Widget Multi Tab 3 Kolom Di Blog"

  1. Wah mas, saya belum buat tutornya tuh, nanti saya buatkan.. :) soalnya saya belum tahu juga yang di maksud.. :)

    BalasHapus
  2. Blog saya tidak ada terdapat kode column-right-inner dan sidebar wrapper, jadi harus pasang di mana ?

    BalasHapus
    Balasan
    1. saya sudah cek templatemu, skrg taruh kodenya di bawah kode ini, aside id='sidebar

      Hapus
    2. Lapor, saya sudah ikuti petunjuk agar memasang kodenya di bagian aside id='sidebar' tapi hasilnya nihil. Bisa kasih solusi ?

      Hapus
    3. Perhatkan setiap kodenya, saya sudah coba d template sama, bisa ko...

      Hapus
  3. makasih tutornya kawan
    http://acemaxs31.com/

    BalasHapus
  4. Keren sob artikelnya, ditunggu artikel yang lainnya
    http://goo.gl/HmEbth

    BalasHapus
  5. ilmu yang sangat bermanfaat sekali nih, terimakasih gan :)
    http://goo.gl/HD52m9

    BalasHapus
  6. ilmu yang sangat bermanfaat sekali, terimakasih jadi nambah wawasan :)
    http://goo.gl/ptxm6t

    BalasHapus
  7. tag div class='column-right-inner'> nya gak ktemu gan

    BalasHapus
  8. Bagaimana cara untuk masukkan widget?

    BalasHapus
  9. keren banget sob, artikelnya sangat membantu sekali
    Izin nyimaks aja sob :)
    http://goo.gl/VWOqxm

    BalasHapus
  10. wah gan keren banget nih, ane coba dulu

    BalasHapus
  11. div class='column-right-inner' dan div id='sidebar-wrapper' ga ketemu diblog saya. saya pake template kangmousir, bisa cek di http://mhinimize.blogspot.com/ . mohon bantuannya dong,.

    BalasHapus
  12. cara masang widgetnya gimana?? multi tab 3 kolomnya udh terpasang tapi widgetnya masih amburadul....
    mohon bantuannya '/\'

    BalasHapus
  13. Gimana cara ngilangan nama widget nya ya ? di tab populer kok di widget nya masih ada Popular Entri ya ? gimana ngilanginnya.

    BalasHapus
  14. sangat bermanfaat bro udah dicoba

    BalasHapus
  15. MANTAPPP ANJEGGG BERHASIL JUGA ...... THANKS THANKS THANKS ..... dah nyari kemana-mana tapi hasilnya gk ada... akhir nya nemu di sini dan BERHASIL :) :) Terimakasih min

    BalasHapus
  16. Cara link tab y gmana?? kok gk muncul di blogku?

    BalasHapus
  17. Gan ko tampilan di next page atau di post jadi berurut kebawah?.. gak satu satu munculnya?.. kira - kira ada script tambahan lagi gak?.. Terima kasih.....

    BalasHapus
  18. Bagi yg kesulitan menerapkan widget ini, berikut solusinya:

    Pada point no.4 bisa dipecah dua peletakan kodenya, pertama untuk kode java script-nya (<script type='text/javascript'> ... </script>) diletakan sebelum kode </head>, dan kedua untuk kode html-nya (<div class='tabviewsection'> ... </div>) diletakan pada Lay out - Add Gadget.

    ini sudah diterapkan diblog saya dan .... berhasil.

    BalasHapus
  19. makasih tutornya kaawan,,sudah saya terapkan di blog saya dan hasilnya baguss :D http://panduseo.blogspot.co.id/

    BalasHapus
  20. kode div class='column-right-inner' dan div id='sidebar-wrapper' gak ada di script tempaltenya madm jadi gi mana ?

    BalasHapus
  21. Dari 789 Artikel yang saya baca dan terapkan haha, cuma ini yang work ditemplate ane. Keren Nyonyah Madam, thanks tutorial..

    BalasHapus
  22. Di blog saya susah juga pasangnya,

    BalasHapus
  23. agak susah sob gk ketemu yang itu http://indohitznews.blogspot.co.id/

    BalasHapus
  24. di template saya kode column-right-inner dan sidebar wrapper gk ketemu gan ?

    BalasHapus
  25. Thanks so much, sebelumnya gak work di template ane karena belum pasang J-Query... Mungkin dicantumkan di postingannya, hehe

    BalasHapus
  26. Thanks Madam Oh iya buat sobat yang lagi nyari jodoh sudilah mampir disini http://kontakjodohgratis.blogspot.com

    BalasHapus
  27. the discussion was very interesting to read, awaited the article more interesting yes .. Do not forget to visit the article about the health of the following:

    http://carapemesananacemaxs.9kes.com/

    BalasHapus
  28. the discussion was very interesting to read, awaited the article more interesting yes .. Do not forget to visit the article about the health of the following:

    http://obat-alami.info/pengobatan-tradisional-gagal-ginjal/

    BalasHapus
  29. Setelah berulang kali mencoba teknik yang diberikan dari tempat lain dan selalu gagal kemudian akhirnya ketemu dengan blog madamvia. Sekali test langsung work. Mkasih madam.

    BalasHapus
  30. Cari div id='sidebar-wrapper' atau aside id='sidebar-wrapper' atau div class='column-right-inner' atau juga div class='sidebar-inner' Punya saya sukses

    BalasHapus
  31. sip mantap gan,,
    punya ane berhasil
    http://polosanmalang.blogspot.co.id/

    BalasHapus
  32. Kok malah jadi begini?
    Padahal semua sudah saya ikuti seperti anda loh..

    BalasHapus
  33. Saya mau coba tapi nunggu nanti saja , setelah pulang kerja , skrg lagi nyimak aja , sambil naruh jejak hehe.. terimakasih kawan ..

    Jika gak keberatan boleh berkunjung di blog saya itung2 silaturahmi :)

    Visit : seikokuananta,blogspot,com

    BalasHapus
  34. keren bro. Uda lama nyari juga hehe

    visit:mahasiswacikarang.blogspot.co.id/

    BalasHapus
  35. alhamdulillah makasih tutorialnya, cara mindah posisinya gimana ya, biar gak di paling atas, ini blognya http://sim-energi.blogspot.co.id

    BalasHapus
  36. mantap... saya udah praktekin berhasil..

    BalasHapus