Cara Membuat 3 Tab View Menu

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

* Login dulu ke blogger
* Klik Tata letak
* Edit HTML
* Kemudian letakkan kode di bawah ini persis di bawah 

<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

<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 class="tab_content" id="tab1">

<h2>

Tab 1</h2>

GANTI TULISAN INI DENGAN KODE KONTEN ANDA 1</div>

<div class="tab_content" id="tab2">

<h2>

Tab 2</h2>

GANTI TULISAN INI DENGAN KODE KONTEN ANDA 2 </div>

<div class="tab_content" id="tab3">

<h2>

Tab 3</h2>

GANTI TULISAN INI DENGAN KODE KONTEN ANDA 3</div>

</div>

</div>

LIHAT CONTOHNYA DI BAGIAN BAWAH BLOG INI...

Catatan :
* Ganti tlisan yang berwarna merah dengan kode konten yang ingin kamu tampilkan.
* Tulisan warna biru adalah judul dari tab. silahkan ganti sesuai keinginan kamu.
* Kemudian simpan.



Selamat mencoba.........