Tutorial Tabbed Content Widget

1. Dashboard > Layout > Add gadget > HTML/Javascript.
2. Copy code below and paste in the HTML/Javascript space (change where necessary).

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0px solid #fff !important;
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 7px;
 border: 0px solid none;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 margin-bottom: 0px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background:url('BACKGROUND URL');
html .tabber h2.active {
 background: #fff;
 border-bottom: 0px solid #fff; /*--"Connect" active tab to its content--*/
.tabber .widget-content {
 border: 0px solid #fff;
 padding: 10px;
 background: url('BACKGROUND URL');
.codewidget, #codeholder {
<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 : 5
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p> <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">bloggersentral</a></p></div>

3. Position the HTML/Javascript above the gadgets that you want to tabify.

4. Save and view your blog.

No comments:

Post a Comment

I don't approve harsh comments (: