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(http://2.bp.blogspot.com/-W_XatGRw65k/TeDn-AbzkMI/AAAAAAAAHLo/TijlQkRUbas/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(http://2.bp.blogspot.com/-W_XatGRw65k/TeDn-AbzkMI/AAAAAAAAHLo/TijlQkRUbas/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.

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

  1. bro gmna cara ngebuat tab tapi saat tabnya di klik kereload, cotohnya untuk tab video streaming...
    jadi saat di klik dia otomatis ke reload dan ada penambahan link juga misal awalnya strea.com/xxx/1 saat di klik tab baru kereload dan jadi strea.com/xxx/1/2

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

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

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

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

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

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

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

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

    ReplyDelete
  6. mantap dah artikelnya kawan
    http://bit.ly/1EelH4G

    ReplyDelete
  7. Keren sob artikelnya, izin nyimaknya :)
    http://goo.gl/n3Bp8g

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

    ReplyDelete
  9. tag div class='column-right-inner'> nya gak ktemu gan

    ReplyDelete
  10. Bagaimana cara untuk masukkan widget?

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

    ReplyDelete
  12. wah gan keren banget nih, ane coba dulu

    ReplyDelete
  13. terus klo udah masukinnya gmn gan? (misal entri populer)

    ReplyDelete
  14. 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,.

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

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

    ReplyDelete
  17. sangat bermanfaat bro udah dicoba

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

    ReplyDelete
  19. Cara link tab y gmana?? kok gk muncul di blogku?

    ReplyDelete
  20. 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.....

    ReplyDelete
  21. 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.

    ReplyDelete
  22. This post is amazing! Thanks for information.
    Feed back Please http://www.animesakuin.blogspot.com/
    Anime Sakuin | All About Anime

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

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

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

    ReplyDelete
  26. Di blog saya susah juga pasangnya,

    ReplyDelete
  27. agak susah sob gk ketemu yang itu http://indohitznews.blogspot.co.id/

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

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

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

    ReplyDelete
  31. 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/

    ReplyDelete
  32. 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://blogobattasik.com/cara-pemesanan-ace-maxs/

    ReplyDelete
  33. 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/

    ReplyDelete
  34. 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.

    ReplyDelete
  35. 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

    ReplyDelete
  36. sip mantap gan,,
    punya ane berhasil
    http://polosanmalang.blogspot.co.id/

    ReplyDelete
  37. Kok malah jadi begini?
    Padahal semua sudah saya ikuti seperti anda loh..

    ReplyDelete
  38. 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

    ReplyDelete
  39. keren bro. Uda lama nyari juga hehe

    visit:mahasiswacikarang.blogspot.co.id/

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

    ReplyDelete