Cara Membuat Back To Top keren pada blog

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg
December 14, 2016




Selamat pagi, pada artikel ini say akan menjelaskan cara membuat back to top pada blog anda. fungsi dari back to top sebenrnya adalah mengembalikan tampilan utama blog yang telah kita scroll ke bawah, sehinggan kita usah scrool ke atas lagi.


Biasanya tap to top terletak di bagian kanan bawah pada tampilan blog sobat. ada banyak tampilan back to top yang keren dan menarik buat anda semua, dan terdapat di artikel ini. kalo begitu langsung aja perhatikan cara memasang back to top pada blog sobat.
  • Login ke blog anda
  • pilih Tata letak kemudian pilih tambahkan Gadget
  • pilih HTML/Java Script
  • dan masukkan kode yang ada di bawah ini.
  • setelah anda masukkan klik simpan dan lihat hasilnya.
<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://i1155.photobucket.com/albums/p559/scrolltotop/arrow44.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>

jika sobat kurang puas dengan tampilan back to top di atas, mudah anda tinggal mengganti alamat url di atas yang saya miringkan dan tebalkan, dengan beberapa url di bawah ini:




http://2.bp.blogspot.com/-XmpMPPuRAl8/VRLkwPMjpCI/AAAAAAAAHAw/Pyxtb6QBql0/s1600/Back%2BTop.png


http://1.bp.blogspot.com/-O7dohHcxIpM/UBLpmAlOQ5I/AAAAAAAACPY/z9-ZhhFnao0/s1600/back-to-top.png

http://www.aprmarathon.org/app/images/common/home.png


http://1.bp.blogspot.com/-wjp4OEEeWTw/VIAD3dfNRII/AAAAAAAABYU/-Tox7nz9iS4/s1600/cara.membuat.memasang.tombol.back.to.top.smooth.diblog.png



http://4.bp.blogspot.com/-BSCc6a7oC8o/VMtjrVSye2I/AAAAAAAAAOc/0pVfNuR5Stc/s1600/3.png

gimana sobat keren bukan anda juga bisa menacri url gambar lain yang menurut sobat keren dan cocok untuk blog sobat. mudah-mudahan artikel ini bermanfaat dan berguna bagi semua, sekian wassalam😄


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed