membuat jQuery scroll tab
* 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
0 komentar:
Posting Komentar