Assalamualaikum!!
Yeah, akhirnya selesai juga UTS pertama *ngelap kaki*
Jujur aja, rasanya agak berat ngejalanin UTS yang ini. Capek,pegel, terus heheheh, males. Gak tau sih kenapa tapi bawaannya males berat. Uuh.
Yaudahlah, mendingan aku share cara buat back to top button di blogger. Tau nggak yang mana tu? *nyombong, heheh*
Itu loh.. yang di pojok kanan bawah
Nah, yang mau aku share ini yang JQUERY. Apa lagi tu? Oke. Jquery itu
maksudnya back to top button nya baru muncul waktu scroll bar nya di
tarik kebawah. Waktu masih di paling atas halaman, back to top buttonnya
gak nampak. Ngerti? Gak? Yaudahlah. *pasrah*
Terus, kalau Jquery ini naiknya pelan-pelan alias slow motion alias
perlahan alias lambat alias kayak terbang. Panjang ya? Hahahahah.
Biarlah, biar jelas. Oke.. kita mulai :D
1. Buka blogger, log in.
2 Buka Tata Letak
3. Klik add gadget / tambahkan gadget.
4. Klik yang HTML / JavaScript.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byNovita Lesyani***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL BACK TO TOP BUTTON KALIAN" />',
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
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()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
NB :
Ganti kode yang warna merah sama kode gambar button yang kalian suka.
Oiya, aku punya beberapa gambar buat back to top button ini. Tenang aja, semuanya transparent kok. Credit to Novita Lesyani. Masukkan kodenya buat ganti tulisan yang warna merah itu ya :)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuatTE8HsgU6nNv1n-i9T_o04xR5H8WCQwRiypSAyF2Gq8R71zHKt93TfIEmnmIt7OXgYF2Rm6v2aKIapfEUHBJMvFBsE6iQSoTkT6iRlKI1GHQaILtvtgzL5eBNiwcMXwQ8UC_dbHXc/s1600/back+to+top+by+me.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7lwAQT8kO4TK4OGKxf8NoYgyGxHWHAXd6IZ4XYFMGbeTJTHptocbDfmDq8Xl36SmFp7UcrP2xd0eizxB0EnAFPVnlu0MTHxiMJD5EJHC-qTR3ayp1q5802x23VRBigKbipspnlH9C-Jk/s1600/back+to+top+2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirGmS_4mF8EN_nBzvyYCfz9VcmX4Jc_xK_gOFKhHZ-LbyM_Ovt-_mPlhh-XrbZUnZdDdqTAL-uOA0RiOfnsyAxSXmF9s89hoE3D09YuBSfqHE9dEidoHILAkya-2O9Jh8Wyy-IoDj-sVg/s1600/back+to+top+3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoq4xmuMMKa-sYAnzvhtm1r6AJvgi1lLojxMOcMEUE7CCRhXxB3GD2BBCKbUyJvgN38cbMaoX8gUoqHmXfyGm5O-b135qXMDeHsqxjpYOdlnMz-qKLB6Z59LvXZN2JG62w8YGEJuvwwg/s1600/back+to+top+4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMjqyvmISxhfL0gtBDlxH8vBfT8OnhMDsEwPcbK6aHH58RQon8EaEfshMA_lrB2FFxZYLskAyNF9Z4b645ePQoXqyQDrHw2sXd1g0lUEf-xExnQMdfPABdR_76q-wOB3kvgvqhVNvdiM/s1600/back+to+top+5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1C_OAlNAa2bBY4ueUKaLQU5bUcutmoxkyHkNnXAsv8pV5qTcq-BE4jcuHM8YMH2N1jB9PqNaqysHPuuXoCwzCVRcLzRQKoFi9caOIToBK2iQdFdQWxuhk1XDA55oyeJ9VonQjvbl-O0/s1600/back+to+top+6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJhBQTtwqH6PMgrdklyunXXPzlcRspR5WKfDiHW4OTnoYD3qtUEfJ-z8kJCscKc0XxDXyT3RWeLIpw9KhxMbLEwwHSGd1ElKti9ujoke-6DVfdWk8qgG5v2HX_CH6KAcRp8V_jgasiJ8/s1600/back+to+top+7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0f-W753IXKaWy7-HASZiYcKSH2q4yRpPNVJ01vLj7vbYcYOrrfoTFyEc8U-1XqNncbOnh-HEQo141CSPAzDpQW8c1x-Se18QdcIUl3Ea0vLkPTQmtlnuqTmnCz0FHSBmFPWorWDsHo4/s1600/back+to+top+8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMzTKWgYrDmBS6UoU3119Pjy8fXRVJECGI7U_itNADuMc7ZS8EPNSCAGn60SeN9hQVS7IoeNcP74d0E4jnmANDf0uzjCFMFwkL61VTL_t3UCerNS6sSPSBIEDrtNMWJP3mbSjrCwoJJl8/s1600/back+to+top+9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFi4B80bg1hxDv5E_X7y9aYctyiNc51-8j5qXWuJFTxoX2yi_f_bc6k0SyRUAIyJGGdrZQZAWTzaYq108fbDEk8oR5qli5nZ3-5q0cPbhlZ-oz3_f55zGPtXKBJ-uQfHvkCZLjG0gzxM/s1600/back+to+top+10.png
Nah, ceritanya aku capek nulis link nya. Jadi, buat gambar dibawah
tinggal klik kanan terus 'copy image url' atau 'salin url gambar' aja ya
! :D
Oke silahkan dicoba.... salam blogger
sumber: http://lintangapramesti.blogspot.com/2013/10/tutorial-freebies-back-to-top-button.html
Diriwayatkan Oleh : Rodi95 ~ download dan tips trik blog
agan sedang membaca artikel tentang: Tutorial + Freebies Back To Top Button Jquery!. Silakan agan copy dan paste atau sebarluaskan artikel ini jika dinilai bermanfaat tetapi ane harap agar Agan jangan sampai lupa untuk menyertakan link aktif artikelnya di bawah ini:
0 komentar:
Posting Komentar