Releasing CSS-3 Stylish Blogger Multi-Tabber Widget

Releasing CSS-3 Stylish Blogger Multi-Tabber Widget

Posted by Ahmed Shawan on 1/02/2013

Dear readers today I'm too excited to reveal a new version of multi-tabber widget of blogger. I published it's previous one of the version of stylish multi-tabbed widget before and today's version is absolutely created on css and JavaScript. This version is an exacted script from css. I found the raw script on a css website and further customized it and made it too easier for newbie to customize according their wish. There you might see this widget on several websites on many shapes but this widget is absolutely simple to install on your blogger blog. This widget first revealed by Virtapay. And i further customized it and make it workable to blogger.Just only one script which is capable to show it's whole features. Bloggers and web-developers are advised to customize this script not breaking it's jquery features. Otherwise it won't work properly. Let's go ahead and learn this delicious tutorial

Install A Fabulous Css Stylish Multi-Tabbber Widget

1. First of all go to Blogger and log-in with your account
2. Go to layout section and click on Add a Gadget
3. Pick HTML/JavaScript and paste the following code

<style>
body {
color:#666;
font-family:Verdana,Arial,sans-serif;
margin:0;
padding:0;
font-size:12px;
}

.tabBar {
font-family: Georgia,tahoma,verdana,arial,sans-serif;
font-size:12px;
margin-left:15px;
position:relative;
top:1px;
width:300px;
}

.tab {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
cursor: pointer;
display: inline-block;
}

.tabOnOut {
background-color: #FFF;
border-color: #a2ccdb #a2ccdb #a2ccdb;
border-style: solid;
border-width: 1px;
color: #666;
margin: 0pt 2px;
padding: 2px;
}

.tabOnIn {
background-color:#048DBC;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
color:#FFFFFF;
margin:2px 4px;
padding:2px 10px;
}

.tabOffOut {
background-color:#EDEDED;
border:1px solid #CCC;
color:#999999;
margin:0 2px;
padding:2px;
}

.tabOffIn {
background-color:#999;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
color:#EEE;
margin:2px 4px;
padding:2px 10px;
}

.tabHoverIn {
background-color:#BBB;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
color:#EEE;
margin:2px 4px;
padding:2px 10px;
}

#tabBody{
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYj7yuHgaa38iHQn9_LTpA4nXivb9DhrIRShFIejqQJ6ahXnq-_0EgXQHgeGPh82PxMoKzAltWzMdMqgQvGIDuj8-IjycsFCq0AOrRCaWSE-kImiAQvNIGXeO_S_1QVrtn8lZVthXd2y0/s1600/postbg.png) repeat-x;
border:1px solid #999999;
line-height: 20px;
min-height:10px;
padding:05px;
width:300px;
border:1px solid #a2ccdb;
}
#tabBody a {
text-decoration:none;
outline: 0;
color: #888;
}
#tabBody a:hover {
text-decoration:none;
color: #333;
}

#tabBody ul li {
list-style-type: none;
margin: 0px 0px 0px;
padding: 2px !important;
border: 1px solid #CCC;
border-radius: 10px;
text-align: left;
margin-bottom:2px;
padding-left: 5px;
}

#tabBody ul li:hover {
border:1px solid #a2ccdb;
text-align: 10left;
}

</style>
  <script type="text/javascript" src="https://d1au2fplbcmd98.cloudfront.net/js/jquery-1.3.2.min.gz.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $("#TOS").colorbox({iframe:true, opacity: 0.75, innerWidth:700, innerHeight:440});
  });
  $(window).ready(function(){
    if ($.browser.msie && $.browser.version.substr(0,1)<8) {
      $('#ie6warn').show();
    }
 
    
    $('.tab').mouseover(function(){
      if ($('div', this).hasClass('tabOffIn')) {
        $('div', this).addClass('tabHoverIn');
        $('div', this).removeClass('tabOffIn');
      }
    });
    $('.tab').mouseout(function(){
      if ($('div', this).hasClass('tabHoverIn')) {
        $('div', this).addClass('tabOffIn');
        $('div', this).removeClass('tabHoverIn');
      }
    });
    
    $('.tab').click(function(){
      
      $('.tab').removeClass('tabOnOut');
      $('.tab').addClass('tabOffOut');
      
      $('div', '.tab').removeClass('tabHoverIn'); 
      $('div', '.tab').removeClass('tabOnIn');
      $('div', '.tab').addClass('tabOffIn');
     
      $('div', this).removeClass('tabOffIn');
      $('div', this).addClass('tabOnIn');
      $(this).removeClass('tabOffOut');
      $(this).addClass('tabOnOut');
      return false;
    });
    
    $('#tab-join').click(function(){
      $('#tabBody').children().hide();
      $('#body-join').show();
      return false;
    });
    $('#tab-what').click(function(){
      $('#tabBody').children().hide();
      $('#body-what').show();
      return false;
    });
    $('#tab-job').click(function(){
      $('#tabBody').children().hide();
      $('#body-job').show();
      return false;
    });
  });
</script>
<script type="text/javascript" src="https://d1au2fplbcmd98.cloudfront.net/js/jquery.colorbox-min.gz.js"></script>
<div class="tabBar">
  <div class="tab tabOnOut" id="tab-join"><div class="tabOnIn">Tab 1</div></div>
  <div class="tab tabOffOut" id="tab-what"><div class="tabOffIn">Tab 2</div></div>
  <div class="tab tabOffOut" id="tab-job"><div class="tabOffIn">Tab 3</div></div>
</div> <div id="tabBody">
<div id="body-join">

Tab 1 Content Goes Here...

    <div style="clear: both;"></div>
 <div style="clear: both;"></div>
  </div>
  <div id="body-what" style="display: none;">

Tab 2 Content Goes Here...

    <div style="font-size: 12px; margin: 20px 0pt;">
      <div style="margin: 5px 25px 0;">
        <div>
        </div>
        <div style="margin-left: 20px; font-size: 12px; margin-top: 5px;">
        </div>
      </div>
    </div>
  </div>
  <div id="body-job" style="display: none;">

Tab 3 Content Goes Down Here...

  </div>
</div>

4. Now save it after customization properly

Customization Guidance

1. Change Tab-1 as of the first tab title and all the same for others Tab-2,Tab-3
2. Change Tab-1 texts go to here... as of the first tab texts
3. Change Tab-2 texts go to here.... as of the second tab texts
4. Change Tab-3 texts go to here... as of the third tab texts

Change Styles of This Widget

1. Change .tabBar { as for exchanging tabber texts, width, size etc.
2. Change .tab { for modifying tabber moz-border and radius
3. Change tabber body content style by #tabBody {

• There are much more changes are available in this widget for example these options below

.tabOnOut { .tabOnIn { .tabOffOut { .tabOffIn { .tabHoverIn {

You can therefore use our HTML Editor to stylize this widget free

Need Help?

Hope that this widget works on your blog for if you feel any problem later don't forget to ask me frequently your feedback is almost appreciated.