Cara Membuat Widget Multi Tab 3 Kolom Di Blog

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.

Bagikan Ke
47 Komentar untuk "Cara Membuat Widget Multi Tab 3 Kolom Di Blog"

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

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

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

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

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

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

makasih tutornya kawan
http://acemaxs31.com/

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

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

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

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

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

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

Bagaimana cara untuk masukkan widget?

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

wah gan keren banget nih, ane coba dulu

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

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

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

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

sangat bermanfaat bro udah dicoba

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

Cara link tab y gmana?? kok gk muncul di blogku?

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

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.

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

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

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

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

Di blog saya susah juga pasangnya,

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

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

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

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

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/

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/

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/

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.

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

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

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

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

keren bro. Uda lama nyari juga hehe

visit:mahasiswacikarang.blogspot.co.id/

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