Cara membuat tabs di blogspot atau di blogger adalah hal yang sangat perlu di terapkan. karna itu akan memberikan daya tarik sendiri untuk penampilan blog kita, yang kelihatannya lebih simpel dan menarik untuk di lihat. nah tentunya akan menjadi daya pikat bagi pengunjung. supaya pengunjung betah berlama-lamaan di blog kita.Seperti kebanyakan blog lain, dimana kita lihat di sidebar mau pun di fotter atau di header blog mereka banyak terdapat widget - widget, yang memungkin kan akan lama nya proses loading suatu blog tersebut. Nah untuk mengatasi terjadi nya kelamaan loading adalah dengan cara menambah Tabs. kita hanya cukup memerlukan satu widget untuk menempat kan isi content yang terdapat di widget-widget yang banyak tadi. nah untuk anda yang ingin blog nya kelihatan simple dan menarik untuk di lihat anda bisa menambahkan Aplikasi ini untuk blog anda.
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> - Untuk Tulisan berwarna merah letakkan kode konten yang ingin anda tampilkan.
- Kemudian simpan dan lihat hasilnya.
Selamat mencoba.........
Tidak ada komentar:
Posting Komentar