cara pasang tab view sidebar

Sahabat- pada hari sabtu ini anna mau berbagi cara membuat atau memasang tab view sidebar dengan mudah. ini bisa bermanfaat buat sahabat yang lagi galau untuk menghiasi blognya.ini salah satu mungkin bisa bermanfaat sahabat,ya sekarang sudah banyak penyedia tample gratis yang sudah menggunakan tab view.
ana sih yang gambang gampang ajja sahabat.yang g mau ribet-ribet .
langsung ajja sahabat  tamplate blog sahabat setelah itu ediet HTML.
sudah sahabat smpai disini.Lanjut berikutnya
cari kode <b:skin>..</b:skin> setelah ketemu langsung ajja klik
dan letakan kode di bawah ini tepat di dalamnya. atau di atas kode ]]></b:skin>

BACA JUGA:cara membuat breaking news dengan ticker

.main .Blog { border-bottom-width: 0; }
.widget-wrapper2{border:1px solid #494e52;background-color:#636d76;padding:10px}
.widget-tab{background:#e9e9e9;font-family:Arial,Helvetica,sans-serif;padding:5px!important}
.widget-tab ul{margin:0;padding:0 5px}
.widget-tab ul li{list-style:none;border-bottom:1px dotted #a4bddf;padding-top:4px;padding-bottom:4px;font-size:12px}
.widget-tab ul li:last-child{border-bottom:none}
.widget-tab ul li a{text-decoration:none;color:#3e4346}
.widget-tab ul li a small{color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0}

BACA JUGA:archive

.tab-content ul li a:hover{color:#a59c83}
.tab-content ul li a:hover small{color:#baae8e}
.active-tab{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmaJ5KXrI8ptucdLG2gzlPhDrrxNLliB9Ytt_3ycyXcW47Lb-7HOj-TlWse4j8GbQ_sxycZGW8NDjMFrJOlhWqZs5tKYSTO-EAGAXSGSD9QBzBkCovKFccEVwbSYJIKJXtUmGSnvb5dhU/s1600/sidebar.png) repeat-x scroll left bottom!important;color:#282E32!important}
ul.tab-wrapper{margin:5px 0 6px;padding:0}
ul.tab-wrapper li{background:#aaa;color:#FFF;cursor:pointer;display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9px;font-weight:700;line-height:2em;list-style-image:none!important;list-style-position:outside!important;list-style-type:none!important;margin-right:1px;text-align:center;text-decoration:none;text-transform:uppercase;padding:8px 14px}

BACA JUGA:cara gambar berputar 360 derajat

setelah itu sahabat  cari kode </head> dan letakan kode di bawah initepat di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var starttab=0;
var endtab=3; //JUMLAH UNTUK KOLOM TAB VIEW

BACA JUGA:tag coul pilihan

var sidebarname=&quot;sidebar&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("widget-tab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .widget-tab").slideUp();$jtab1("#widg"+$jtab1(this).attr("id")).slideDown();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});
//]]>
</script>

selesai deh silahkan sahabat lihat hasilnya.