Cara Membuat Tombol Back To Top Di Blogger

Cara Membuat Tombol Back To Top Di Blogger-Tau gak maksud dari judul diatas apa maksudnya? Mungkin Anda pernah berkunjung ke blog orang lain dan tidak sengaja ketika lagi baca artikel tiba-tiba muncul ikon panah ke atas biasanya berada di pojok bawah dan ketikan kita klik maka akan secara otomasis halaman kembali ke atas. Baca Juga: Cara daftar Dan Memasang DMCA Di Blogger

Jadi tau kan sekarang maksudnya, dengan menambah fitur ini maka pengunjung tidak akan kesulitan ketika membaca artikel dan sudah sampai bawah lalu ingin kembali ke atas tanpa harus menggulir mouse, hal ini sangat berguna apa lagi jika artikel yang ditulis cukup panjang.

Nah lalu bagaimana cara membuat tombol back to top pada platform blogger atau blogspot? Tenang seperti biasa saya akan berikan panduannya bagaimana cara membuat tombol back to top. Berikut adalah langkah-langkahnya:

Sebelum kita memulai pastikan pada blog Anda sudah terpasang kode jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Atau

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Jika belum pasang terlebih dahulu dengan cara

1. Login ke akun blogger
2. pada halaman dashboard pilih Template lalu Edit HTML
3. Cari kode </head>, selanjutnya copy dan paste kode diaatas tadi tempat diatas kode </head>
4. Terakhir simpan

Selanjutnya kita pasang widget Back to Top di bloga, berikut adalah langkah-langkahnya:

• Pada halaman blog pilih Tata Letak
• Lanjut klik tambah gadget
• Pilih HTML JavaScript
• Copy dan paste kode dibawah ini pada kolom HTML JavaScript

<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="http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/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>

• Terakhir Simpan

Kode yang berwarna merah adalah gambar back to top, Anda dapat mengganti dengan gambar yang diinginkan atau dengan kode dibawah ini:

http://4.bp.blogspot.com/-nhvmIT-UOiY/USDh-EyeKDI/AAAAAAAAAjE/hjEdj5OMvO0/s1600/back+to+top.png

http://3.bp.blogspot.com/-ggvoO88bhfM/USDi6IWVtFI/AAAAAAAAAjc/n4vpSkZgR00/s1600/back+to+top.png

http://2.bp.blogspot.com/-BkNGUImcIV4/USDcBMHYjqI/AAAAAAAAAig/qEtwRO4pH6Q/s1600/back+to+top.png

http://3.bp.blogspot.com/-Urx3H8aFQmY/USDkbnvSsLI/AAAAAAAAAkA/Wm4OkKT9yRI/s1600/back+to+top.png

http://3.bp.blogspot.com/-WH_FEtT_Cvs/USDjPDtErPI/AAAAAAAAAjk/0BNlHdiUu9w/s1600/back+to+top+button.gif

http://3.bp.blogspot.com/-X5sq11nsiNY/USDiu1zNWSI/AAAAAAAAAjM/8Y6vn3Vx6kQ/s1600/back+to+top+button.png

http://2.bp.blogspot.com/-PEmadyDjsUw/USDjUyqlWsI/AAAAAAAAAjs/oVRttmskRfc/s1600/back+to+top+button.gif 

http://2.bp.blogspot.com/-3sXsLU1aW3s/USDkamRLRZI/AAAAAAAAAj4/UOoh-GJWUdI/s1600/back+to+top+button.png

http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png 

http://3.bp.blogspot.com/-yhJXvPXAuNw/UQLk-mySRjI/AAAAAAAAAXg/pIAnUf9q1c8/s1600/Back-To-Top.png

http://4.bp.blogspot.com/-BWmnRp-sR9o/USDmkStjAcI/AAAAAAAAAko/q6nJN8bXMZ8/s1600/back-to-top-button.png

http://2.bp.blogspot.com/-C3ZJY99YKfo/USDmD4KR-zI/AAAAAAAAAkY/3fO83hpF2Zk/s1600/back-to-top-button.png

http://1.bp.blogspot.com/-b3YWne8aCdw/USDmXTnyUiI/AAAAAAAAAkg/SieNqYTVQKQ/s1600/back-to-top-button.png

http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png

http://2.bp.blogspot.com/-36z7H3mWlZ0/USDizr47anI/AAAAAAAAAjU/8SoPm-odD7I/s1600/back_to_top_button.png

Itu dia Cara Membuat Tombol Back To Top Di Blogger, dengan memasang tombol back to top pada blog bukan hanya memberikan kenyamanan dan kemudahan pada pengunjung tapi bisa memberikan efek dan warna yang berbeda. Nah jika Anda ingin belajar blog silahkan kunjungi halaman Panduan Cara membuat Blogger dan Optimasi Seo

Nah untuk Anda yang ingin membuat tampilan blognya lebih cantik dan enak di pandang oleh pengunjung sehingga pengunjung betah berlama-lama di blog Anda, coba pasang widget keren koleksi kami, silahkan kunjungi halaman Kumpulan Widget Keren Untuk Mepercantik Blogger

KUNJUNGI TOKO KAMI DISINI

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn