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>
Ditulis Oleh : Unknown ~ http://cokawaii.blogspot.com
KAmU BaRu aJa mEmBaCa aRtIkEl tEnTaNg Cara membuat tab view slick pada blog. KamU BoLeH CoPaSt aRtIkEl iNi, BuT JaNgAn lUpA UnTuK MeNcAnTuMkAn lInK SuMbErNyA. THaNkS FoR ViSiT...
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Ash Princess Kawaii
Posting Komentar