Back To Top sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery.
Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas.
Lihat Demonya Disini
Gimana tertarik??
Ok,Caranya cukup sederhana koq, tinggal ikutin proses dibawah ini....
1. Yang pertama harus dilakukan adalah buka Blogger - Design - Edit HTML
2. Langkah selanjutnya copy kode javascript dibawah ini tepat diatasnya kode </body>
<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>
Alasan kenapa kode script diatas diletakkan paling bawah atau setelah kode </body> adalah supaya pada saat loading blog pertama kali, tidak terlalu berat.
Sebagai informasi dan patut menjadi perhatian adalah kode outer-wrapper... kode ini merupakan kode css yang biasa ada di template minima, yang menggambarkan area id div setelah body... jadi kode ini bisa diganti sesuai area div setelah body.
3. Selanjutnya copy kode css dibawah ini, tepat diatasnya kode ]]></b:skin>
#bawah{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img89.imageshack.us/img89/4998/arrowdown.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:70px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
#atas{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img600.imageshack.us/img600/8649/arrowup.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:30px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
4. Dan langkah terkahir simpan...
Begitulah sehingga postingan ini berakhir
Lihat juga artikel lainnya :)
