Tombol back to top atau
tombol kembali keatas, yaitu sebuah kemudahan yang sanggup kita pasang pada halaman situs atau blog dalam bentuk sebuah tombol yang berfungsi untuk kembali ke halaman paling atas ketika tombol tersebut kita tekan, tujuannya yaitu untuk memudahkan pengunjung apabila mereka tetapkan untuk kembali melihat atau menuju ke titik awal halaman, dengan adanya
fasilitas tombol back to top, dan dengan menekannya maka para pengunjung dengan gampang akan dibawa kembali ke titik awal halaman secara otomatis (halaman menggulung atau bergulir sendiri), dan ini sangat efektif kalau dibandingkan halaman tersebut harus di
scroll atau digulung secara manual.
Cara kerja tombol back to top atau tombol kembali keatas
Pada umumnya t
ombol back to top atau tombol kembali keatas akan berfungsi dan secara otomatis muncul untuk kita klik ketika isi artikel sudah melebihi batas tinggi layar monitor, artinya tombol back to top akan muncul untuk memfasilitasi artikel atau halaman yang sangat panjang, sehingga ketika sudah melebihi batas layar, tombol back to top akan muncul secara otomatis dan siap kita klik itu juga seandainya kita tetapkan untuk kembali ka batas atas halaman, namun untuk halaman pendek dan kurang dari ukuran tinggi layar tombol back to top tidak akan muncul, letak tombol back to top biasanya dipasang dan muncul di sudut kanan batas bawah halaman.
Seiring dengan kreatifitas para blogger, ketika ini banyak tersedia blog-blog yang menyajikan
cara pemasangan atau pembuatan tombol back to top dengan banyak sekali macam imbas yang kelihatan keren dan mengagumkan, ada yang dibentuk cukup sederhana tanpa imbas sedikitpun, kemudian ada juga imbas scroll, imbas geser, imbas bounce bahkan hingga imbas fadding juga imbas smoth, dan mungkin juga akan muncul efek-efek lainnya seiring dengan kreativitas para blogger yang inovatif.
Untuk membuat tombol back to top memerlukan script CSS HTML Javascript atau JQuery
Perlu kita ketahui untuk membuat atau memasang tombol back to top atau tombol kembali keatas pada blog yang kita miliki, tidak akan lepas dari yang namanya bahasa pemrograman web, biasanya pembuatan kemudahan widget tidak akan lepas dari 3 bahasa pemrograman yaitu
CSS, Javascript atau Framework JQuery dan
script HTML, ketiga bahasa tersebut berkolaborasi sesuai dengan fungsinya masing-masing untuk membuat kemudahan widget keren yang sanggup kita pasang pada blog baik itu blog berflatform blogspot maupun wordpress atau halaman situs pribadi.
Ketiga arahan script tersebut memang mempunyai fungsi masing-masing, Script HTML untuk mendefinisikan tag tag html sebagai pembungkus atau fondasi web yang akan dimanipulasi, script CSS untuk mendekorasi dan megatur tata letak setiap tag HTML yang kita definisikan, sedangkan javascript atau jquery yaitu untuk membuat tampilan lebih interaktif.
Cara Membuat tombol Back to top dengan banyak sekali imbas yang sanggup anda pilih
pada artikel kali ini akan dibahas mengenai cara membuat atau memasang dan memunculkan tombol back to top atau tombol kembali ke atas dengan beberapa imbas lengkap sebagai berikut:
1. Cara Membuat tombol back to top dengan imbas memantul (bounce)
Efek bounce artinya imbas menyerupai bola memantul, ketika layar di gulung dan sudah hingga pada titik awal halaman, ada sedikit imbas menyerupai pantulan bola, untuk menerapkannya silahkan ikuti langkah berikut:
a. Masuk ke template blog anda, cari arahan </head> simpan arahan berikut sempurna diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Kode diatas yaitu framework jquery, kalau didalam template anda belum dilibatkan arahan jquery, silahkan letakan arahan diatas, kalau sudah anda sanggup lewati
b. Buat widget baru, pilih widget untuk HTML/javascript kemudian kopikan arahan berikut dan simpan
<style type='text/css' scoped='scoped'> #BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTGdJ53zVHn2ScNzdt4Wf6ZExj10SyFYIdxZag9BCzheIoKk2Vod_l66xe1-rDrZUEtoTiYgnQ-NgWk_idljA_DY_VMB3ItLMoShb_2DHn4UuvCsK9ThAgTNFXkoTy4bFUtQtRlG3iHVn/s1600/arrow-up_basic_blue.png'/></div> c. Kopikan arahan javascript jquery berikut diatas arahan </head> juga
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script> 2. Membuat tombol back to top dengan imbas geser yang halus keatas
untk
membuat tombol back to top yang mempunyai imbas geser keatas secara halus ikuti langkah berikut:
a. Masuk ke template blog anda, cari arahan </head> simpan arahan berikut sempurna diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
b. Masih diatas arahan </head> letakan juga arahan berikut sempurna diatasnya, pada arahan dibawah ini anda sanggup ubah angka 500 untuk letak tombol dan angka 700 anda sanggup ganti untuk kecepatan
<script type='text/javascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700); return false})}); </script> c. Buat widget baru, pilih widget untuk HTML/javascript kemudian kopikan arahan berikut dan simpan
<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTGdJ53zVHn2ScNzdt4Wf6ZExj10SyFYIdxZag9BCzheIoKk2Vod_l66xe1-rDrZUEtoTiYgnQ-NgWk_idljA_DY_VMB3ItLMoShb_2DHn4UuvCsK9ThAgTNFXkoTy4bFUtQtRlG3iHVn/s1600/arrow-up_basic_blue.png'/></div> 3. Membuat tombol back to top dengan imbas Fading dan smooth
Efek fading & smooth adalah, visibilas objek yang muncul atau hilang secara halus, atau dikenal dengan sebutan
fade in atau fade out, untuk
membuat tombol back to top dengan imbas fading dan smooth ikuti langkah berikut:
a. Masuk ke template blog anda, cari arahan </head> simpan arahan berikut sempurna diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
anda sanggup lewati peletakan arahan diatas kalau dalam blog anda sudah terdapat jquery
b. Ggunakan gadget HTML/Javascript kemudian kopikan script dibawah ini kemudian jangan lupa untuk disimpan
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 terperinci semoga 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> Pada script diatas silahkan anda ganti goresan pena "URL Gambar Back to Top" dengan lokasi gambar back to top yang anda miliki atau ganti aja dengan url gambar berikut:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTGdJ53zVHn2ScNzdt4Wf6ZExj10SyFYIdxZag9BCzheIoKk2Vod_l66xe1-rDrZUEtoTiYgnQ-NgWk_idljA_DY_VMB3ItLMoShb_2DHn4UuvCsK9ThAgTNFXkoTy4bFUtQtRlG3iHVn/s1600/arrow-up_basic_blue.png
Baca juga:
Cara membuat widget like facebook melayang ala strukturkode Demikian yang sanggup aku share ihwal
Cara Membuat tombol back to top dengan banyak sekali Pilihan imbas lengkap, selamat mencoba dan semoga bermanfaat.
Posting Komentar
Posting Komentar