Cara Membuat Tabs Banyak Pada Widget Blogger

Home » Tips Blogger » Cara Membuat Tabs Banyak Pada Widget Blogger

Cara Membuat Tabs Banyak Pada Widget Blogger

Berikut langkah-langkah cara menambah tabs ke dalam blog anda:

Login dulu ke blogger
Klik Tata letak
Edit HTML
Cari kode <body>
Kemudian letakkan kode di bawah ini persis di bawah <body>

<script src='http://recent.googlecode.com/files/tabs.min.js' type='text/javascript'/>

Setelah itu cari kode ]]></b:skin>
Kemudian letakkan kode di bawah ini di bawah kode tersebut

]]></b:skin>
<style type='text/css'>
ul.tabs{float:left;list-style:none;height:32px;border-bottom:1px solid #999;border-left:1px solid #999;width:100%;margin:0;padding:0}
ul.tabs li{float:left;height:31px;line-height:31px;border:1px solid #999;border-left:none;background:#e0e0e0;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tabs li a{text-decoration:none;color:#000;display:block;font-size:1.2em;border:1px solid #fff;outline:none;padding:0 20px}
ul.tabs li a:hover{background:#ccc}
html ul.tabs li.active,html ul.tabs li.active a:hover{background:#fff;border-bottom:1px solid #fff}
.tab_container{border:1px solid #999;border-top:none;clear:both;float:left;width:100%;background:#fff;-moz-border-radius-bottomright:5px;-khtml-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-khtml-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px}
.tab_content{font-size:1.2em;padding:20px}
.tab_content h2{font-weight:400;padding-bottom:10px;border-bottom:1px dashed #ddd;font-size:1.8em}
.tab_content h3 a{color:#254588}
.tab_content img{float:left;border:1px solid #ddd;margin:0 20px 20px 0;padding:5px}
html .menu{height: 1%;}
</style>

Kemudian Simpan Tamplate
Setelah itu klik Elemen Laman
Tambah Gadget
Pilih HTML/JavaScript
Copy paste kode dibawah ini ke dalam nya

<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(); return false;
});
});
</script><div class="container">
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Tab 1</h2>

KONTEN YANG INGIN ANDA TAMPILKAN 1
</div>
<div id="tab2" class="tab_content">
<h2>Tab 2</h2>
KONTEN YANG INGIN ANDA TAMPILKAN 2
</div> <div id="tab3" class="tab_content">
<h2>Tab 3</h2>
KONTEN YANG INGIN ANDA TAMPILKAN 3
</div>
</div>
</div>