Bloggers kept searching for different advanced widgets to add on their website. If choosing a template you'll not have to worry, if 3 tabbed widget is there or not. You can easily place it on any template by following given steps.
Adding Multi tabbed widget to your blog
1. Copy below code before
JAVASCRIPT
<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>
2. Search for paste below css code above it.
CSS
/* 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;}
3. Search for paste this html code below it. And done!
HTML
<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'/>
Ok guys. Good luck and happy blogging.
0 Komentar untuk "Multi Tabbed Widget short for blogger"
Please leave a message here. Any input, advice and guidance to build I say thank you.
Greetings blogger