Apa kabar sobat blogger ?? wah.. ini postingan pertama saya nich, semoga tutorial ini menjadi Blogger yang sukses. Sekarang saya akan kasih tahu pada sobat blogger bagaimana Cara membuat memasang menu tab view tanpa harus edit html.

Seperti kita tahu bersama bahwa Tab view adalah salah widget berguna terutama untuk menghemat halaman blog sobat. Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. Gambar diatas merupakan contoh dari hasil tutor ini.

Cara ini sebenarnya sudah banyak yang posting tapi sembari menunggu hujan berhenti tak apa lah, siapa tahu makin banyak follower blog nya, iya toh???? hehehe. Sobat yang tertarik untuk memasang widget menu tabview tanpa edit HTML silahkan ikuti tutorialnya.

Cara Membuat Menu Tab View Tanpa Edit HTML

1. Log in ke akun blog sobat.
2. Klik Rancangan -->Elemen laman --> Tambah Gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam konten dan jangan beri nama widgetnya.

<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>Get this <a href="http://christiantatelu.blogspot.com/2012/02/cara-membuat-menu-tab-view-tanpa-edit.html" target="_blank">widget</a></p></div>

4. Klik save dan lihat hasilnya