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.........
cara membuat halaman tabs di blogspot, langkah menambah halaman tabs di blogger, tutorial memasang tabs di blog, aplikasi tabs di blog.
Tidak ada komentar:
Posting Komentar
Silahkan berkomentar dengan sopan dan jelas dan apabila komentar anda tidak sopan, kami anggap itu sebagai SPAM.