Cara Membuat Tombol Back To Top di Blog

Kali ini saya akan share  tentang Cara Membuat Tombol Back To Top di Blog, jika anda tertarik memasangnya di blog anda silahkan ikuti langka langka berikut ini :




1. Silahkan anda copypaste kode di bawah ini lalu taruh di atas kode skin ]]></b:skin> 

#BounceToTop { background: #3498DB; text-align: center; position: fixed; bottom: 14px; right: 20px; cursor: pointer; width: 30px; height: 30px; padding: 5px; display: none;}
#BounceToTop:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #444 transparent; line-height: 0; transition: all 0.3s ease-out;}
#BounceToTop:hover:before { content: &quot;&quot;; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #ddd transparent; line-height: 0;}
#BounceToTop:after {  border-color: transparent transparent #3498DB transparent; content: &quot;&quot;; position: absolute; bottom: 10px; right: 11px; width: 0; height: 0; border-style: solid; border-width: 0 9px 12px 9px; line-height: 0;}

Note: jika anda menggunakan template yang saya bagikan taruh kode tersebut di sekitar kode yang saya blog di bawah ini

Mulai dari kode <style type='text/css'> sampai kode penutup </style>

2. Setelah itu cari kode </body>
3. Lalu taruh kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#BounceToTop').slideDown(200);}
        else {
$('#BounceToTop').slideUp(300);}
});
$('#BounceToTop').click(function () {
$('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);
});
});
//]]>
</script>
  <div id='BounceToTop'/>

Note: Untuk template yang saya bagikan taro kodenya di atas kode  &lt;!--</body>--&gt;&lt;/body&gt;

4. Setelah itu simpan dan lihat hasilnya


Referensi : http://www.catataninfo.com/2014/08/cara-membuat-tombol-back-to-top-di-blog.html

Berbagi :