Cara Memasang Back To Top Di Blog

Cara Memasang Back To Top Di Blog

Cara Memasang Back To Top Di BlogKali ini saya akan membagikan cara memasang tombol back to top di blog Anda.
Nantinya tampilannya akan seperti ini:

Cara Memasang Tombol Back To Top

Dan jika diterapkan diblog nantinya akan muncul seperti ini:

Cara Memasang Back To Top Di Blog


Dan fungsi dari gadged ini yaitu mempermudah pengunjung blog untuk scroll up pada postingan Anda. Jadi pengunjung gak perlu susah-susah menggeser layar ke atas. Tinggal klik langsung geser ke atas dengan sendirinya. Heheee…

Baca Juga : Cara Agar Artikel Dapat Muncul Di Page One Google

Ok langsung saja.

Cara Memasang Tombol Back To Top:

– Masuk kemenu “tata letak/layout”.
– Kemudian klik “add gadged” di side bar.
– Lalu pilih “HTML/Javascript”
– Copy pastekan kode dibawah ini akan ada 2 kolom, kolom yang atas biarkan kosong aja.

<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://3.bp.blogspot.com/-X5sq11nsiNY/USDiu1zNWSI/AAAAAAAAAjM/8Y6vn3Vx6kQ/s1600/back+to+top+button.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>


– Lalu simpan dan lihat perubahannya.

Atau bisa langsung ditanamkan ke template blog Anda dengan cara:
– Klik “template”.
– Edit Html
– Cari </body>
– Pastekan kode tersebut tepat diatas kode </body>.
– Lalu simpan dan lihat diblog Anda.

Jika masih belum muncul coba pastekan kode Jqueri ini ke template blog Anda. Caranya:
– Klik “template”.
– Edit Html.
– Cari (CTRL+F) kode </head>.
– Copy dan pastekan kode ini diatas kode </head>.

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

– Lalu save.

Saya hanya menggunakan cara pertama dan terbukti sukses diblog saya. Heheeee…
Dan sebagai penutup.
Thanks to contohblog yang sudah membantu, karena sudah saya ubek-ubeg di google dan ketemu yang cocok disana.

Semoga bisa membantu Anda juga.


2 Replies to “Cara Memasang Back To Top Di Blog”

  1. Nice post. I be taught one thing more difficult on totally different blogs everyday. It will all the time be stimulating to read content material from other writers and observe just a little something from their store. Id favor to make use of some with the content material on my weblog whether you dont mind. Natually Ill offer you a link on your web blog. Thanks for sharing.
    (Link on comment will be removed)

  2. Thank you, I have recently been looking for information about this topic for ages and yours is the best I’ve discovered till now. But, what about the bottom line? Are you sure about the source?
    (really sorry, Link has been removed)

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top