..:: Arian-Cyber ::..: Menambahkan Tombol Back to Top pada Blog

Suatu ketika blogging dan membuka salah satu blog dan di pojok kanan bawah ada sebuah tombol navigasi, jika di klik maka akan kembali ke halaman paling atas.

Nah, pada kesempatan kali ini saya akan sedikit membahas bagaimanaa cara membuat tombol back to top tersebut dan jika di klik maka akan menuju ke halaman paling atas. Navigasi back to top ini menurut saya sangat membantu pembaca blog, terlebih postingan yang di buat sangat panjang.
Sekarang saya akan melihatkan bagaimana cara membuatnya...

Silakan masuk ke Dashboard Blogger anda setelah itu klik Template dan pilih Edit HTML.
Temukan kode dibawah ini.

]]></b:skin>

Letakkan kode berikut sebelum kode diatas.

 #backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Selanjutnya cari kode berikut.

</body>>

Sebelum kode </body> tambahkan kode berikut.

<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7THWhoIOahYYDuOHrtXJfpoZ7kolM3GLL2Rb3cm0Jbl31NHkzsw9Rh6IHvaj1u54397HTnuc4RHt6V99LGsBeMn4bEB8LTzgYcfLm4hUFyrVJhp_D_mHt9XgvqA0E4FDHIcK3ZlEgL4yO/" alt="back to top" /></a>

Kemudian cari kode berikut.

<head>

Letakkan kode berikut dibawah kode tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>

Setelah itu Simpan template anda and Finish !

Sekian pembahasan saya mengenai membuat tombol navigasi back to top pada blog, silakan berkomentar dengan baik dan apabila ada kesalahan dalam postingan saya, mohon untuk dibenarkan. Semoga bermanfaat !

/* Life runs on Codes */

//.D

..:: Arian-Cyber ::..

Pages

Thursday, 17 October 2013

Menambahkan Tombol Back to Top pada Blog

No comments:

Post a Comment