Memasang Multi Tabbed di Blogger

Yang ingin menggunakan banyak widget pasti sangat membutuhkan Multi Tab yang berfungsi untuk menghemat daerah sidebar.

Memasang Multi Tabbed Widget

1. Pergi ke Blogger.
2. Pilih Template, Edit HTML.
3. Cari ]]></b:skin>.
4. Letakkan CSS berikut di atas code ]]></b:skin>.

/* 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/AVvXsEgZZ8a7UTg1HHqauslpsQjrPy510ezbKSB9fl0PtcKrEBGRomDRJ6xgwTXyZrQnSk0NBlRSpSqywFjJ-ttHPvfY4QVI3bQyVG9SmgNCK0fHAcv49gTGOjLzv2-5ZgxVeQ93nnNUdRuqK9k/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/AVvXsEgZZ8a7UTg1HHqauslpsQjrPy510ezbKSB9fl0PtcKrEBGRomDRJ6xgwTXyZrQnSk0NBlRSpSqywFjJ-ttHPvfY4QVI3bQyVG9SmgNCK0fHAcv49gTGOjLzv2-5ZgxVeQ93nnNUdRuqK9k/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none} 
.tabs-widget-content{} 
.tabviewsection{margin-top:10px;margin-bottom:10px;}

5. Di langkah ini, Anda harus berhati-hati karena di setiap template memiliki code id yang berbeda. Anda bisa mendapatkan code id dengan inspect element. Anda jangan kawatir jika tidak mengetahui code id nya dan Anda bisa meninggalkan URL BLOG Anda di formulir komentar.

Untuk Template Default, mungkin Anda bisa menemukan code berikut:

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

Atau yang ini:

<div id='sidebar-wrapper'>

6. Lalu letakkan code berikut di atas code di atas/yang Anda temukan.

<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'>Connect</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id3'>Followers</a></li>
<li><a href='#widget-themater_tabs-1432447472-id4'>Archive</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 class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'> 
<b:section class='sidebar' id='sidebartab4' preferred='yes'> 
</b:section>                                        
</div>
</div>
<div style='height:5px;clear:both;'/>

Ganti About, Connect, Followers dan Archive dengan judul widget Anda
7. Sekarang pergi ke Tata Letak dan Anda akan melihat seperti gambar berikut:

8. Dan sekarang silahkan Anda Tambahkan Widget.

Share This :