Here's an easy way to make a multi tab on the blog

Bantu KLIK iklan ini gan!!!!

your blog is too narrow so no space to put widged, don't get discouraged friend blogger, this time we will discuss about how to create a multitab on blog sidebar.
the benefits of this widged is you can put three widged on one place of care, surely it will make your blog look seemingly neat and professional.

not too difficult to make it, you only need to perform the following steps:

1. Template > > Edit HTML
2. find the code]] > or use CTRL + F and then copy and paste the code below:

/* Multi Tab Widget */ .multitab-section{background:#fff;text-transform:uppercase;width:100%} .multitab-widget{list-style:none;margin:0 0 10px;padding:0} .multitab-widget li{list-style:none;padding:0;margin:0;float:left} .multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none} .multitab-tab{border:0;width:33.3%;text-align:center} .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;} .multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}

/* Multi Tab Widget */ .multitab-section{background:#fff;text-transform:uppercase;width:100%} .multitab-widget{list-style:none;margin:0 0 10px;padding:0} .multitab-widget li{list-style:none;padding:0;margin:0;float:left} .multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none} .multitab-tab{border:0;width:33.3%;text-align:center} .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;} .multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}

3. Then search again use code CTRL + F copy and paste the following code on it.

<script type='text/javascript'>//<![CDATA[ // Multi tab widget jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); //]]></script>

4. Then to the last stage, the search code<div id='sidebar-wrapper'>use CTRL + F to copy and paste the following code below.

I remind you not to forget to replace the title of the widget, and then click Save and view the result by opening a new tab, if an error occurs please immediately check the reset with CTRL + z. okay friend bloggers enough so our discussion today, maybe tomorrow I will be sharing more cool tutorial, I congratulate coding.

Bantu KLIK iklan ini gan!!!!

Tweet

Subscribe to receive free email updates: