search here and find more articles

Cara Membuat Tombol Back to Top Pada Blog


Back To Top dalam bahasa Indonesianya artinya Kembali Ke Atas ...

Bukan berarti kembali ke pada-Nya ya alias RIP IS DEAD ...

Back to top dalam dunia blogging merpakan tombol yang berfungsi sebagai alat bantu pengunjung blog untuk berpindah ke halaman atas hanya dengan sekali klik...

Nah jika blog kalian belum memiliki tombol tersebut gak usah khawatir...

Artikel ini akan membahas bagaimana cara membuat tombol kembali ke atas...

Berikut ini adalah cara pemsanganya :

1. Pilih Setting Template -- Edit Html
2. Temukan kode </head>
3. Copas kode berikut diatas kode </head>

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

4. Kembali ke Setting Tata Letak -- Add Gadget
5. Pilih widget Javascript/HTML
6. Copas kode berikut pada widget Javascript/HTML

<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://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.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>

7. Ganti kode yang berwarna merah dengan URL gambar icon atau logo sesuai dengan kreasi kalian.

Dan lihatlah hasilnya....

Apa cara diatas masih gak bisa juga !!!

Yaudah kalo gitu pake aja cara ini yang sekali pasang dah...

Masukkan kode berikut ini pada Gadget Javascript/HTML dimana aja..

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

var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambarnya Jangan Lupa" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            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()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()
</script>

Jangan lupa ya URL Gambarnya Jangan Lupa yang warna merah diganti sesuai dengan gambar yang kalian inginkan ...

Semoga artikel ini bermanfaat untuk anda...selamat mencoba...

Always Pray and Stay Creative...


3 komentar

click to leave a comment!

19 Agustus 2016 00.13 Delete comments

Back to top ente pake logo gitu ya ? Badaai

Reply
avatar
19 Agustus 2016 09.36 Delete comments

Hahah Bisa aja lu bang,...
Keseringan nonton syahrini ya... kalo gak cetar membahana ya badai bergelombang...

Reply
avatar
8 Februari 2017 14.50 Delete comments

FBS – Dapatkan Bonus Deposit Sekarang Juga, bergabung sekarang juga dengan kami
trading forex http://fbsindonesia.co.id
-----------------
Kelebihan Broker Forex FBS
1. FBS MEMBERIKAN BONUS DEPOSIT HINGGA 100% SETIAP DEPOSIT ANDA
2. SPREAD DIMULAI DARI 0 Dan
3. DEPOSIT DAN PENARIKAN DANA MELALUI BANK LOKAL Indonesia dan banyak lagi yang lainya

Buka akun anda di http://fbsindonesia.co.id
-----------------
Jika membutuhkan bantuan hubungi kami melalui

Tlp : 085364558922
BBM : FBSID007

Reply
avatar

Formulir Kontak

Nama

Email *

Pesan *