Cara Membuat Menu Tab View Tanpa Edit HTML

Cara Membuat Menu Tab View Tanpa Edit HTML: Cara Membuat Menu Tab View Tanpa Edit HTML – Apa kabar sobat blogger?? wah.. jarang – jarang nich christian tatelu posting 2 artikel sehari, mudah- mudahan bisa begitu terus.. heheh. Setelah sebelum telah memposting tentang cara mengetahui blog dofollow atau nofollow, kali ini saya aka 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. contohnya bisa sobat lihat di bagian footer sebelah kiri dari blog ini.

Cara ini 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&gt;
<script type=”text/javascript” src=”http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js”></script&gt;
<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&#8221; target=”_blank”>widget</a></p></div>

4. Klik save dan lihat hasilnya

One thought on “Cara Membuat Menu Tab View Tanpa Edit HTML

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s