Skip to HeaderSkip to PostSkip to Footer

Cara Membuat Tombol Back To Top di Blog

Table of Content

    Cara Membuat Tombol Back To Top di BlogAssalamualaikum...
    Halo Sobat J4rviz .... Pada Kesempatan kali ini J4rviz Blog Akan Share Tutorial Memasang Tombol Back To Top di Blog dengan Efek Smooth

    Sebelumnya efek smooth itu seperti apa sih ?
    Fungsi dari Pemakaian Efek smooth scrolling ini selain mempercantik tampilan komentar baru yang baru tampilkan juga berfungsi sebagai penanda bahwa komentar yang berefek adalah yang baru saja ditampilkan, selain itu tidak akan menambah Loading blog sobat masing-masing.

    Oke Deh Langsung Aja :
    a. Buka Dashboard Blog
    b. Masuk Ke Tempate
    c. Pilih Edit Template
    d. Centang Pada Expand Template Widget
    e. Dan Ikuti Cara Di bawah ini
     
    1. Css
    Cari Code <style type='text/css'> Atau ]]><b:skin>
    Jika Sobat Menemukan Code <style type='text/css'>  Copy Code di bawah dan Paste di Bawah Code
    <style type='text/css'>
    Jika Sobat Menemukan Code ]]><b:skin> Copy Code Di Bawah dan Paste Di atas Code ]]><b:skin>
      /*back to top
    ----------------------*/
    #BounceToTop {background:#2c3e50;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
    #BounceToTop:hover {background:#3d566e;}
    #BounceToTop:before {content:""; position:absolute; bottom:15px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
    #BounceToTop:after {content:""; position:absolute; bottom:15px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #2c3e50 transparent; line-height:0;transition:all .3s ease-out;}
    #BounceToTop:hover:after {border-color:transparent transparent #3d566e transparent;}

    2. Javascript
    Cari Code <body> jika Sudah.. Copy dan Paste Code Dibawah Di bawah Code <body>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(function() { $(window).scroll(function() { if($(this).scrollTop()>500) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
    $('#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>

    3. HTML
    Cari Code </body>
    Copy Code Di Bawah Dan Taruh Di Atas Code </body> 
    <div id='BounceToTop'></div>


    Sekian Dari Saya.... Semoga Artikel ini Bermanfaat
    terima kasih sudah mau berkunjung dan jangan lupa Komen + Follow Blog ini Untuk Mengikuti Update Terbaru J4rviz Blog
    Wassalamualaikum...

    Comments

    Post a Comment

    This is a comment message for you.