Apakabar Teman-teman blog Aapaaja, kali ini kita akan membahas bagaimana cara membuat tombol back to top. Pembahasan kali ini hampir sama dengan pembahasan sebelunya yaitu Tombol Back to Top pada Blog yang merupakan pemberian tombolnya dengan cara yang hampir sama yang membedakan hanya pada kodenya yang sederhana, sehingga blog kita akan menjadi ringan untuk di load. Sedangkan pembahasan kali ini yang memasang tombol Back to Top Pada Blog dengan Efek Jquery Smooth memiliki kelebihan tersendiri yaitu ketika kita mengklik tombol ini kita akam melihat pergerakan yang natural, namun Tombol Back to Top pada Blog masih dapat di jadikan pilihan sesuai selera kita.
Baik, tidak berlama-lama mari kita langsung saja kita praktekkan. Langkah yang akan kita lakukan sebagai berikut :
1. Seperti biasa Buka aplikasi kesayangan kita lalu pergi ke alamat blog dan Login seperti biasa.2. Berikutnya pilih tab Rancangan>Edit HTML>jangan lupa box Expand Template Widget di centang.
3. Selanjutnya Teman-teman lakukan pencarian code dengan fasilitas find atau tekan tombol ctrl+f lalu cari kode </head> lalu pastekan kode berikut diatas kode </head> ini :
<script src="http://projectjqueryku.googlecode.com/files/jquery.min.js" type="text/javascript">
Kode selanjutnya ditempatkan di bawah kode barusan. Nah mengapa tidak langsung saja di gabung? karna kode tersebut merupakan kode jQuery JavaScript Library v1.3.2 jadi apabila Teman-teman telah memasang jQuery ini tidak perlu lagi di pasang. Ok kita lanjutkan kode selanjutnya ini dia:
<!-- Back To Top -->
<script src='http://projectjqueryku.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->
<script src='http://projectjqueryku.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->
Langkah selanjutnya teman teman perlu menandai dimana letak tujuan akhir pergerakan, caranya Teman-teman lakukan pencarian kembali. Cari <body mengapa bukan <body> karna kadang dalam pemcarian kita, kode tersebut memiliki kode tambahan di dalamnya sebelum tanda ">" tanpa tanda kutip. Baiklah kita lanjutkan untuk kode tersebut Teman-teman lakukan pemanbahan kode id='top' sebelum tanda ">" tanpa tanda kutip. apabila tidak terdapat tambahan maka bentuknya kira-kira seperti ini.
<body id='top'>
Kita lanjutkan yang berikutnya yaitu kode CSS lakukan pencarian <b:skin> lakukan paste kode CSS berikut ini diatasnya.
#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}
Sekarang kita buat kode untuk tombolnya cari </body> pastekan code berikut :
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
Langkah Menambahkan tombol Back to Top kita telah selesai, namun ada yang bisa teman teman tukar Back to Top sesuai keinginan Teman-teman. Sekian dari Blog Aapaaja semoga bermanfaat. Akhir kata saya ucapkan terimakasih atas kunjungan Teman-teman.
Tidak ada komentar:
Posting Komentar