Cara Memasang Tombol Back to Top

Tombol Back to Top Simple

Tombol Back to Top (Kembali ke Atasbisa kita tempatkan di blog untuk memudahkan visitor agar bisa lebih mudah untuk kembali ke halaman teratas.

back to top
Jadi, kalau kita pasang tombol back to top ini visitor bisa langsung memilih tombol tersebut untuk pindah ke halaman paling atas sendiri.

Untuk script kali ini, saya mengikuti dari contohblognih.blogspot.com salah satu master blogger Indonesia yang menjadi langganan saya untuk belajar blogger.

Untuk model tombol back to top ini akan muncul saat visitor berada pada halaman website/ blogger kita. Berikut tutorialnya silakan ikuti dengan seksama.

Tutorial

Pertama, Buka blogger pilih Template lalu pilih Edit HTML.
Kedua, Pasang kode CSS berikut diatas </b:skin>
#MD-StoTop {padding:12px;position:fixed;bottom:5px;right:3px;cursor:pointer;z-index:999}

Ketiga, Pasang kode Javascript berikut diatas </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>

Keempat, Pasang kode HTML berikut diatas </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>

Kelima, Save Template. Ini hasil jika anda berhasil.
jadi


Sekarang tombol back to top sudah terpasang di blog anda, jika belum muncul silakan baca lagi tutorialnya secara seksama.

Jangan lupa juga baca trik-trik simple blogger lainnya DISINI

Share this

Related Posts

Previous
Next Post »

20 komentar

komentar
28 April 2015 pukul 20.25 delete

Nice, punya saya udah ada sob, mungkin dari template saya.. :)

Reply
avatar
28 April 2015 pukul 20.29 delete

Bagus sob, kalau di blog saya udah ada tombol backnya.

Reply
avatar
29 April 2015 pukul 05.43 delete

Silakan gan.. semoga bermanfaat

Reply
avatar
1 Mei 2015 pukul 20.49 delete

wih izin coba gan, sangat baik memasang tombol tersebut

Reply
avatar
2 Mei 2015 pukul 07.10 delete

sipp gan..semoga berhasil..

Reply
avatar
2 Mei 2015 pukul 20.52 delete

ini yang saya cari gan...
di blog saya belum ada yang beginian :) thanks

Reply
avatar
2 Mei 2015 pukul 22.44 delete

sipp..alhamdulillah kalau bisa bermanfaat

Reply
avatar

1. Dilarang komentar SARA
2. Promosi boleh tapi dengan syarat (no sex, judi dan hal yang terlarang lainnya)
3. Cukup perhatikan nomor 1 dan 2 saja
4. Thank you for visiting