Membuat Tab View Dengan JQuery. Tab view dengan menggunakan JQuery versi 1.3.2 berguna untuk menghemat ruang. dengan jumlah gadget di sidebar yang banyak bisa membuat sidebar tampak panjang kebawah. dengan tab view dapat memnghemat tempat sehingga sidebar tidak tampak panjang kebawah. dengan Tab view juga membuat blog lebih rapi.
Untuk Demo Tab View Dengan JQuery, silahkan klik tombol demo berikut :
Untuk Demo Tab View Dengan JQuery, silahkan klik tombol demo berikut :
Cara membuat Tab View Dengan JQuery adalah sebagai berikut :
Cara Membuat Navigasi Stylish di Blog adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
Cara Membuat Navigasi Stylish di Blog adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Letakkan Script Berikut dibawah JQuery 1.3.2 diatas tadi :
<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(1500)})});
</script>
$(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(1500)})});
</script>
- Kemudian letakkan code CSS berikut diatas ]]></b:skin> :
/* pageTabs */
.pageTabs {width: 300px; height:150px; margin:5px font-size:11px;}
ul.tabs {
margin-left: 5px;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
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 {
margin-left: 5px;
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 {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 5px 10px 10px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}
.pageTabs {width: 300px; height:150px; margin:5px font-size:11px;}
ul.tabs {
margin-left: 5px;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
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 {
margin-left: 5px;
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 {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 5px 10px 10px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}
- Simpan Template.
- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Copy paste code berikut kedalamnya :
- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Copy paste code berikut kedalamnya :
<div class="pageTabs">
<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Isi Content Anda Utk Tab 1
</div>
<div id="tab2" class="tab_content">
Isi Content Anda Utk Tab 2
</div>
<div id="tab3" class="tab_content">
Isi Content Anda Utk Tab 3
</div>
<div id="tab4" class="tab_content">
Isi Content Anda Utk Tab 4
</div>
</div>
</div>
<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Isi Content Anda Utk Tab 1
</div>
<div id="tab2" class="tab_content">
Isi Content Anda Utk Tab 2
</div>
<div id="tab3" class="tab_content">
Isi Content Anda Utk Tab 3
</div>
<div id="tab4" class="tab_content">
Isi Content Anda Utk Tab 4
</div>
</div>
</div>
- Simpan.
Untuk tutorial aslinya bisa di cek di How To Add jQuery 3D Tab View Widget to blogger.
Selamat mencoba dan happy blogging.
# Nilai 1500 pada fadeIn(1500) pada script diatas adalah kecepatan tampilnya konten tab view.
Untuk tutorial aslinya bisa di cek di How To Add jQuery 3D Tab View Widget to blogger.
Selamat mencoba dan happy blogging.
Aku simpan dulu sob kodenya.
Bikin loading jadi tambah berat gak?
Rock@ g terlalu ngefek ma loading blog sob.. enak2 aja.. coba cek blog demonya aja.. seperti apa loadingnya..
Wah keren HAPIA...
Kapan2 ane coba yew....Tx!!!
salam teman ^__^, seperti biasa...simpan, saya rasa sekarang sudah waktunya nih diaplikasikan
Asik juga nih, bisa menghemat tempat :)
wah thanks neh tips tutorialnya... ebat!
satu kata mantab, layak dicoba...
asalamualaikum...
kalo pake jQuery saya belum pernah nyoba nech sob, dari demonya sepertinya simple yach sob...kalo ga dicoba pasti ga akan bisa liat hsilnya hehe..
Sukses Slalu!
mau aq pasang tp masihj bingung mau aq isi apaan, masih di fikir dulu isinya kira2 apa yang pas dan g bikin berat soalnya blog q kan udah berat bgt
terima kasih mas hapia...
sudah mau berbagi =)
hihihihi
kalo tab viewnya di pasang iklan boleh gak kak???
salam
dari blogger abnormal
Syam Oby@ boleh aja sob.. terserah kita mw masang apa..semoga membantu...
duuuuuuuuuhh...
panjang juga ya
wah triknya manteb banget.. boleh saya simpen kan ?
ternyata banyak artikel yang bermanfaat .. sering2 maen kesini insya alloh .. :)
hehehhe...
kalau yang ini kayaknya untuk masalah loadng blog bisa teratasi ya sob...
keren sobat..
sukses juga yah :D
tapi bisa memperlambat loading gak?
Artikelnya mantep mantep...
kita bookmark dulu tutor mantab nih nanti kita praktekin
mau tanya sekalian, klo cara buat tambahan widget di sebelum footer untuk wp antum bisa ga ya.. mohon pencerahannya
yayah@ wah maaf sob.. utk WP saya blm terlalu akrab.. jadi blm pernah ngobrak-abrik yg disana..hehe
mantebh banget nich kangh hapia
penting tuh sob...
oh iya klo da bisa kasih kabar ya