Akhirnya update juga,
Hari ini, ane mau bahas tentang tutorial membuat "back to top" nih
Eitsss.... Bukan back to top biasa lho!!
Tapi kalo diliat2.... emang biasa sih,
Yang jelas bisa bikin balik lagi keatas
tapi lebih lembuuut gitu... :P
Langsung aja deh, lagi males basa-basi...hehe
Oke, Login Blogger - rancangan -Edit HTML - Expand Template Widget
Cari kode ini:
lalu copy kode ini diatas kode tadi
Tadi itu kode Jquery, kalo ngerasa udah pernah masang. Kode tadi nggak perlu ditambahin ya...
Terus...Copy kode ini dibawah kode Jquery tadi
udah?
belom...sabar ya
sekarang cari kode
ganti jadi
Lalu, sekarang kode CSS-nya. Copy syntax CSS berikut di atas </b:skin>
Almost there....
copy kode dibawah ini sebelum </body>
Save, trussss preview....
Jangan lupa komennya ya Gan
kalo ada yang ga ngerti dan sebagainya, silahkan...
Malu bertanya bingung dijalan....
<ZepT>
Hari ini, ane mau bahas tentang tutorial membuat "back to top" nih
Tapi kalo diliat2.... emang biasa sih,
Yang jelas bisa bikin balik lagi keatas
tapi lebih lembuuut gitu... :P
Langsung aja deh, lagi males basa-basi...hehe
Oke, Login Blogger - rancangan -Edit HTML - Expand Template Widget
Cari kode ini:
</head>
lalu copy kode ini diatas kode tadi
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
Tadi itu kode Jquery, kalo ngerasa udah pernah masang. Kode tadi nggak perlu ditambahin ya...
Terus...Copy kode ini dibawah kode Jquery tadi
<!-- Back To Top -->
<script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->
<script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->
udah?
belom...sabar ya
sekarang cari kode
<body>
ganti jadi
<body id='top'>
Lalu, sekarang kode CSS-nya. Copy syntax CSS berikut di atas </b:skin>
#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}
Almost there....
copy kode dibawah ini sebelum </body>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
Tulisan "Back To Top" bisa kamu ganti. Bisa juga pake gambar,
kalo pake gambar tinggal kamu ganti "Back To Top"-nya dengan kode ini:
<img src='url-gambar-kamu.com" />
Save, trussss preview....
Jangan lupa komennya ya Gan
kalo ada yang ga ngerti dan sebagainya, silahkan...
Malu bertanya bingung dijalan....
This tutorial, came from here:
<ZepT>
