Selasa, 27 November 2012

Cara membuat Tab View di sidebar blog Blogger

Baca Juga

Ass.
Pada Kesempatan Kali Ini Saya mau sedikit Share Cara membuat Tab View di sidebar blog Blogger, dan Mungkin Sudah Banyak master master blog yang Membahas Cara membuat Tab View di sidebar blog Blogger,, Tapi tidak papa lah...

Script ini dapat diedit dan disesuaikan dengan template blogger versi baru serta penerapannya yang tidak begitu rumit, mudah-mudahan anda akan menyukainya.  Style dari Multi Tabbed Widget seperti gambar di bawah ini



Dan Cara Pemasanganya


  •     Klik menu Template pada sisi kiri halaman, sebaiknya backup terlebih dahulu template anda lihat      artikel Cara Backup dan Restore Template Blogger

  •     Jika template sudah di backup, klik Template >> Edit HTML >> Proceed

  •     Cari kode ]]></b:skin>

    Copy kode dibawah ini dan paste diatas kode ]]></b:skin>





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


  • Sekarang cari kode <div id='sidebar-wrapper'> jika anda tidak menemukannya, hal ini karena setiap template memiliki kode HTM yang uniq dan mungkin berbeda dengan template yang saya gunakan, anda bisa mencari kode lain seperti ini <div class='column-right-outer'>

  •     Selanjutnya copy kode di bawah ini dan paste tepat di bawah kode tersebut di atas.


<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'>Tab-Wid-1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tab-Wid-2</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Tab-Wid-3</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;'/>



  • Simpan Template anda dengan menekan tombol Save dan periksa Layout blog pada Page Elements atau Halaman Tata Letak harusnya akan tampil seperti gambar di bawah ini







  •     Sebagai catatan anda dapat mengganti kode yang ditulis dengan warna biru dengan judul widget yang anda inginkan, gunakan judul widget yang pendek saja untuk menyesuaikan dengan lebar side bar blog.

  •     Langkah terakhir adalah tempatkan widget yang ingin anda tampilkan pada Multi Tabbed Widget, jangan lupa untuk menyimpan perubahan pada Layout blog dengan menekan tombol Save Arrangement yang terletak di pojok kanan atas halaman Layout

Sekian Semoga Bermanfaat dan Berhasil....

NB Bantu subscriber my Youtube Chanel ya = chanels top video top

Diposting Oleh : RIFANYTOP - Admin

Judul : Cara membuat Tab View di sidebar blog Blogger
Berisi tentang :
Dengan url https://rifanytop.blogspot.com/2012/11/cara-membuat-tab-view-di-sidebar-blog.html
By : RIFANYTOP - Silahkan Di Bagikan Jika sekiranya Bermanfaat, dilarang mengcopy Postingan Ini Tanpa Mencantumkan Link Sumber.


EmoticonEmoticon