Cara Memasang Back To Top di Blogger Terlengkap

Cara Memasang Back To Top di Blogger Terlengkap - Salah satu parameter penting dalam membangun sebuah blog berkualitas adalah dengan mendesain blog bertipe user friendly. artinya adalah bagaimana cara memudahkan pembaca setia di blog/website sobat.

Untuk memudahkan pembaca dalam menelusuri blog/website sobat yaitu dengan cara memasang back to top di blog/website sobat.(Baca juga : Cara Memasang Tomblo Share Dibawah Postingan Blog )

Back to top memudahkan pengunjung atau pembaca (user) kembali ke bagian atas blog/website dalam satu klik tanpa harus menscroll mouse atau mengusap - usap jarinya di touch pad atau layar smartphone kesayangannya.

Cara memasang Back To Top di Blogger

Dan kali ini Kang Maz akan membagikan artikel tentang bagaimana cara memasang back to top atau kembali ke atas pada blog/website, pada artikel ini Kang maz akan memberikan 3 cara memasang back to top di blog/website kesayangan sobat.

#1 Memasang Back To Top Dengan Widget Part 1

Cara ini sobat tidak harus mengubah atau mengedit HTML pada template. Namun cukup menambah widget baru dan meletakkan kode atau script di dalamnya, dan cara ini cukup mudah. berikut ulasannya.

1. Masuk ke Blogger

2. Pilih menu Tata Letak/Layout > Add Gadget > HTML/JavaScript

3. Copy kode dibawah ini lalu letakkan didalamnya

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://goo.gl/Pofo7c "/></a>

4. Simpan gadget, dan lihat hasilnya.

Note : kelemannya cara pertama, gambar selalu muncul walau blog dalam keadaan pada posisi di atas.

#2 Memasang Back To Top Menggunakan JQuery dan CSS

Cara ini berbeda dengan cara pertama tadi, cara ini cukup rumit tapi blia sobat mengikuti instruksi yang Kang Maz berikan InsyaAlloh sobat bisa memasangnya di blog/website kesayangan sobat.

1. Masuk ke Blogger

2. Pilih menu Template > Edit HTML 

3. Cari kode </head> caranya (Ctrl + F) ketik </head> press Enter, lalu letakkan kode dibawah ini tepat diatasnya. Jika sudah ada lewati no 3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

4. Kemudian cari kode ]]></b:skin> dan letakkan script dibawah ini tepat diatasnya.

.back-to-top {display:none;position: fixed;bottom: 2em;right: 0px;text-decoration: none;color: #000000;background-color: rgba(235, 235, 235, 0.80);font-size: 12px;padding: 1em;}
.back-to-top:hover {background-color: rgba(135, 135, 135, 0.50);text-decoration:none;color:#ffffff;}

5. Selanjutnya  cari kode </body> dan letakkan script dibawah ini tepat diatasnya

<a href="#" class="back-to-top">Back to Top</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

6. Simpan Template, dan lihat hasilnya

#3 Cara Memasang Back To Top Dengan Wiget Part 2

Cara ini hampir sama dengan cara pertama namun cara ini meletakkan atau menambahkan script lebih panjan dari cara pertama. berikut 

1. Masuk ke Blogger

2. Pilih menu Tata Letak > Tambah Gadget > HTML/JavaScript

3. Copy script dibawah ini dan letakkannya didalamnya

<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="https://goo.gl/Pofo7c" />', //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>

4. Simpan, dan lihat hasilnya

Demikian artikel tentang Cara Memasang Back To Top di Blogger Terlengkap, semoga bermanfaat