Langsung ke konten utama

Cara Membuat Tombol Kembali ke Atas di Blog


Membuat tombol kembali keatas (back to top) pada blog dengan menggunakan kode HTML, Javascript, CSS atapun jQuery. Fungsi dari tombol ini adalah apabila pengunjung blog scroll kebawah maka akan muncul tombol back to top yang memudahkan pengunjung untuk kembali pada posisi atas dari posting blog tanpa susah menggunakan mouse untuk keatas.
Back to Top

Memasang Tombol Kembali ke Atas

Pada dashboard blog, pilih Template --> Edit HTML --> Klik pada area kosong kotak Edit HTML dan Cari (CTRL+F) kode berikut:
</head>
Edit HTML
Selanjutnya ikuti langkah dibawah ini. Silahkan anda pilih salah satu efek dari tombol ke atas berikut:

1. Membuat Tombol Kembali ke Atas dengan Efek Halus

Langkah 1. Letakkan kode berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>
          Simpan Template

Langkah 2. Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Masukkan kode berikut di dalamnya.
<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7L0CQ4rJkukOuBYFPHiC71Q2OqMAw3uFTt0hKit5hNbWlx4LsIqje6_H-A7HE_lherSugrinAionz3opcun9yM5lMVclKQNWWGwIgO9D8OKn8q9Tm7kky4EAW36fjuf_bQ9S9yQ-XPkrd/s1600/arrow-up_basic_blue.png'/></div>
          Simpan

2. Membuat Tombol Kembali ke Atas dengan Efek Memantul

Penjelasan dari efek memantul ini adalah ketika tombol back to top di klik maka layar akan terlihat memantul sesaat layaknya seperti bola.

Langkah 1. Letakkan kode berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
          Simpan Template

Langkah 2. Lihat ke Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7L0CQ4rJkukOuBYFPHiC71Q2OqMAw3uFTt0hKit5hNbWlx4LsIqje6_H-A7HE_lherSugrinAionz3opcun9yM5lMVclKQNWWGwIgO9D8OKn8q9Tm7kky4EAW36fjuf_bQ9S9yQ-XPkrd/s1600/arrow-up_basic_blue.png'/></div>
          Simpan

3. Membuat Tombol Kembali ke Atas dengan Efek Fading

Penjelasan dari efek fading ini adalah ketika tombol di klik maka visibilitas dari objek akan secara perlahan muncul. Biasa pada editing video kita mengenal fade in dan fade out.

Langkah 1. Letakkan kode berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
          Simpan Template
Langkah 2. Pilih Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7L0CQ4rJkukOuBYFPHiC71Q2OqMAw3uFTt0hKit5hNbWlx4LsIqje6_H-A7HE_lherSugrinAionz3opcun9yM5lMVclKQNWWGwIgO9D8OKn8q9Tm7kky4EAW36fjuf_bQ9S9yQ-XPkrd/s1600/arrow-up_basic_blue.png
" />',
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
 
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>
          Simpan

Catatan: Text Merah adalah gambar tombol yang dapat anda ganti sesuai keinginan.
               Text Biru adalah kode jQuery, cukup anda tambahkan 1 kali apabila menggunakannya.
Tips: Anda dapat mengkompres kode diatas sebelum diaplikasikan pada template blog.

Selamat Mencoba..

Komentar

Postingan populer dari blog ini

Mod Immortal Treasure Trove Carafe 2018

Mod immortal Treasure Trove Carafe 2018. This treasure contain of : Huskar - The Spoils of Dezun, Ogre Magi - Gimlek Decanter, Pangolier - Mask of Confidant, Venomancer - Cult of Aktok, Rubick - Crux of Perplex, Disruptor - Orb of Deliverance, Silencer - Glaive of Oscilla, Storm Spirit - Mandate of the Stormborn, Windranger - Sylvan Vedette and Mirana mount - Axia of Metira. Hope you guys like this mods cosmetic skin and support our favorite game Dota 2 in steam community market. No money? Just mods! Enjoy the game and boost your Matchmaking Ratings MMR and Seasonal Rankings Medals !

Rubick - Rambling Fatebender

Mod Rubick - Rambling Fatebender rare item Dota 2 Reborn from Treasure of the Emerald Revival. This item consists of : Staff of the Rambling Fatebender Cape of the Rambling Fatebender Pauldrons of the Rambling Fatebender Mask of the Rambling Fatebender Rubick - Rambling Fatebender Hope you guys like this mod and support our favorite game in steam community market. No money? Just mods! Enjoy your game!

Broodmother - Epoch of the Abysm

Black Arachnia, the Broodmother - Epoch of the Abysm mods rare item Dota 2 Reborn from Fortivus 2017 Treasure. This item consists of : Eyes of the Abysm Abdomen of the Abysm Anterior of the Abysm Legs of the Abysm Creepling of the Abysm Broodmother - Epoch of the Abysm Hope you guys like this mods and support our favorite game in steam community market. No money? Just mods! Enjoy your game!