In some blogs and websites there a gadgets occupy huge amount of space on the sidebars.Due to which the visitors to feel many gadgets on the sides.Sometimes it may take sometime to load the page.So,friends here is the Multi tab widget or gadgets ,which make the your gadgets to like look like menu with Headings.Your blogger visitor can select widget as he like.
Procedure to add the Multi tab Content widget for blogger
► Go to blogger► Design(page elements) or Layout
(Note*: Learn more about essential safety before Editing theme )
► Add a gadget—>> Html/java script –>>
► Add Below code in the empty box (Please don’t write any gadget title name,leave the title box empty)
► Arrange code box gadget box first
► Then your gadgets boxs next as below in image
► Add Below code in the empty box (Please don’t write any gadget title name,leave the title box empty)
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="https://www.tarang.com.np" target="_blank">widget</a></p></div>
► Save Gadget and Go to part 2. How to arrange Multi tab content widget
► Arrange code box gadget box first
► Then your gadgets boxs next as below in image
Step by Step Blogger Tutorials
- Blogger Vs Wordpress: Which one should you choose
- Benefits Of Using Blogspot As Blogging Platform
- Choosing A Perfect Niche For Your Blog
- Creating a Free Blog on Blogger
- Add Custom Robots.txt File in Blogger
- Most Important Settings You Must Have Set In Your Blogger Blog
- How to Create Contact Us page in Blogger
- How To Edit or change A Blogger Template - Complete tutorial
- Essential Safety Steps To Follow On Editing Blogger Template
- Setup MultiTab system on Blogger
- Add Facebook(Meta) meta tags in Blogger
- All In one seo pack for Blogger Blog
- How to make money through blogging
- How to get Google AdSense Approval very fast For A New Blog
- Earn 10$ Through blogging
- Best free AMP blogger Templates 2023
- Top 5 Premium AMP templates for blogger blog