Membuat Tombol Back to Top (kembali ke atas)

Post by Unknown on Friday, May 6, 2011 | 3:08 AM


Misal saja di blog anda artikelnya sangat panjang sekali dan pada waktu para pengunjung sudah membaca atau melihat-lihat artikel tersebut mereka ingin kembali lagi membaca artikel pada awal. Bila saja kita menggunakan scroll mouse itu memang bisa namun kurang efektif, nah oleh sebab itu kita bisa menggunakan tombol back to top supaya dengan mengklik tombol tersebut secara otomatis kita akan dituntun kembali pada halaman atas.

  1. Login ke Blogger.
  2. Pilih tab Design  - Edit HTML (centang expand template widget).
  3. Cari kode ]]></b:skin>.
  4. Simpan kode dibawah ini tepat diatas code ]]></b:skin>.
#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}

Keterangan :
  • background:#000; - Latar belakang/background berwarna hitam 
  • color:#fff; - tulisan back to top berwarna putih 
  • right:-20px; bottom:150px; - Posisi berada dibawah sebelah kanan 
  • -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px - sudut Tombol melengkung
  1. Sekarang simpan kode berikut diatas kode </head>.
<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'  type='text/javascript'/>
<script  src='http://z33s.googlecode.com/files/kaluhur.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()  &gt;= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function()  {
$(&#39;#top-link&#39;).topLink({
min: 300,
fadeSpeed:  500
});
$(&#39;#top-link&#39;).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

  1. Simpan kode berikut tepat diatas kode </body>.
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0J4k9cDGhIEREIkCk2_Ph65HVnR1U7CwxxeQw02kMBStRLlVwTcf0KiYDIPd85qGjz7fHwLkD9KsKMfh3BXK3FuR_8MAccx3wo5YcKcUGeJXphM7Ve-xDi7JHHU881-ZTpoBVascA88/s1600/1303862205_top.png"/></a>
  1. Jika sudah, coba anda Save template dan coba anda lihat hasilnya.
Catatan :
Jika seandainya saja tombol tersebut tidak merespon apa-apa, coba anda hilangkan “top” pada “#top” dan menjadi seperti ini :
<a class='no-click no-print' href='#' id='top-link' rel='nofollow' title='Back to top'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0J4k9cDGhIEREIkCk2_Ph65HVnR1U7CwxxeQw02kMBStRLlVwTcf0KiYDIPd85qGjz7fHwLkD9KsKMfh3BXK3FuR_8MAccx3wo5YcKcUGeJXphM7Ve-xDi7JHHU881-ZTpoBVascA88/s1600/1303862205_top.png’/></a>6

9 Comments:

  • wah pertamax ni gan!!! boleh ni gan di coba di blog ane!!!

  • @alvi : sipp gan..monggo silakan dicoba deh n semoga berhasil gag ada masalah dan rintangan, hahahahaha

  • makasi infonya sob...
    test dulu....

  • wah thanks y Horier...Info N tutorial nya sanagt bermanfaat...
    saran dan Ilmu yg anda share sangt bermanffat buat saya...thx bgt y....

  • @lyrics : silakan dicoba sob

    @grosir : waduh terimakasih deh jadi tersandung nih .. eh salah, tersanjung ^^

  • makasih infonya sob, sangat bermanfaat

  • Post a Comment

    Mari kita saling voting dan berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada teman yang lain agar lebih bermanfaat. Terima kasih banyak saya ucapkan, Salam Blogger teman . . .