Membuat Menu Tab View Otomatis

Membuat Menu Tab View Otomatis - sangat bermanfaat bagi kita. Pertama dapat menghemat tempat, jika ingin menampilkan widget-widget blog yang begitu banyaknya namun tempatnya terbatas, menu tab view ini menjadi alternatif yang sangat tepat. Kedua mempercantik tampilan blog. Tampilan blog yang dipenuhi dengan widget-widget tak beraturan pasti akan membuat pengunjung blog risih, berbeda jika anda memasang menu tab view pasti hasilnya akan lebih nyaman untuk dipandang.

Cara Membuat Menu Tab View Otomatis :

1. Buka akun blog anda
2. Tata Letak
3. Tambah Widget
4. Javascript / HTML
5. Pastekan kode di bawah ini di kotak Javascript/HTML tersebut.

<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;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
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> <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></p></div>

Sumber: http://www.banghuda.com/