Cara Memasang Back To Top di Blog

Memasang Back to top pada blog, kenapa ini juga menjadi langkah mempercantik tampilan blog?? Coba dipikir2,sewaktu sobat masuk kedalam blog tertentu dan membaca isi blog sampai kebawah.Apakah pernah terlintas di pikiran sobat gimana cara cepat agar "kembali lagi keatas" tanpa menggeser kursor dari mouse.

Mungkin ada yang berpikir kalau itu bukanlah menjadi suatu kendala tapi mungkin ada diantara sobat yang ingin membantu mempermudah pembaca toh.

Nah disini Kumpan akan memberikan trik untuk menampilkan menu tersebut di blog sobat,agar pembaca yang lain dipermudah kerja nya saat menjelajahi blog nya sobat tanpa harus cape2 narik kursor mouse ke atas lagi.Dan caranya tidaklah susah.

Berikut langkah-langkah untuk menerapkannya :

1. Seperti biasa Login(masuk) terlebih dahulu ke blogspot
setelah itu masuk ke menu LAYOUT/TATA LETAK seperti yang terlihat gambar dibawah ini

2. Lalu klik ADD GADGET/TAMBAHKAN GADGET, terserah mau yang tulisan di tengah atau disamping kanan

3.Lalu akan muncul folder baru, di folder baru tersebut silahkan sobat cari "Html/Javascript" dan klik tanda +

4. Dan di folder "konten" sobat masukkan kode script dibawah ini :

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwaa9dKb40Lye5MlHnl7PlTXR74rxAHl7H7e-HToAU7E1flBVDTiDFkoaHTvPdSQx9ywdauKhAIy0AoVHhGGxtDsZGIBF5pEXZbr5jUyA0swxBVnMqpcOpEc5ZO2F2_9RunkQJDhtd0o/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });

    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>


KET : untuk huruf yang berwarna merah tersebut diatas bisa sobat ganti dengan pilihan gambar sesuai selera sobat, yang misalnya sobat cari gambar yang lain di google dan menyimpan lokasi web/link gambar tersebut.Atau kalau repot sobat bisa menggunakan gambar yang sama saja.

contohnya seperti terlihat dibawah ini :

5. Setelah itu sobat Save/simpan. Jadi dah.Mudah bukan


Jika bingung untuk mencari-cari gambar "back to top" tersebut. Kumpan akan merekomendasikan beberapa contoh gambarnya dan link/web nya dibawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYxd2jMXV_tBXXe4iKlrx6mqSFsy_jRE-ajXvKU6Q6fR-glAuWaMxyJycavSBMRLKWFwBwDvbkT8Xrjic7nZbw91QZS2shon0cKH21SP7hEEy9UPRa9sdD0CgQ_xhyphenhypheneh5FWbyBAjVuZvE/s1600/back_to_top_button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxuXhB0Cth0w2FIw-A8FtoubDOr6tpiJakPvsxP5iA1vBILB0XOmuxHRGcWCySsWuuEu03kIDYGf818Z5ZblvrgMgkvD1oV-w8X0MoMAAU0tQ5_sBdcJQ02AA09NQjB_ppFdqF0-gKw0/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh09yNlgLfGTSvX-0ZeTc5gh12B7NqOvBl3WxRoLJrC8TsCFvV7-y33QTro0uCgGpiYPOK2wcy4KS5dOJmC4vzo6d7rw5t9IkJZu2j9PGtAiBIVYc-0VK168YqW8I4fOjeggy-fSQfVQ_0/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwaa9dKb40Lye5MlHnl7PlTXR74rxAHl7H7e-HToAU7E1flBVDTiDFkoaHTvPdSQx9ywdauKhAIy0AoVHhGGxtDsZGIBF5pEXZbr5jUyA0swxBVnMqpcOpEc5ZO2F2_9RunkQJDhtd0o/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Qt4hKnMHpnSq-E3VYn1RIrFUjdLfbjobltzSMAqQ6oQsJ-CSOQ8jCgR_o96EP4JPL9JnT51QB1iw8I0VNmjQpWAEDrlXgyIa8B-_bGrTg8ha_P8_vKPLKfTsiSZSyqZzKasMZ2AikOw/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_LutI8w5Uc-UzOoefZci_kbU_PLA6tEyf4eRi7b_0VExI51bjNIvQhz6shkpH_N6lCNHJiID5G1XjdcnpDPVordN-YUF31VxFLBo2QAvJOO8l4Vafacf6-2d4U51Lu1wQib_lpc7wM4/s1600/back+to+top.png