Cara Membuat Tombol Back To Top

Siang sobat blogger, gimana kabar hari ini ? pasti sehat semua kan, semoga sobat sehat semua ya, amien. Untuk artikel ini saya akan membahas tentang "Cara Membuat Tombol Back To Top". Tombol back to top ini berguna untuk pengunjung blog kembali ke atas artikel setelah membaca artikel yang mungkin panjang tanpa harus menscroll. Nah, untuk membuatnya simak langkah-langkahnya berikut ini.

1. Masuk/Login ke akun blogger sobat
2. Pilih Tata Letak
3. Klik Tambahkan Gadget di posisi mana saja, hasilnya tombol back to top akan tetap bearada di sudut kanan bawah
4. Pilih HTML/Javascript
5. Masukan kode berikut ini

<!--Back to top script--> <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={ setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdkys2SRWjjqhKGShOo28i8Er-eaSb6R-PtraBPCvUwe6U_3szfTbO8hBP_wp5eimMASOp4LO1qcCZ4olmwhShtL6SQMb1JIxYA_lRA3jjc5dgOMfAblaJAKslxIPo6n1aG9IU7Ui2a6YZ/s1600/back+to+top13.png" />', 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:'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() <!--Back to top script end--></script>

Keterangan :
>>Jika di template sobat sudah ada script http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js versi berapapun, hapuslah berwarna biru supaya tidak bentrok antar javascript
>>Kode-kode :
startline : Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.
scrollto : Posisi tujuan tombol back to top, dihitung dari paling atas. 0 artinya 0 pixel dari atas halaman.
scrollduration : Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.
fadeduration : Kecepatan atau durasi fade, fade adalah gerakan muncul. Yang pertama nilai fade in, dan yang kedua nilai fade out.
offsetx : Posisi tombol back to top, semakin ditambah maka akan semakin merapat ke dalam.
Back To Top : Title pada saat cursor diarahkan ke tombol back to top.
>>Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdkys2SRWjjqhKGShOo28i8Er-eaSb6R-PtraBPCvUwe6U_3szfTbO8hBP_wp5eimMASOp4LO1qcCZ4olmwhShtL6SQMb1JIxYA_lRA3jjc5dgOMfAblaJAKslxIPo6n1aG9IU7Ui2a6YZ/s1600/back+to+top13.png, bisa sobat ganti sesuai dengan gambar tombol back to top keinginan sobat, berikut beberapa gambar tombol back to top.

"http://1.bp.blogspot.com/-H9FeLj7CD-I/UQu-
cumUP5I/AAAAAAAADcE/ri7wY89umU0/s1600/arrow-up-icon+%282%29.png"

"http://1.bp.blogspot.com/-XLKX0U9GqDM/UQu-
dPjNC6I/AAAAAAAADcQ/qUHlqjMqNqc/s1600/box-up-icon.png"

"http://3.bp.blogspot.com/-t1cfUfD_igs/UQu-c-
S1YEI/AAAAAAAADcM/aSQE7HQl6ow/s1600/arrow-up-icon.png"

"http://3.bp.blogspot.com/-t1cfUfD_igs/UQu-c-
S1YEI/AAAAAAAADcM/aSQE7HQl6ow/s1600/arrow-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLT-z3d9bJH5a-pRKmgAjO_KkomoKeJaeLW2m72IKGkdZIukKA4ymXixTxB4WQu-pHc0wpQf_ilbSDLnaQINrpF1DLuxhyphenhyphenbkMcWy54v2hjpioLYKIZ03xpC4ijVH9cEmNgDQY3AUkF9Aza/s1600/back+to+top15.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwIrN8YiYXbZAcEulMzI5nAZaQnaFtePBNWDZwOAhgE1MUZMPFYIo_k98_mNu87V1Nxmp6Y7vU1qCN34h9gUqyu7ewo1qsCNTY0Wg_I-40e7AsK9mJgpinefGX7TTRs6VEdnYDQczSYCg/s1600/back+to+top9.gif"

 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2k7jvAhXgzvcGt8qjXYC30w4rFb9URV_1OCxbkUl6Q3RfO_ecbicAbI4XjeRHe-ShL-2KQ8Ifp2-VQlhxDYN6ZvzcDuIt9NGI_OawhwflaI8ESaK-bIm0kgpdavbuPph5bXgZxTJcoeK/s1600/back+to+top4.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lSDZp2WDndbvpNoCZGxJoR5q-K3rcO8-8biEBmfhHUyeWZ0Uu8u_1Lwy9BPjioQ46yEzIGy5UF7pPoyfJKVGje_jF1We9RZueNEbvfHHL5upHcxFPO-Jg1ZwdJktc2-nGljvyqKbA3XP/s1600/back+to+top10.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-ftTuD9_qFenmtufT2W3L28DGU4CwJtlE00naw5388XOC5pKsFitqWmF1Rc12KD7N1vSToD_6ypj8Cz1jjKlZjsHuozBQ7EEjLHxVw5RMKnh2KHhYrkTbUo3qt-43LonZW2wpC6hS165/s1600/back+to+top7.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUS3LoF8pIcRrZN74i1sA1knbhdjT4WSTo2eWEmAgbaM9kPXP9VU00Ln6yOnDZLgBLft62tKC_W6Ys0J_nLxpg2pppoFY3Lv3LBklBgIB3RX3E0SypOocaqR7_7vQimH4k9FM7ZPofw7B/s1600/back+to+top14.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPA0VKTzfUoa47XS3Oz7O_cgj7YkRIgwBc-luy9YFvddfWFSnpQ_Es8pDvn2GHlTwPlI-J4PKaWSCLLFWRpoyafise5jkMcE2IwYCTuuHftGgnE3u3rMQ2XQxFcs6f8bopM6gFb8-a6adb/s1600/arrow-up_basic_blue.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn8dZ_yhbLI0eWOFWmWr4HXfMUfOYihfXpWh9YTcXfkB2N7O1nU1xaRXK0WKU9biwnA2jXJQuT0_f91MWjgO5FjGv5nugnYI9Buj53AChGs4mJQCxkNDQGaDdVdVTayjh8UMeIa0avn8A/s1600/backtotop.png"

"http://i1198.photobucket.com/albums/aa452/Lutfi14/back-to-top.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPWBfrisLlrCYLSDp8zYSMUVqbGs1D-f8I8Yvc6ZvNROcABwkgVY2ixLm1aJwnogCxgpZ9pqg_uLbKDTkiGy-bgpgmW7e8P0O5Q_BsF4ZxpSir3hM5mubxxCooUKBTd7fhvKS6hfrZqR47/s1600/navigate-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLzqZcvntrHtxnJxtOuOflM5x-YC3hSGC9ttJFavm0CcQhoWuU_atabZ0faqs8v1VkHfxumhEevUgUegd9sG8dBDiz0kWW9smXQqubGqQ7JIWAalT2FnKW77yh_-Q4MBPhUQD_Lx8va5K/s1600/Untitled-2.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLVawcGOV72t4BZ8r8V5iChYy_HwCSaKbpJ2h9BotInOKuQhFpqCHOQeQc6gG6ZUlzuZV1nu0t4N4XrAl8g7X0DLL6RA4s6mmfZB_Mg3SJi4pR47LikHJronJK594me3WY9fHNFhPKMEw/s1600/Top+Biru.png"


sekian, artikel tentang "Cara Membuat Tombol Back To Top". Semoga bisa menambah menarik penampilan blog sobat.

Terima kasih, salam BLOGGER.