Smooth Scroll jQuery Back To Top Button.
Sebelumnya sobat pasti udah pada tau kan kegunaan tombol ini? kalo belum tau Back To Top Button itu kegunaannya adalah untuk kembali ke atas, intinya kalo sobat sudah berada di bagian bawah halaman web atau blog dan jika sobat menekan tombol Back To Top maka sobat akan lansung di bawa kembai ke bagian atas, tanpa sobat harus susah-susah menggerakkan cursor ataupun scroll, tapi tombol back to top ini tergantung pemilik web atau blog memasangnya atau tidak.

Kegunaannya cukup istmewa bukan kegunaanya?!?

Nah dalam postingan kali ini blog ini akan membahas tentang bagaimana cara memasang Back To Top Button di blogger dan kali ini kita akan menggunakan Jquery jadi akan lebih simple pemasangannya seperti pada judul di atas Memasang Tombol Smooth Scroll to Top With jQuerydan pemasangan Tombol Smooth Scroll to Top With jQuery ini akan kita pasang di blogger sobat. oke kita lansung aja ya, alnya perut saya dah laper ni, cekidot . . .

Cara pemasang Tombol Smooth Scroll to Top With jQuery Di Blogger:

1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML.

3. Sekarang sobat centang  Expand Template Widget ➨ Download dulu template sobat, untuk mengantisipasi bila terjadi kesalahan.


4. Selanjutnya pada kotak edit template sobat cari kode <head> jika kesulitan mencarinya, coba sobat baca Cara Cepat Mencari Kode HTML.


5. Jika sudah ketemu copy kode di bawah ini dan paste atau letakkan di atas kode tadi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

6. Masih di dalam edit template, sekarang sobat cari kode </head> ,lalu copy paste atau letakkan kode berikut di atas kode </head>.

<style type='text/css'>
#O.W toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZ7zssnmUdOBW5Y2feQMRAwsvB8f9YoF32iQ8G_rbzjXocDKHo555vkhjlpWzVZUGyhQDSd7m3jTDqdcidZFvNCsANBkk6ENCKCnpco5t4cVS3OuQlH1crFEh5RhnbVJngWR8guIiHWM/s1600/otowebsite.blogspot.com_totop.png) no-repeat left top;}
#O.W toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZ7zssnmUdOBW5Y2feQMRAwsvB8f9YoF32iQ8G_rbzjXocDKHo555vkhjlpWzVZUGyhQDSd7m3jTDqdcidZFvNCsANBkk6ENCKCnpco5t4cVS3OuQlH1crFEh5RhnbVJngWR8guIiHWM/s1600/otowebsite.blogspot.com_totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#O.W toTop:active, #O.W toTop:focus {outline:none;}
</style>
<script src='http://otowebsite.googlecode.com/files/otowebsite_jquery.totop.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery);
/*]]>*/
</script> 

7. Simpan, dan lihat hasilnya.

Keterangan:
Jika di template sobat sudah ada terinstal jquery/1.6.4 maka sobat tidak perlu memasang kode yang pertama lagi.

Nah sekian dulu untuk kali ini,semoga bisa bermanfaat!!!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles kali ini!

Posting Komentar Blogger Disqus

  1. makasih banyak buat infonya,, nice post..

    http://goo.gl/ayK8bh

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top