.gif)
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.
- 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.
Hubungi Kami: J_Putra
Email: jptr273@gmail.com
Share
terimakasih shob atas infonya, saya bookmark dulu
salam hangat
bisa menghemat tempat memang kang jaya :) jai bisa banyak widget dalam celah kecil
Bagus ini. Menjadikan blog tampil lebih profesional.
Salam ukhuwah
Samplenya mana oM jay ?
tulisan yang bermanfaat.... thank u mas Jaya, tambah lagi pengetahuan neh....
Dapunta
memang benar sob.. ini merupakan salah satu alternatif untuk mempermudah pengunjung untuk mencari informasi yang ada di blog kita.
aq masih bingung sob kalau aq pasang mau aq isi apa, yg g bikin blog tambah berat, masalahnya blog q dah cukup berat
kang jaya di kasih contohnya donk kang,,soalnya takut mau nyoba kalo gk ada samplenya..
kang jaya di kasih contohnya donk kang,,soalnya takut mau nyoba kalo gk ada samplenya..
thanks infonya
kk kode body itu letaknya dimana tuh.....
kok ga ketemu ya......
Untuk Tab yg ada submenunya lagi kayak punya ente, gmana caranya bro...??
kk kode body itu letaknya dimana tuh.....
kok ga ketemu ya......///"huum sama ada juga perintah akhir body" = /body.
moon pennjelsannya saya sbg orng awam
ini harus blogspot yang versi sebelum sekarang ya??
soalnya langkah kedua ga bisa2?? klo tambah gadget malah suruh milih dari blogspot
sorry nubitol
mantab artikelnya, terima kasih atas infonya
thnks infonya yah...sukses selalu sob
tidak ada kode body sepeti yang diatas pake kurung kalau yg gak pake kurung banyak
tolong penjelsannya
tp kok ndak ada linknya yah? trus kl diklik munculnya gimana? tolong jelasin :) #newbie
thx infonya gan .. nitip link ane ya ..
http://www.kadekardiana.co.cc/