Membuat Tombol Kembali Ke Atas Atau Back to Top di Blog

Published: Monday

Cara mudah memasang tombol Back to Top. Pernah kah sobat mengunjungi situs berita atau blog yang mempunyai sebuah tombol yang berfungsi untuk menggantikan fungsi scroll naik dan turun pada mouse. Tombol itulah yang disebut back to top button atau tombol kembali ke atas. Biasanya back to top button berada pada area side bar atau sisi kiri/kanan sebuah situs atau blog.

Cara Pasang Back To Top Button. Tombol kembali keatas biasanya mempunyai dua tampilan, yaitu yang selalu muncul pada sisi halaman blog atau yang akan muncul ketika scroll mouse mulai digerakkan beberapa putaran ke bawah. dan akan kembali tersembunyi ketika halaman blog sudah sampai header blog.

Tombol back to top berfungsi untuk mempersingkat kinerja mouse dan memudahkan pengunjung untuk kembali ke bagian atas halaman blog, tombol ini akan terasa sangat bermanfaat apabila blog atau situs yang kita kunjungi mempunyai artikel atau komentar yang sangat panjang ke bawah. karena cukup dengan meng-klik tombol tersebut, otomatis halaman blog akan kembali scroll ke atas.

Oke sobat tekno, kali ini saya akan membagikan script dan cara memasang tombol kembali ke atas yang saya dapatkan dari blognya "Contoh Blog" dan sudah saya terapkan pada blog tekno rc ini, coba aja lihat di sisi kanan blog ini.

Silakan sobat copas script dibawah pada element >> add widget >> Javascript/html yang berada di Layout (tata letak) blog sobat ;

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurxi6Xv9ViPRN3Jc-C3_46cIDjglSjSRKCRxcxwDsDMeLihIkLrHwcdMBPTCbCuLkfT7bMzgtfVyaireogWM5uZnG-nIKVgu0pcrUh5BpWzoMo9WkiOduJVhjrH4jvNdz_cG6PyhZu-4/s1600/kembali-ke-atas.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>

Kemudian Save

Beberapa motif back to top buttons

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurxi6Xv9ViPRN3Jc-C3_46cIDjglSjSRKCRxcxwDsDMeLihIkLrHwcdMBPTCbCuLkfT7bMzgtfVyaireogWM5uZnG-nIKVgu0pcrUh5BpWzoMo9WkiOduJVhjrH4jvNdz_cG6PyhZu-4/s1600/kembali-ke-atas.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpJ_UrudhaTrk5Evphlf4bBvNcBdDqquoEaonjgP0srLwiHLI0xw7RelLG5QUaG4Z8W9CqjgB9CTLBxquYW5427QlUF2SEuxiIEbQRpxAK3cvGVNLi6yxBvLLhHebW_oNou8HtRVb-Df0/s1600/back_to_top_button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6xsWyzszzrFxk_cf2jNZ33vSPJPshpxZGHnoxeDCSlJR6VE7ILeds9J3ayY0NJczE1ndrBbXGM0uWqiTBoaonIndJ7SE7pgyRT4LZI1HrLP4m65vkI_Ii8OsUic-T3KDJVCmp9VO6Ws/s1600/tombol-kembali-ke-atas.png

Semoga dengan adanya tombol back to top button di blog akan membuat pembaca blog menjadi semakin nyaman dan betah berlama-lama di blog kita, pemasangan tombol ini lebih direkomendasikan untuk blog atau situs yang mempunyai artikel atau komentar blog yang cukup panjang ke bawah.

Jika beberapa motif di atas masih kurang pas dengan style blog sobat silakan di googling saja dengan keyword back to top button, kemudian save di komputer/laptop dan masukkan ke dalam blog sobat melalui halaman posting dan ambil link gambarnya seperti contoh link gambar button di atas.

Apabila cara di atas gagal pada template blog sobat silakan coba cara di bawah ini ;

Klik untuk melihat

Pelajari Juga ; Cara Membuat Daftar Isi/Sitemap Keren Valid HTML5

<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 Gambar Kembali Ke Atas" />', //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>

Labels: Blog dan SEO