Scroll To Top? apa itu? biasanya tombol ini sering berada di pojok kanan/kiri halaman blog. Jika tombol ini di klik, secara otomatis anda akan dibawa kembali ke halaman atas blog. Biasanya tombol ini dibuat jika halaman blog terlalu panjang kebawah, sehingga untuk mencapai halaman atas bisa dilakukan dengan 1x klik.
1. Tentunya anda harus login kemudian masuk ke dashboard anda :D
2. Klik design kemudian edit HTML
3. Carilah kode di bawah ini (gunakan Ctrl + F) :
]]></b:skin>
4. Copy - paste kode berikut sebelum/di atas ]]></b:skin> :
#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.png) no-repeat left top;
}
#toTopHover {
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.png) no-repeat left top;
}
#toTopHover {
background:url(http://i1094.photobucket.com/albums/i453/StaR_Ryu/hide-back-to-top.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}
Kode right:10px; bisa anda ganti dengan left:10px; jika anda ingin Tombol Scroll To Top anda berada disebelah kiri halaman blog anda.
Untuk Background url bisa anda ganti dengan gambar yang anda inginkan, usahakan ukuran gambar anda 51 x 51 px.
Anda bisa menggunakan beberapa gambar Tombol Scroll To Top dari saya :
5. Kemudian carilah kode ini (gunakan Ctrl + F) :
</head>
6. Copy - paste kode berikut sebelum/di atas </head> :
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
Langkah terakhir pastinya di save :D
Whalaa, Tombol Scroll To Top sudah terpasang dan siap digunakan. :)
Makasi ya udah baca artikel ini ^^. Suka artikel Tombol Scroll To Top ini? Silahkan copas artikel Tombol Scroll To Top ini ke website anda, tapi jangan lupa sertakan juga alamat linknya juga :
regards,
regards,
2 comments:
Post writing is also a excitement, if you know after that you can write otherwise it is difficult to write.
Outstanding post however I was wanting to know if you could write a litte more on this subject? I'd be very thankful if you could elaborate a little bit further. Kudos!
Post a Comment
Disarankan anda menggunakan Google Account atau menggunakan akun lainnya (LiveJournal, WordPress, TypePad, AIM).
Bagi yang menggunakan OpenID, anda bisa menuliskan URL website/blog anda, atau bisa menggunakan URL social network anda atau anda bisa menggunakan (name/URL).
Sangat tidak disarankan anda menggunakan Anonymous. Bagi yang menggunakan Anonymous saya tidak akan menjawab apabila anda bertanya.