Tuesday, 25 December 2012

Cara Membuat Tombol Back To Top di blog

Pada kesempatan kali ini saya akan berbagi kepada sobat tentang bagaimana Cara Membuat Tombol Back To Top Dengan Efek Gulir Halur pada Blogspot dan beberapa waktu yang lalu, saya juga telah memposting sebuah artikel yang hampir sama dengan postingan kali ini, namun tombol back to top yang pertama tersebut mempunyai efek yang agak sedikit kaku dan tidak mempunyai efek apa-apa. 
Apa gunanya tombol back to top?
Cara Membuat Tombol Back To Top Salah satu kegunaan dari tombol back to top yakni untuk memudahkan pengunjung blog untuk kembali ke menu header atau navigation tanpa harus melakukan scroll pada mouse.
Tutorial untuk pemasangan back to top kali ini yakni menggunakan JQuery versi 1.3.7 (terbaru untuk saat ini). Cara pemasangannya tidaklah rumit dan tanpa harus mengedit CSS template blog, tetapi hanya dengan menambahkan gadget baru (HTML/Javascript) dan memasukkan kode ke dalamnya. Jika sobat penasaran seperti apa tombol back to top yang saya maksudkan disini, coba klik DISINI. Bagaimana, menarik bukan...???
Nah jika sobat tertarik untuk memasang tombol to top seperti pada blog saya ini, berikut uraian singkatnya :
  • Login ke blogger
  • Tata Letak » Add Gadget » Pilih HTLM/Javascript
  • Copy kode di bawah ini dan pastekan kedalam box HTML/Javascript tersebut
<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="http://1.bp.blogspot.com/-0GZVT1s8KaI/UMgg1K0FT4I/AAAAAAAABpI/NIAZPJeNp6w/s1600/navigate-up-icon.png" />', //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>
Keterangan : URL yang saya beri warna merah di atas adalah url foto yang sudah diuplaod sebelumnya, silahkan dengan url foto sobat.
  • Simpan dan lihat hasilnya.
sumber

Ditulis Oleh : dep edodoe

dep edodoe Anda Sedang Membaca Artikel Cara Membuat Tombol Back To Top di blog. Author Membolehkan Anda mengcopy paste atau menyebar-luaskan artikel ini (hasil kopas atau bukan), namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

16 komentar:

wahhhhh,,matab gan,,ini yg saya cari2..tkhs ya salam knl..mintak kunjungan nya gan,,http://saktobek.blogspot.com

salam kenal juga gan dang..ntar pake open ID ja gan...Dofollow kok :)

Great article …Thanks for your great information, the contents are quiet interesting. I will be waiting for your next post.

Mantap artikelnya gan. Silakan berkunjung ke blog ane. :)

wah cukup rumit juga ya caranya,,
tapi thank's gan buat infonya ..

mantab gan tutornya kunjung balik gan maklum baru bikin blog www.xfreearea.com

saya sangat menikmati tulisan anda mantap banget!! dan jangan lupa kunjungan baliknya di Mau Bikin Website + Hosting Murah AbizZ? Ke Rajawebhost.com aja!

Great post. All readers will definitely like this post. Looking forward for your next post.

okey...

tips mata sehat
buka link ini..


Erikzzakariya.blogspot.com

good job gan,artikel ini sangat menarik sekali untuk disimak,keren deh ,,tentunya kami mempunyai wawasan baru yang kami dapatkan setelah membacanya,thanx yah :-)

Wah ini nih yang saya cari-cari, mantep deh akhirnya ketemu juga. Jadinya biar blog saya semakin menarik. Btw nemu cara kaya gini gimana ya? bisa aja dapetnya. Mantep.

Artikel yang bagus kaka :D Di tunggu Updetannya :D

Post a Comment

 

Home | Info Ads | Page Rank | SEO | Blog | Sitemap

COPAZZ ABIESS © Template Design by Herro | Publisher : Templatemu| Modified by : Dep Agoes
Related Posts Plugin for WordPress, Blogger...