Khairul Abdal-19 April 2012 Hey kawan kita ketemu lagi, apa kabar semuanya? pasti sehatkan? disini saya
akan membawa postingan terbaru dan terhangat.
Cara 1 :
- 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 (Kenapa image tidak muncul?).
- Simpan template.
2 komentar
Click here for komentarjadi pengen nyobaa,, nice share gan_
Replyoke gan
Reply1.Komentarlah Dengan Memakai Account Google dan Open ID
2.Komentarlah Dengan Baik atau Sopan
3.Jangan Kirim SPAM ConversionConversion EmoticonEmoticon