Membuat Tabs Baru Di Blooger
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>
- 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>
<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>
$(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.........
