Rabu, 03 Desember 2014

Cara Mudah Memasang Tombol Back to Top Smooth di Blog

Ilustrasi tombol Back To Top (Gambar tidak terlihat? Klik kanan tulisan ini, lalu pilih 'Reload Image')
Cara Mudah Memasang TombolBack to Top Smooth di Blog – Pernahkah Anda melihat sebuah anak panah kecil, yang letaknya di sebelah kanan bawah, dekat scrollbar saat mengakses sebuah blog? Yup, widget itulah yang dinamakan tombol back to top. Fungsinya adalah untuk membawa pengunjung kembali ke atas, tanpa perlu repot – repot melakukan scroll. Tentunya widget ini akan sangat membantu, khususnya jika Anda memiliki posting blog yang panjang, dengan komentar yang panjang pula.

Ada 2 jenis tombol back to top. Yang pertama menggunakan perintah # (hastag) (saya pernah membahas tombol back to top dengan hastag sebelumnya), dan yang kedua menggunakan JavaScipt. Perbedaan diantara keduanya adalah efek yang dihasilkan. Pada tombol back to top pertama, efek yang dihasilkan cenderung kaku. Sedangkan, pada model yang kedua, saat tombol di-klik akan terlihat efek scroll yang lembut. Jika Anda ingin melihat efek tersebut, klik link berikut :


Berikut ini langkah – langkah memasangnya :
1.     Login ke Blogger.com, lalu masuk ke Tata Letak.
2.     Pilih Tambahkan Gadget, lalu pilih HTML/Javascipt.
3.     Copy dan pastekan kode berikut (pada window yang muncul)

<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="Ganti dengan url gambar back to top" />', //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:'Balik Ke Atas'})
                .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.     Kosongkan isian Judul, dan, klik Simpan.
5.     Buka blog Anda untuk melihat hasilnya.

Catatan :
1.     Anda dapat mengganti gambar tombol back to top, dengan cara mengganti url yang berwarna merah. Pilih salah satu gambar dibawah ini, dan salin url-nya untuk menggantikan url yang berwarna merah. Atau, Anda dapat mencarinya di Iconfinder dan Google.
cara mudah memasang tombol back to top smooth di blogger - ikon tombol back to top (Tidak dapat melihat gambar? Klik kanan tulisan ini, dan pilih 'Reload Image')
http://2.bp.blogspot.com/-IKCg5S0wBtc/VIABAR6yz_I/AAAAAAAABXs/U0Xdv9s9zuA/s1600/back.to.top.2.png

cara mudah memasang tombol back to top smooth di blogger - gambar tombol back to top (Tidak dapat melihat gambar? Klik kanan tulisan ini, dan pilih 'Reload Image')
http://3.bp.blogspot.com/-tI9PVWH6hRE/VIABAUPVY_I/AAAAAAAABXo/-WCcctNeoTw/s1600/back.to.top.1.png

cara gampang memasang tombol back to top smooth di blogger - gambar tombol back to top, yang dapat digunakan (Tidak dapat melihat gambar? Klik kanan tulisan ini, dan pilih 'Reload Image')
http://3.bp.blogspot.com/-W9IJrYIDIS8/UnI5Uw5xWFI/AAAAAAAABPs/Ti6248IN8XQ/s1600/back+to+top+green.png

cara memasang tombol back to top smooth di blogger - gambar tombol back to top (Tidak dapat melihat gambar? Klik kanan tulisan ini, dan pilih 'Reload Image')
http://2.bp.blogspot.com/-Reoi5EcKdDI/VIABCA0zGuI/AAAAAAAABYA/omT2WVrnhPU/s1600/back.to.top.4.png

Gambar tombol back to top, yang dapat Anda gunakan untuk membuat tombol back to top (Tidak dapat melihat gambar? Klik kanan tulisan ini, dan pilih 'Reload Image')
http://2.bp.blogspot.com/-gUUv56bsJ8o/VIABCR4_CeI/AAAAAAAABYE/2k1OArNGAIU/s1600/back.to.top.5.png

2.     Hapus script yang berwarna ungu, jika blog Anda telah menggunakan JQuery. Untuk mengetahui, apakah blog Anda telah menggunakan JQuery, serta berapa versinya, silahkan klik disini. Jika Anda menggunakan JQuery dibawah versi 1.3.2, klik disini untuk mengupdatenya. Widget ini tidak akan berfungsi jika blog Anda menggunakan JQuery dibawah versi 1.3.2. Jika tombol back to top tidak muncul, coba kembalikan script yang berwarna ungu ini.
3. Ganti tulisan Balik Ke Atas menjadi tulisan yang Anda inginkan. Tulisan ini akan tampil saat pointer mouse diletakkan diatas tombol back to top.

Bagaimana? Mudah bukan? Selamat mencoba, dan salam Blogger! Tolong pula tambahkan saya ke lingkaran Anda di Google +, dan share artikel ini. Terima kasih!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

3 komentar:

  1. wahh.. makasih gan, smoothnya beneran kerasa dan gambar back to topnya juga kekinian banget. langsung ane pasang nih!

    BalasHapus
  2. lansung praktek ditunggu kunjunganya gan ke blog ane...

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!