Login Ke Blogger
Pilih Rancangan > Edit Html > centang "Expand Widget Template"
Kemudian Letakkan kode berikut diatas kode ]]></b:skin>
#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}
Selanjutnya Letakkan kode berikut ini diatas kode </body>
<script type='text/javascript'>$(document).ready(function(){$('#tabdua, #tabtiga').hide();$("ul.slick li").click(function () {$(".active").removeClass("active");$(this).addClass("active");$(".content-slick").slideUp();var content_show = $(this).attr("title");$("#"+content_show).slideDown();});});</script>
Simpan Template.
Sekarang Saatnya Menambah Widget Tabview Jquery ini :
Dari Dashboard Pilih Rancangan , kemudian klik Tata Letak - Add Widget -pilih 'Html/Javascript' dan copy pastekan kode berikut :
<ul class="slick"><li title="tabsatu" class="slick active">Tab Satu </li><li title="tabdua" class="slick active">Tab Dua </li><li title="tabtiga" class="slick">Tab Tiga </li></ul><div id="tabsatu" class="content-slick">Letakkan kode HTML/Javascript di Tab Satu</div><div id="tabdua" class="content-slick">kode HTML/Javascript di Tab Dua</div><div id="tabtiga" class="content-slick">kode HTML/Javascript di Tab Tiga</div>