April 14, 2015

Cara Memasang Tombol "Back to Top" di Blog Blogspot

April 14, 2015

Cara Memasang Tombol "Back to Top" di Blog Blogspot. Hanya Muncul Saat Halaman Blog Discroll ke Bawah.

Tombol "Back to Top"
TOMBOL "Back to Top" (Kembali ke Atas) adalah elemen ekstra dalam sebuah blog atau situs web untuk memudahkan pengunjung kembali ke bagian atas blog tanpa scroll mouse.

Dengan adanya tombol back to top, pengunjung tinggal klik tombol itu dan tampilan bagian atas blog akan muncul secara otomatis.

Sebelumnya CB sudah dua kali share tentang Cara Menampilkan, Membuat, atau Memasang "Back to Top" Bottom (Tombol Kembali ke Atas) di Blog Blogspot, yaitu Cara Memasang Back to Top di Blog Versi 1 dan Cara Memasang Back to Top di Blog Versi 2.

Tombol "kembali ke atas" versi 1 menggunakan Javascript. BtT versi 2 menggunakan CSS/HTML saja, tanpa JS, sehingga Fast Loading.

Kali ini, sebut saja Versi 3, CB share Cara Memasang Tombol "Back to Top" yang kodenya diambil dari template blog Newswire yang sudah CB modif menjadi Newswire CB (for sale!).

Tutorial dan kode-kode untuk memasang tombol Back to Top (BtT) ini sudah dipraktekkan dan sukses di template demo New Max Mag. Di template aslinya, Max Mag, tidak ada tombol kembali ke atas.

Apa bedanya tombol BtT yang versi 3 ini dengan versi sebelumnya? Bedanya, dua BtT sebelumnya muncul terus, halaman discroll ataupun tidak. Sedangkan versi 3 ini, tombol "kembali ke atas" alias Back to Top itu HANYA MUNCUL jika halaman blog dicroll ke bawah. Itu dia kelebihannya.

Cara Memasang Tombol "Back to Top"

1. 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 berikut ini 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>

Catatan:
1. Kita bisa mengganti gambar panah (Tombol "Back to Top" ) dengan gambar pilihan sendiri dengan cara mengganti URL Gambar yang berwarna merah. 
2. Lihat: Koleksi Gambar Tombol Back to Top untuk Blog

5. Save Template!

Kini Tombol "Back to Top" sudah terpasang di Blog Blogspot Anda! Good Luck! (http://contohblognih.blogspot.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

7 comments on Cara Memasang Tombol "Back to Top" di Blog Blogspot

  1. Iya benar, wong postingnya juga di sini kok:
    http://contohblognih.blogspot.com/2014/12/tombol-back-to-top-bisa-mengurangi-seo.html

    ReplyDelete
  2. maaf min, tapi menurut pengamatan ane hampir semua produser template blogger sekarang ini, baik free maupun premium menerapkan tombol back to top dalam templatenya, apa itu sudah jadi standart blogger sekarang, atau sekedar menambah kenyamanan user?

    ReplyDelete
  3. Iya, sudah menjadi "trending" untuk kemudahan pengguna

    ReplyDelete
  4. min kira-kira saat kita memasang back to top ini akan memperberat loading blog kaga?

    ReplyDelete
  5. Replies
    1. sama-sama jung :) --maksudnya: pengunjung :)

      Delete

Contact Form

Name

Email *

Message *