Cara membuat Menu Tab View keren dengan Efek jQuery

Posted by : yuga irgi Selasa, 26 Maret 2013

InfoDari - Cara membuat Menu Tab View keren dengan Efek jQuery

Selamat Pagi Sahabat Blogger. Pada kesempatan kali ini saya posting sebuah Tutorial Blog yang sebelumnya di Request oleh sahabat Blogger kita pada beberapa Hari yang lalu.
Yaitu Cara membuat Menu Tab View keren dengan Efek jQuery.

Disini saya akan memberikan cara membuat Menu Tab View seperti yang ada di Blog saya ini.
Atau lihat gambar di atas. Kurang lebih nya seperti itulah tampilannya nanti.

Cara membuat Menu Tab View keren dengan Efek jQuery:

Buka Dasbor Blog anda.
Pilih menu tata Letak

Tambah Widget HTML/JavaScript.
Kemudian Copy Paste Kode dibawah ini kedalam Widget HTML/JavaScript 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;
overflow: hidden;
position: relative;
background: #0000FF;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #000000;
border-bottom: 1px solid #fff;
}
.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><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

Simpan.

Catatan: Untuk menampilkan Menu seperti Popular Post, Category, Random Post dll. Silahkan anda letakkan Widget widget tersebut dibawah Widget Menu Tab View ini.