Di tutorial saya yang dulu yaitu
membuat tab view menggunakan efek jquery. Di tutorial jQuery yang ini, saya akan membahas tentang membuat jQuery scroll tab yang tidak kalah menarik dengan tutorial saya yang lalu, jQuery tab yang satu ini sangat berbeda, dengan tambahan efek scroll tentu saja akan menjadi lebih menarik tentunya. Hampir dua jam saya memodifikasi jQuery scroll tab ini agar bisa tampil dan dapat dipasang di blog, lama juga yaa hehe... jika template kamu berwarna putih atau biru muda akan lebih bagus dan serasi dengan scroll tab yang ini, sebelum memulai cara pembuatannya kamu bisa lihat dulu contohnya di blog demo punya saya
disini. Bagaimana sudah melihat tertarik ingin memasangnya di blog kamu. Langsung saja ikuti langkah langkah pembuatannya dibawah ini
* Di langkah pertama login ke blogger dan kamu langsung menuju Edit HTML
* Langkah selanjutnya tekan F3 pada keyboard dan cari kode
<head> letakan kode jQuery dibawah ini dibawah kode
<head> atau sesudah kode
<head> juga bisa, akan lebih rapi jika dibawah kode
<head>
<script src='https://sites.google.com/site/blogsjaya/scrolltab/jquery-1.3.1.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogsjaya/scrolltab/jquery.scrollTo.js' type='text/javascript'/>
<script>
$(document).ready(function() {
//Get the height of the first item
$('#mask').css({'height':$('#panel-1').height()});
//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div').width($('#mask').width());
//Get all the links with rel as panel
$('a[rel=panel]').click(function () {
//Get the height of the sub-panel
var panelheight = $($(this).attr('href')).height();
//Set class for the selected item
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');
//Resize the height
$('#mask').animate({'height':panelheight},{queue:false, duration:500});
//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
$('#mask').scrollTo($(this).attr('href'), 800);
//Discard the link default behavior
return false;
});
});
</script>
* Di langkah yang selanjutnya yaitu pemasangan kode CSS, kamu cari kode
]]></b:skin> dan letakan kode CSS dibawah ini diatas kode
]]></b:skin>
#scroller-header a {
text-decoration:none;
color:#867863;
padding:0 2px;
}
#scroller-header a:hover {
text-decoration:none;
color:#4b412f
}
a.selected {
text-decoration:none !important;
color:#4b412f !important;
}
#scroller-header {
background:url(https://sites.google.com/site/blogsjaya/scrolltab/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}
#scroller-body {
background:url(https://sites.google.com/site/blogsjaya/scrolltab/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
}
#mask {
width:250px;
overflow:hidden;
margin:0 auto;
}
#panel {
}
#panel div {
float:left;
}
/* Extra styling for each panel*/
#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}
#panel ul li.last {
border-bottom:none !important;
}
#panel-1 {
}
#panel-2 {
}
#panel-3 {
}
* Dilangkah yang terakhir pergi ke Elemen Laman, lalu klik Tambah Gadget, ingat tambah Gadget nya di sidebar, setelah itu klik tambah HTML/JavaScript dan pastekan atau masukan kode HTML dibawah ini didalam kolom HTML/JavaScript
<div id="scroller-header">
<a href="#panel-1" rel="panel" class="selected">Popular</a>
<a href="#panel-2" rel="panel">jQuery</a>
<a href="#panel-3" rel="panel">Terbaru</a>
<a href="#panel-4" rel="panel">Kategori</a>
</div>
<div id="scroller-body">
<div id="mask">
<div id="panel">
<div id="panel-1">
<ul>
<li><a href="#" target="_blank">cara hack id Facebook & Point Blank dengan Keylogger</a></li>
<li><a href="#" target="_blank">membuat blog bergetar saat klik kanan</a></li>
<li><a href="#" target="_blank">mengganti dan membuat cursor blog</a></li>
<li><a href="#" target="_blank">membuat menu lava lamp horizontal jQuery</a></li>
<li><a href="#" target="_blank">membuat menu jQuery fixed navigation</a></li>
<li><a href="#" target="_blank">membuat toolbar dengan efek jQuery dan CSS3</a></li>
<li><a href="#" target="_blank">membuat menu vertical JQuery drop down</a></li>
<li><a href="#" target="_blank">membuat menu tooltip dengan efek jQuery (smart menu)</a></li>
<li class="last"><a href="#" target="_blank">membuat menu style black jQuery</a></li>
</ul>
</div>
<div id="panel-2">
<ul>
<li><a href="#" target="_blank">membuat jquery social share</a></li>
<li><a href="#" target="_blank">membuat jQuery floating menu</a></li>
<li><a href="#" target="_blank">membuat google search jQuery</a></li>
<li class="last"><a href="#" target="_blank">membuat menu jQuery Fancy Apple style</a></li>
</ul>
</div>
<div id="panel-3">
<ul>
<li><a href="#" target="_blank">membuat jQuery contact form </a></li>
<li class="last"><a href="#" target="_blank">membuat jQuery color picker</a></li>
</ul>
</div>
<div id="panel-4">
<ul>
<li><a href="#" target="_blank">Software</a>
<li><a href="#" target="_blank">Aplikasi</a></li>
<li><a href="#" target="_blank">Anti Virus</a></li>
<li><a href="#" target="_blank">Photoshop</a></li>
<li><a href="#" target="_blank">Corel Draw</a></li>
<li><a href="#" target="_blank">Template</a></li>
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">CSS</a></li>
<li><a href="#" target="_blank">CSS3</a></li>
<li><a href="#" target="_blank">HTML</a></li>
<li><a href="#" target="_blank">Ajax</a></li>
<li><a href="#" target="_blank">CMS</a></li>
<li><a href="#" target="_blank">PHP</a></li>
<li><a href="#" target="_blank">Komputer</a></li>
<li><a href="#" target="_blank">Otomotif</a></li>
<li><a href="#" target="_blank">Elektronik</a></li>
<li><a href="#" target="_blank">Majalah</a></li>
<li><a href="#" target="_blank">Buku</a></li>
<li><a href="#" target="_blank">Masakan</a></li>
<li><a href="#" target="_blank">Makanan</a></li>
<li><a href="#" target="_blank">Buahan</a></li>
<li><a href="#" target="_blank">Sayuran</a></li>
<li><a href="#" target="_blank">Bumbu</a></li>
<li class="last"><a href="#" target="_blank">Resep</a></li>
</li></ul>
</div>
</div>
</div>
</div>
* Simbol
# kamu ganti dengan
alamat url kamu masing masing, di ingatkan harus dimulai dengan
http:// contohnya seperti
http://alamat-url.com/
*Simbol
# yang terletak pada kode dibawah ini jangan diganti dengan alamat url biarkan saja tetap simbol
# yang artinya (
kosong)
<div id="scroller-header">
<a href="#panel-1" rel="panel" class="selected">Popular</a>
<a href="#panel-2" rel="panel">jQuery</a>
<a href="#panel-3" rel="panel">Terbaru</a>
<a href="#panel-4" rel="panel">Kategori</a>
</div>
* Dan judul link bisa diganti sesuai keinginan kamu, simpan dan lihat hasilnya di blog kamu kalau ada yang kurang jelas bisa berikan komentar langsung dibawah ini
