Cara membuat Tab View di sidebar blog Blogger

Cara membuat Tab View di sidebar blog Blogger dengan url http://rifanytop.blogspot.com/2012/11/cara-membuat-tab-view-di-sidebar-blog.html yang ditulis oleh RIFANYTOP berisi tentang :

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

Ditulis Oleh : Arif Rifany ~ Produsen Mesin Bata Press

Produsen Mesin Bata Press Anda sedang membaca artikel berjudul Cara membuat Tab View di sidebar blog Blogger dengan url http://rifanytop.blogspot.com/2012/11/cara-membuat-tab-view-di-sidebar-blog.html yang ditulis oleh RIFANYTOP yang berisi tentang : Dan Maaf, Anda tidak diperbolehkan mengcopy paste artikel ini.Silahkan Dibagikan Jika Sekiranya Bermanfaat...

BAGIKAN KE :

0 Komentar Untuk "Cara membuat Tab View di sidebar blog Blogger"

Poskan Komentar