AllStars Celebrity's

Salam persahabatan,  kali ini share tentang  membuat menu tab view versi 3. Untuk penampilan menu tab view ini lebih menarik dibandingkan dengan versi sebelumnya dan sobat bisa melihat tampilannya  pada blog ini
Untuk mengetahui cara memasangnya pada blog,  mari kita ikuti tutorial berikut ini :

Seperti biasa sobat login dahulu keblogger



Kemudian pilih tab Design >> Edit HTML

Setelah itu cari kode ]]></b:skin>

Copy dan pastekan kode di bawah ini tepat di atas kode tadi

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.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:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTo0QhaSUX5VqHIpWVco4O9UqCG-hU5FOG_5Achn0tBB5UAQ7y73YxVAL8grPUBwGWcV_gSXFTk9PJcXn2qokSA7zw5GUCDqWo-rnykRYmGOeVH_ks-Sz8lT0zDuYqLuSeie-7749ukXk/s1600/tabs-bg.png) left top repeat-x;padding:5px 10px;font-family:Arial,Helvetica,Sans-serif;font-weight:normal;display:block;text-decoration:none;font-size:12px;-moz-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTo0QhaSUX5VqHIpWVco4O9UqCG-hU5FOG_5Achn0tBB5UAQ7y73YxVAL8grPUBwGWcV_gSXFTk9PJcXn2qokSA7zw5GUCDqWo-rnykRYmGOeVH_ks-Sz8lT0zDuYqLuSeie-7749ukXk/s1600/tabs-bg.png) left -126px repeat-x;color:#fff;text-decoration:none}
.tabs-widget-content{background:#fff;}
.tabviewsection{margin-top:10px;margin-bottom:2px;}

Setelah itu tambah kode di bawah ini tepat di bawah kode ]]></b:skin>

<script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar1&quot;;
    </script>
<script src='http://andreas-jquery.googlecode.com/files/jquery-1.4.1.min.js' type='text/javascript'/>

Kemudian cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>

Dan pastekan kode di bawah ini tepat di atas kode tadi

<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'>Videos</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog 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'/>                                      
</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'/>                                        
</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'/>                                       
</div>

</div>

Ganti tulisan berwarna merah dan sesuaikan dengan judul widget sobat

Simpan template sobat dan lihat hasilnya

Menjawab pertanyaan dari sobat  Arhy tentang memberi script pada menu tab view ini.
 
Setelah sobat mempastekan kode script pada template sobat, kemudian sobat pilih tab Design dan tampilannya seperti gambar yang di bawah ini





Cara menambahkan scriptnya sama seperti sobat menambahkan gadget saja
 

Selamat mencoba semoga berhasil