Terbaru Multi Tab Widget untuk Blogger - Tabs dapat diedit !

Selamat pagi ! Selamat gi sekolah yer :)

Hari ni masih ada masa , saya nak buat tutorial .

Terbaru Multi Tab Widget untuk Blogger - Tabs dapat diedit !

Haa.. nampak tak yang ' About - Label - Archives ' ? Nampakan ? Itulah yang dimaksudkan Multi Tab Widget .
Kalau nak , ikut jer tutorial kat bawah ni .

1. Pergi ke Blogger - Tamplate - Edit HTML.

2. BACKUP TEMPLATE DULU ! - Sebagai langkah berjaga - jaga .

3. Cari ]]></b:skin> , guna CTRL+F untuk memudahkan pencarian.

/*----- MBT Multi Tabbed Widget ----*/
.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/AVvXsEiSeN0CnST8e2LqeMM6fqVMtHJB6pJaFQXuSGcT1ebBH-ikIC0V_bCRAt6QwW7W2qf6Sw_ObMBVRy7lq0kHFSbohn5p2QjGikcthUvoe6toXFyM3Yw_ssHH_nLH92J43j057QYwXxH4Snc/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;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/AVvXsEiSeN0CnST8e2LqeMM6fqVMtHJB6pJaFQXuSGcT1ebBH-ikIC0V_bCRAt6QwW7W2qf6Sw_ObMBVRy7lq0kHFSbohn5p2QjGikcthUvoe6toXFyM3Yw_ssHH_nLH92J43j057QYwXxH4Snc/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. Copy kod tersebut dan paste sebelum (di atas ) ]]></b:skin>

5.  Tunggu , tutorial kita belum habis lagi . Ikut lagi arahan di bawah ni .

6. Cari kod ini :

Bagi pengguna blogger template design . Gunakan kod ni :

 <div class='column-right-inner'>

Bagi pengguna template lain , sila guna kod ni :

<div id='sidebar-wrapper'>

7. Dapat cari tak kod di atas tu ? Kalau sudah dapat , copy kod di bawah ni .

<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'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</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;'/>

8. Pastekan kod tersebut di bawah  <div class='column-right-inner'> atau <div id='sidebar-wrapper'> .


9. Tukar kan About , Tags dan Archives kepada ayat korang sendiri .

JANGAN INGAT SUDAH HABIS . BELUM LAGI . Hehehe . Sabar yer .

10. Pergi ke Layout pula .

Akan nampak macam gambar kat bawah ni .

Ada tab 1 , tab 2 dan tab 3. Korang boleh letak apa - apa gadget jer.

p/s : panjangkan ? Hahaha.. selamat mencuba :)

Kalau jadi bagitahu yer, kalau tak menjadi pun bagitahu .