Ketika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.
Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top".
Cara I :
Keterangan :
Cara II :
Catatan :
Jquery di atas sudah dikompres (compress) menggunakan online YUI Compressor.
Catatan :
Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top".
Cara I :
- Tambahkan kode CSS berikut di atas kode ]]></b:skin>.
p.to-top {
font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;
font-size:90%;
float:right;
padding-right:10px; }
font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;
font-size:90%;
float:right;
padding-right:10px; }
Keterangan :
- font-family = keluarga bentuk teks yang akan kita tampilkan.
- font-size = ukuran teks.
- float = peletakkan teks (kanan atau kiri)
- padding-right = jarak antara teks dengan bidang sebelah kanan.
- Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.
- Cari kode yang menunjukkan awal footer, seperti : <div class='footer-wrapper'>, <div class='footer'>, <div id='footer-wrapper'>, <div id='footer'>, & sejenisnya.
- Kemudian copas kode berikut di atasnya :
<p class='to-top'><a href='#to-top' title='back to top'>back to top</a></p>
- Jangan lupa melakukan edit pada kode <body> menjadi <body id='to-top'>
- Kemudian simpan template kamu.
- Untuk peletakkan back to top tidak harus di atas footer.
- Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.
Cara II :
- Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut & akan mengikuti scroll halaman. Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("a[href*=#to-top]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("a[href*=#to-top]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
//]]>
</script>
Catatan :
Jquery di atas sudah dikompres (compress) menggunakan online YUI Compressor.
- Letakkan jquery back to top tersebut di atas kode </head>
- Tambahkan kode CSS berikut di atas ]]></b:skin>.
#back-to-top {right:20px;bottom:40px;position:fixed;}
- Ganti kode <body> dengan <body id='to-top'>
- Selanjutnya tambahkan kode berikut di atas kode </body>.
<div id='back-to-top'>
<a href='#to-top' title='Back to Top'><img alt='back to top' border='0' height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/></a>
</div>
<a href='#to-top' title='Back to Top'><img alt='back to top' border='0' height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/></a>
</div>
Catatan :
- height = tinggi image
- width = lebar image
- Silakan ganti image (http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu.
