Home » » Cara Membuat Tombol Back To Top di Blog

Cara Membuat Tombol Back To Top di Blog

cara membuat tombol back to top
Kali ini kabarkalianda share bagaimana cara  membuat tombol back to top di blogspot, namun bagi  yang mencari informasi tentang Do Follow Web Directories bisa dibaca artikelnya.

Tombol back to top adalah tombol dimana fungsinya untuk mengscroll browser atau kembali keatas hanya dengan 1 klik, jadi pengunjung blog agan gak gak terlalu menguras tenaga memainkan scroll mouse he..he..

Oke gan langsung aja, tombol back to top kali ini memakai effect jquery fading and smoth, jadi akan terlihat lebih halus saat meng-scroll. cara memasang tombol back to top adalah sebagai berikut :
1. Buka Blogger
2. Masuk ke Tata Letak
3. Tambahkan Gadget
4. Lalu cari dan pilih HTML/JavaScript
5. Setelah itu Copy kode dibawah ini : 

<!--Back to top script by dynamicdrive.com-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
<!-- hapus script kode berwarna biru di atas jika template anda sudah memasang jquery-->
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="URL Gambar Back To Top" />',
    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>
<!--Back to top script by dynamicdrive.com  end-->

6. Lalu save.

Perhatian :
  • Hapus kode jquery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> yang berwarna biru, jika di template anda sudah memasang jquery tersebut agar tidak terjadi bentrok javascript...!!
  • Ganti Kode yang berwarna merah atau URL Gambar Back To Top dengan gambar yang akan dijadikan back to top.
Keterangan :Untuk melakukan modifikasi efek pada tombol back to top, perhatikan poin-poin berikut:

  • startline : Integer nilai pixel ke bawah dimana tombol back to top akan dimunculkan. Menambah nilainya berarti tombol akan ditampilkan lebih ke bawah setelah user scroll down. Nilai default di atas adalah 100
  • scrollto : Integer, tujuan scroll setelah tombol diklik. Nilai 0 (dalam pixel) seperti default di atas berarti scroll akan kembali ke bagian paling ujung atas (titik nol). Menambah nilainya berarti akan menurunkan titik tujuan scroll.
  • scrollduration : kecepatan/durasi scroll (dalam miliseconds), semakin tinggi nilainya, semakin lambat. Default adalah 1000 (1 detik).
  • fadeduration : kecepatan/durasi fading (dalam miliseconds), nilai pertama adalah nilai fade in, yang kedua adalah nilai fade out. Nilai default di atas adalah 500 dan 200.
  • offsetx : nilai posisi x tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke dalam. Default 5.
  • Scroll Back to Top : Bisa anda rubah sesuai kata-kata sobat inginkan, gunakan ctrl+f untuk memudahkan mencari.
Oke sekian tutorialnya, semoga bermanfaat.
 

Ditulis Oleh : kabar kalianda ~ Blogger Kalianda

Sobat sedang membaca artikel tentang Cara Membuat Tombol Back To Top di Blog. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, dan jangan lupa untuk follow dan meninggalkan komentar sobat.

:: Cara Membuat Permalink disini ::

Share this article :
Comments
2 Comments

2 comments:

  1. Makasih infonya gan memang Artikel yang luar biasa gan, sangat bermanfaat. terimakasih bangyak sudah mau share.
    di tunggu artikel berikutnya gan.
    salam bloggers samsoftware-cyber
    ada juga ni informasi yang sangat Penting, Panas, Perlu dan Seruu

    ReplyDelete
  2. makasih banyak tulisannya..
    keep posting yak...

    ReplyDelete

Terima kasih atas kunjungannya, jangan lupa tinggalkan komentar dan Follownya untuk perkembangan blog ini. No Approval No Captcha. Langsung Muncul. Happy Blogging ^_^

Masukan URLPanjang Sobat:
 
Author : Kabar Kalianda | Sitemap | Feeds
Copyright © 2013. Blogger Indonesia - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger