Cara Membuat Tab Content Mudah dan Simple

di Rabu, November 30, 2011 3 komentar

Salam Sobat Blogger semua semoga kabar baik semua..kali ini saya akan share Cara Membuat Tab Content yang Simple dan tak perlu Edit HTML yang menyebabkan error template kita dan anda juga harus secara manual dalam memasukkan isinya... caranya cukup mudah dan penggunaannya pun cukup mudah yaitu kita tinggal tambahkan pada gadget template.

Sebenarnya cukup banyak cara membuat Tab Content yaitu dengan jquery maupun css tapi saya share yang paling mudah dan simple.

Kelebihannya:

Dapat mengakomodasi jumlah widget yang tidak terbatas
Menjaga penampilan asli widget tab
Sepenuhnya widgetized untuk kemudahan instalasi dan penghapusan. Jika Anda tidak menyukai apa yang dilakukannya, cukup menghapus gadget HTML / Javascript.

Caranya :

Login ke akun Blog Anda
Klik Rancangan -- Elemen Halaman -- Add Gadget -- HTML/Java Script
Biarkan Judul Kosong
Copy code berikut dan paste :

<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>


<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

- tabCount : 3 == untuk menambah jumlah tab content
Posisi gadget HTML / Javascript di atas gadget yang ingin Anda tabify
Klik Save dan lihat blog anda

CATATAN

- Pastikan setiap Widget/gadget ada judulnya karena tabber tidak akan bekerja dengan baik tanpa judul

- Judul widget pendek saja

- Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" kesalahan dalam IE untuk beberapa non-desainer template. Jika itu terjadi, widget ini bukan untuk Anda

thank to: http://www.bloggersentral.com

Related Post Cara Membuat Tab Content Mudah dan Simple

Tips and Trik Blog

+ komentar + 3 komentar

wahidsetiawann

24 Januari 2012 pukul 13.27

thank you kang, info nya sangat membantu :D

Terimakasih wahidsetiawann atas Komentarnya di Cara Membuat Tab Content Mudah dan Simple

zhi cun lee

31 Januari 2012 pukul 18.19

I am very happy to see you here. Thanks for share your thought about blogging. And the best part of it, we all in the warmest community and find the greatest people like you, my friend. I am proud to be your friend here. God bless you.

Terimakasih zhi cun lee atas Komentarnya di Cara Membuat Tab Content Mudah dan Simple