Sunday, January 29, 2017

[UPDATE] Cara Memasang Back To Top untuk Blogspot


Sering bete scrol, scrol, pas di blog? Kenapa tidak memasang back to top saja :) Caranya mudah, kok. 



CARA MUDAH MEMASANG BACK TO TOP:

Langkah 1: 

Coba cek di html template blog kamu, apakah sudah ada 1 kode jquery, yaitu kode seperti ini, atau belum dengan menggunakan ctrl + F:



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


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

Kalau ternyata belum ada, coba lakukan langkah ini:

- Template > Edit HTML - Cari (CTRL+F) kode
- COPY salah satu kode tersebut dan PASTE di atas kode tadi.
- Save!

2. Klik "Layout" (Tata Letak)

3. Klik "Add Gadget" di Sidebar
4. Pilih "Javascript/HTML"
5. Copy dan Paste kode berikut ini:


<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2e;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="PASTE LINK IMAGE NYA DISINI" />
<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>

Kode yang berwarna merah adalah link image "Back to Top". Ganti dengan mengisi link sesuai image yang kamu inginkan ya :)


Dan ini beberapa image cute yang bisa jd refernsi kamu:



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjodi0MOtZMNOI9pIW_0ohdCzY1PEyNZbRnQy6d3F-9VR0ua2m81C2xrYGS9bNkXJVULqO7Ig7cGs4Ys2ktJxlax5aSudv6pnYE85dGQkmefi5fefFFbKZ_onRmblNdttOumIaRabptbpI/s1600/back+to+top+3.png










https://1.bp.blogspot.com/-Q_IJL1QgWKM/WI2DLg9lojI/AAAAAAAACBU/bV-Hh8EbRkoVWvsVgecF2D9eVnmwuuQQCPcB/s1600/back%2Bto%2Btop%2B5.png









https://3.bp.blogspot.com/-MzDaZmZgC_A/WI2DLxlNT3I/AAAAAAAACBc/NjS5K0DLbV8oXrhKw
7moH
_vV2Gfw9uSFgCPcB/s200/back-to-top.png











https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUiec7PJqsL-QpJfbtuBwDbrS_FOQ_ri3Lxdx-zyOVqNCCk6Ok7ZQBjMdndZ2X1aiQw8ndyt9f03Aej9ESlEomvzCcEDC7RbV2kvy4Fs9zM-rG_aTOOoKj4hpOv-JQsmK79Oe4bpmhRc/s200/download+%25281%2529.jpg












https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKgxvdZTxH6M8y3niUVP5uEbdDVlTJ9BGjnaTCWBFiYyhziwDb9GhycMNPL3ETl7Mk5Hq1DjSJxIpx3iIlo_i9Y_uZkYb7t6Jh7vF9FNelAhny2sT00B7MiXOl1M_TndnHao1t5RKYzo/s1600/back+to+top+9.png











https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYvyx4aqhtgf9YG91kQiKGBdxzte2_7uRXqwtHBObOrqhYmUGNsnREvFxOqBpFl1Zq2JR3bBrNBGjTIGFZXT-GZ98LDeTM6vhvOwiZ1AKdmbSGeBEMQQb0DvLvZTPepV72eaGGmaskQz4/s1600/Top+Button+Kawaii.png






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN059HGc7W_3WCmkBiUAsKimPCmPHUe26dLg7GHKqBuBW5bMwuRp9mjKDBdf_avZ7QVZ1ucBNIH21c1gYFaeDIv4h4UsDOILI4KMoHvTqImIfeZhY9wT_SmPzaHPU0H10YfKtIDdHeDzo/s1600/kawaii-ghibli-230x230.png












https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7NstgAmideeSwlrlmOrMmdCXgpvIeCCxWYtWnZyL-d7MyV038IrozKZ5Uv3PtDciE1AUEtxHeNKqABsgH-jYWVihRMkkw2CnRdzgxRkXpcVGvAWB2ynq-C_qh6H2JKzhyUdzOWomCVss/s1600/tumblr_mnjfmwVtzZ1r49apoo1_500.png








Yang lainnya nanti menyusul saya upload ya, selamat mempercantik Blog..



11 comments: