Membuat Tombol Back to Top (kembali ke atas)

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

5. 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>

6. 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/AVvXsEgYtUJR6CBgrl4eqzZgFB8poStnduCXw34xmG_txXVGbO7BU26n8sRxLssOegCUCUc3DGzQkYE4uiOWAhMRbRdUbuDdI42FTA_0C5_BhS_J8O7bAmU11EBBkwIUS_qOgp_rxj7AXbj8cI4/s1600/1303862205_top.png"/></a>

7. 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/AVvXsEgYtUJR6CBgrl4eqzZgFB8poStnduCXw34xmG_txXVGbO7BU26n8sRxLssOegCUCUc3DGzQkYE4uiOWAhMRbRdUbuDdI42FTA_0C5_BhS_J8O7bAmU11EBBkwIUS_qOgp_rxj7AXbj8cI4/s1600/1303862205_top.png’/></a>6