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>
Ooh gitu ya, saya otak-atik dulu kodenya :)
BalasHapusWuiih, keren tuh kayaknya. Dulu ane pernah masang kayak gini, tp karena bikin blog jadi berat ane lepas lagi jadinya.
BalasHapusLink sudah terpasang di blog saya. Bisa di cek langsung DISINI
Ini ingatanku yang salah, atau kamu memang ganti tema sob? Btw, temanya cakep.....tapi kok temanya mirip-mirip sama aku ya :D hehehehe
BalasHapusSaya mo coba postingmu ini, soalnya punya aku nggak ada back to top. Kepikiran sih tapi malas cari scriptnya :P
@Leo - SayaSukaDesain:a, iya... saya emang ganti tema lagi
BalasHapusSekalian buat belajar soalnya...hehehe
maaf nih om, mau tanya link Blogger My Blog ada dimana yah om.. soalnya q ga nemuin link Blogger My Blog disini.. tolong konfirmasi ke sini
BalasHapusMmmm... sekian alamat yang di kunjungi, ternyata jodoh ku untuk mencari back to top yang menggunakan jquery disini :). Terima kasih y ilmunya Gan...
BalasHapusngendok dulu ah...
BalasHapus