Tutorial: TABBED WIDGET UNTUK BLOG

EDIT BLOG 10 : TABBED WIDGET UNTUK BLOG.

Hasil tilikkan JM di google telah JM temui di BLOGS911

<style type="text/css">

.tabber {

 padding: 0px !important;

 border: 0 solid #bbb !important;

}

.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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>

<script src="https://dl.dropboxusercontent.com/s/ioycgaohomw3891/theblogger911.blogspot.com.tabber.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

 $('#codeholder').bloggerTabber ({

  tabCount : 3

 });

});

</script>

<!-- it will not work without below code to make sure the widget works, do not alter the code below -->

<div id='codeholder'>

<p>

Get<a href="http://theblogger911.blogspot.com/2013/09/the-fastest-and-easiest-tabber-widget.html" target="_blank"> widget</a></p>

</div>