Para Blogger umumnya terus mencari berbagai widget canggih untuk ditambahkan di blog mereka. Jika template kalian tidak ada widget multi tab bawaan, Maka cara ini cukup efektif untuk kalian ikuti. Multi tab salah satu widget yang paling keren, banyak file bisa ditempatkan dalam widget ini. Codingnya pun cukup singkat jika mengingat mega output. Begitu banyak fungsi dalam widget Multi tab simpel ini. Dengan widget ini akan memudahkan pengunjung untuk mengakses lebih banyak pos.
Kalian dapat dengan mudah menempatkannya pada template dengan mengikuti langkah-langkah berikut.
Okelah kita langsung saja eksekusi.
Cara Membuat Multi Tab Secara Mudah Di Sidebar
Kalian dapat dengan mudah menempatkannya pada template dengan mengikuti langkah-langkah berikut.
Okelah kita langsung saja eksekusi.
Cara Membuat Multi Tab Secara Mudah Di Sidebar
1. masuk ke blog – pilih Template – edit templat dan cari kode </head>
2.Copy script di bawah ini dan letakkan sebelum kode </head>
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
type='text/javascript'/>
<script type='text/javascript'>
// Multi tab
jQuery(document).ready(function($){
$(".laimed").hide();
$("ul.blake li:first a").addClass("pointz").show();
$(".laimed:first").show(); $("ul.blake li a").click(function() {
$("ul.blake li a").removeClass("pointz a"); $(this).addClass("pointz");
$(".laimed").hide(); var activeTab = $(this).attr("href");
$(activeTab).fadeIn();return false; }); });
</script>
/* Multi tab css setting */
.multitabs{text-transform:uppercase; margin:0 0px 30px; }
.kidder{list-style:none;margin:0 0 7px;padding:0; background: #f8f8f8; border-bottom:3px solid #2E9DD4; height:38px;}
.kidder li{list-style:none;padding:0;margin:0;float:left;}
.kidder li a{ display:block;padding:8px 14px;font-size:12px; font-weight:bold; text-decoration:none; color:#777}
.multitabs h2 {display:none;}
.kidder li a.pointz, .kidder li a:hover{background:#2E9DD4; color:#fff !important;text-decoration:none;}
.laimed li{border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:10px 3px !important; margin:0 !important; text-transform:none;}
.laimed li { background:none; list-style:none;}
.laimed img {width:65px;height:60px;float:left; padding:0px; margin:0 6px 0px 0;}
.PopularPosts .item-thumbnail{margin:0px;}
<div class='multitabs'>
<ul class='kidder blake'>
<li class='beez'><a href='#id1'>Popular</a></li>
<li class='beez'><a href='#id2'>Recent</a></li>
<li class='beez'><a href='#id3'>Comments</a></li>
</ul>
<div class='clear'/>
<!-- Tab Widget 1 -->
<div class='laimed' id='id1'>
<b:section class='sidebar' id='sidebaze1' preferred='yes'/>
</div>
<!-- Tab Widget 2 -->
<div class='laimed' id='id2'>
<b:section class='sidebar' id='sidebaze2' preferred='yes'/>
</div>
<!-- Tab Widget 3 -->
<div class='laimed' id='id3'>
<b:section class='sidebar' id='sidebaze3' preferred='yes'/>
</div>
</div>
<div class='clear'/>
Simpan dan lihat hasilnya..
Leave a Reply