Jan 29, 2017

# Blogspot # Tutorial

[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://3.bp.blogspot.com/-4QiroZYJyB0/WI2DL6hldYI/AAAAAAAACBY/qp7epQXkN64Q-Zy2I62Om1K5HSeZh48qgCLcB/s1600/back%2Bto%2Btop%2B3.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://4.bp.blogspot.com/-OoPsK25XkxA/WI2DMfDXT3I/AAAAAAAACBk/k65pAZuQqNISp7oilrNdy1srPDxdhE4dACPcB/s200/download%2B%25281%2529.jpg












https://4.bp.blogspot.com/-mVOp0D7P-Ao/WJAov49o_ZI/AAAAAAAACFU/d_ZVtw9Nxx0TGdAWmsPmg7aZQaIj2yU3wCLcB/s1600/back%2Bto%2Btop%2B9.png











https://2.bp.blogspot.com/-uqzJ1n0mmmo/WJApSQ-64VI/AAAAAAAACFY/YOyYWVAyiukQ7BRwElyw-VkSvJMyfRGpwCLcB/s1600/Top%2BButton%2BKawaii.png






https://4.bp.blogspot.com/-zvTSlEzbAOI/WJApePcob3I/AAAAAAAACFg/JyN44nVitT88jqJnQB7ggpcc-X9VbvWuACLcB/s1600/kawaii-ghibli-230x230.png












https://2.bp.blogspot.com/-DMavF6JoZmk/WJApuDih-lI/AAAAAAAACFk/0nwtYI14X_MZYsIbEYmZrm3r6WB_oDe9gCLcB/s1600/tumblr_mnjfmwVtzZ1r49apoo1_500.png








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



9 comments:

Followers

Follow Us @soratemplates