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" ini merupakan rekomendasi dari mas Rudi (Blog Rudi Azhar) yang merupakan salah satu admin optimasi blog.
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.
- Blog demonya ada di utuharies.blogspot.com.
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 (Kenapa image tidak muncul?).
- Simpan template.
Selamat membuat back to top...
Nice sharing.. Back to top membuat pembaca lebih mudah untuk manjat keatas. hehe :)
BalasHapusbiasanya tombol/link Back to Top cuman bisa aktif satu kali aja, jadi klo pada halaman itu sudah diklik..maka klo diklik lagi g akan scroll totomatis ke atas (back to top) lagi
BalasHapusmampir :D
@Ka Damar : OB rasa untuk back to top ini tidak begitu kk. Tergantung peletakkan linknya (a href='#to-top') dimana? Klo peletakkannya pada posting tertentu, jelas cuma berlaku untuk posting tersebut. Tapi kalau di body, menurut OB berlaku untuk seluruh halaman blog.
BalasHapusO....bener Boz . . ..tak coba :D
BalasHapusmakasih gan tutorialnya.....
BalasHapusum.... makasih tutorialnya sobat....
BalasHapussalam kenal dan salam hangat dari blogger Bali
Salam Sukses selalu Sob...!
BalasHapussalam kenal..Sob..kunjung balik ya!
BalasHapustrims info nya sobat...
BalasHapussalam kenal, bagus banget info2 disini
ulasan yang informatif Sob..lanjutkan..sukses selalu!
BalasHapusthank's tas sharingnya....
BalasHapusKeren juga ya, tapi bisa ditambahin gambar ga tuh?
BalasHapus@Reza Winandar : Untuk back to top cara 1 bisa kk, tinggal mengganti kode
BalasHapus<a href='#to-top' title='back to top'>back to top</a>
dengan kode
<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>
Silakan rubah alamat image di atas (src), height, dan width.
menarik sahabat,pada saat ke atas kelihatan seperti berjalan..
BalasHapusnice :) tanks you
BalasHapusajeb, Gan! suxes yah! :D
BalasHapusberhasil mas, tapi kok gag disamping yo?
BalasHapusTHANKS MAZZZ KEBANTU BANGET NIH,.. SERING2 SHARE YA MAS,.. NEW BIE NIH,,, MASIH AWAM,, MASIH BUTUH BANYAK BELAJAR. MAKASIH BANGET.
BalasHapuswahh mante[p gan... jadi lebih lembut scroolnyaa makasih yaa
BalasHapussaya sudah coba n berhasil,m makasi yah :)
BalasHapusThx tutorialnya.... :D
BalasHapus