SEO Reports for freegratisnya.com

Cara Mudah Membuat Tombol Back To Top Di Blog


Cara Membuat Tombol Back To Top Di Blog-  
Sebenarnya cara ini sudah banyak yang menggunakannya. Apa sih fungsi dari tombol back to top itu sendiri, Tombol back to top bisa diartiakan sebagai tombol yang mengulang kembali keatas istilahnya itu bisa kembali keatas tanpa scroll melalui mouse.

Tombol ini sering digunakan bisa seorang blogger memiliki artikel yang panjang dan memiliki komentar yang banyak. Tombol ini juga memudahkan visitor/pengunjung untuk kembali ke navigasi blog.

Saya memang tidak menggunakan ini sebab saya tidak memiliki artikel yang terlalu panjang sehingga tombolok langsung  seperti ini menurut saya belum terlalu berguna untuk diterapkan di blog jelek saya ini.
ok langsung saja deh...

Berikut ini adalah cara membuat tombol back to top
Tapi sebelum saya kasih kodenya, tombol back to top terbagi jadi 2.
yang pertama : Back To Top langsung muncul tanpa di scroll kebawah.
yang kedua    : Back To Top Akan muncul ketika blog di scroll kebawah.

Saya akan membagikan kedua script membuat tombol kembali keatas atau back to top tersebut.

1. Tombol back To Top langsung muncul tanpa di scroll kebawah.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);' title="Kembali ke atas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglLbd28wwLJ1nhuce9FipktYyGmPjxFKJTQL2M3s7kMHFBWzJbuGCR3iOv82zVhvPhwyYvfpq0-UBwmcq3vPDpeJ4GpGgAjhE7VC5uGXsiCFD7_RBOiWE7JTzEy5JK3gm8iAPFBQVcbNo/s400/Back-to-top.png" /></a>
2. Tombol Back To Top Akan muncul ketika di scroll kebawah.

<style type='text/css' scoped='scoped'> #ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0kssmQHUwkYhuKpU1NDda5Hn0dlFihxOtzfiZpYTkbtBrSkLGixZipC8-OvnQMh2yaCnjwcejPf4bw5ddjM5NkmT92NdNndshWtee95JxUP6n7wozxdxHqx9CcHGCFwzl5TdG8MInehH-/s1600/arrow-up_basic_blue.png'/></div>
Catatan untuk cara kedua;
Anda juga harus memasukkan kode dibawah ini Tepat diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}}); $('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})}); </script>
 Hapus kode berwarna Biru jika sudah memiliki .Js Sebelumnya.

Nah itulah cara membuat tombol back to top yang saya ambil dari situs teriak.com
Semoga bermanfaat.

Posted by ko On Thursday, September 19, 2013 0 comments
Jika artikel ini bermanfaat,bagikan kepada rekan melalui:

Translate

Total Pageviews

Popular Posts