Cara Membuat Atau Memasang Gambar BACK TO TOP (Kembali Ke Atas) Tanpa Pakai Link Dengan Mode Smooth Dan Scroll Otomatis Pada Blog

Pada postingan lalu yang baru saja saya posting, yaitu pada postingan "Cara Membuat Atau Memasang Link BACK TO TOP (Kembali Ke Atas) Atau Paragraf Lainnya Pada Blog" telah saya jelaskan cara memasang link back to top pada blog.

Nah, itukan hanya link. Gimana kalau pakai gambar? Kelihatannya menarik juga kan? Juga tanpa pakai link, melainkan langsung di scroll secara otomatis lho! Ini lho contohnya:

Pengen coba? Ikuti langkah-langkah dibawah ini untuk membuat atau memasang gambar BACK TO TOP (kembali ke atas) tanpa pakai link dengan mode smooth dan scroll otomatis pada blog.

Login ke akun blogger anda terlebih dahulu.

Klik Tata Letak.

Klik Tambah Gadget.

Pilih gadget "HTML/JavaScript".

Isi kolom 'Konten' dengan kode dibawah.

Klik Simpan.

Kode Yang Harus Di Pasang

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs5N1aMMAOForYJ3146u_OaN7uCPr_qwaZNmywjjN4gq2tMD7W9vDVdMz4npgJ8MBwfzJu4ocY8X7AjBaDYpzB0Jf4VbZ0-k2iXUGrwmzsE31FEOiakhN3dPDC_ba4XLt5_Rhyphenhyphenfdrdd8A/s1600/BACK+TO+TOP+GAMBAR+BANNER+IMAGE+FOTO+HEADER+BLOG+BRAVO+SUPER+AMPUH+YANG+TERKENAL+KEREN+DAN+MENARIK+DI+INTERNET+DAN+DUNIA+SERTA+INDONESIA+KUNJUNGI+DAN+ANDA+PASTI+KAGUM+KARENA+MEMPESONA+DAN+INDAH+%2528bs-ampuh.blogspot..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:'bs-ampuh.blogspot.com'})
.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>

Ganti kode diatas yang berwarna merah dengan link gambar yang akan ditampilkan untuk meng-scroll halaman ke halaman awal tanpa link.
© Bravo Super Ampuh