Home » , » Cara Memasang Tombol Back To Top Keren Abis

Cara Memasang Tombol Back To Top Keren Abis

Written By Tanti Yuhu on Thursday, July 9, 2015 | 2:03 PM

Cara Memasang Tombol Back To Top Keren Abis - Cara memsang tombol ini sangat mudah untuk sebgain blogger namun beda cerita jika yang melakukan adalah seorang pemula tentu di buat pusing tuju keliling, namun sayangnya ada code yang akan membantu anda dalam mengatasi masalah ini kode tersebut tinggal di pasang di blog dan langsung bisa melihat hasilnya. memangnya gampang? iya gampang kok.. berikut adalah cara yang bisa anda lakukan untuk membuat tombol back to top nya. nah berikut adalah bagaimana caranya membuat dan memasang back to top yang ada di pinggir blog kelihatan keren abis dan seperti profesional.

cara membuat Tombol "Back to Top"

Bagaimana Cara Memasang Tombol "Back to Top"

1. masuk ke blogger dan pilih Tempate - Edit HTML
2. Copas kode CSS berikut ini di atas kode  ]]</b:skin>


#MD-StoTop {padding:12px;position:fixed;bottom:5px;right:3px;cursor:pointer;z-index:999}

3. Pasang kode Javascript yang berwarna biru  di bawah ini lalu tekkan kodenya di atas kode </head>

<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr(&quot;href&quot;);
    if ($(window).scrollTop() != &quot;0&quot;) {
        $(this).fadeIn(&quot;slow&quot;)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
$(function() {
    $(&quot;#MD-StoTop&quot;).scrollToTop();
});
</script>

4. Pasang kode HTML berikut ini di atas kode </body>

<a href='#' id='MD-StoTop'><img alt='back to top' src='http://2.bp.blogspot.com/-USm_7qiKVXc/UxUYG09tz_I/AAAAAAAACTA/6BRDkVAwLek/s1600/backtotop.PNG'/></a>


5. yang berwarna merah di atas adalah gambar yang bisa anda rubah dengan gambar anda sendiri lalu jika sudah klik Save Template!

silahka di lihat hasilnya, ya.. terima kasih dan selamat mencoba.
Share this article :

0 comments:

Post a Comment

 
Support : sitemap | about me | policy privacy
Copyright © 2015. Cara Membuat facebook Dan Twitter - All Rights Reserved
Proudly powered by Blogger