Tombol "Back to Top" memudahkan visitor kembali ke bagian atas blog, hanya sekali klik, tanpa harus meng-scroll mouse atau "mengusap-usap" jarinya di "touch pad" atau pada layar SmartPhone. Dengan menggunakan tombol "Back to Top", pengunjung tinggal "klik" dan tampilan bagian atas blog dengan cepat.
Langkah-langkah memasang Tombol Back to Top pada Blog
1. buka Blogger ⏩Template ⏩Edit HTML, Kemudian cari kode </head>
2. copykan salah satu komponen jquery versi update terbaru berikut ini diatas kode </head> .
<script src='http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
atau bisa menggunakan
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 3. simpan pengaturan
4. masuk menu Tata Letak/Layout ⏩ Pilih "Add Gadget" di Sidebar ⏩ Pilih "Javascript/HTML"
5. Copy dan Paste kode berikut ini:
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJAAjykyuKg_fs3k11hoB0QIPJwI0FchrGgayZkxRm0szgHF3WepYLfEIlb19XoNlIh8xj48ED2ME_KF0voD8qkIzRtbu-D7CwPwj_heCBXYhtIm7MeqqK2WlMnE6G0rcyK_wq_NRbRM/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script> Cara Alternatif lain pasang tombol Back to Top
apabila cara sebelumnya belum berhasil, coba lakukan langkah berikut ini :
1. pilih menu Tata Letak/Layout ⏩ Pilih "Add Gadget" di Sidebar ⏩ Pilih "Javascript/HTML"
2. Copy dan Paste kode berikut ini:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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="URL Gambar Back To Top" />', //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> 3. Save!
Pada baris script untuk pemanggilan URL gambar, anda bisa mengganti dengan link Gambar yang anda miliki contoh seperti pada script di bawah ini.
</style>
><img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK-bOHLGN2X_dsph2YZ2Ka7vlF4zIUxJsYPXVC0zyVeGLhMf5Nl4_b8VQEJEQfiuO2jpRsDeyv-JD1q2GPq2Z5tx5vK3rYdB9Unk5C-w66o5F0Wo2aBuOKFHvGiYW0D3Gze4N6KkNFO1o/s1600/back+to+top.png" />
<script type="text/javascript">
><img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK-bOHLGN2X_dsph2YZ2Ka7vlF4zIUxJsYPXVC0zyVeGLhMf5Nl4_b8VQEJEQfiuO2jpRsDeyv-JD1q2GPq2Z5tx5vK3rYdB9Unk5C-w66o5F0Wo2aBuOKFHvGiYW0D3Gze4N6KkNFO1o/s1600/back+to+top.png" />
<script type="text/javascript">
Beberapa Gambar tombol Back to Top
Berikut Ini terdapat beberapa pilihan gambar tombol "Back to Top" dan URL-nya yang bisa Anda pergunakan untuk mengubah tampilan. Copy & Paste link URL-nya ke bagian yang berwarna merah seperti dalam kode di atas.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMaPsSG0IsyAMhzgiZkjXvYoldN4WBxMxsoLlVq2bdg8d8xB4JP8ca5OcX5Icb0-ATgIKAP5mVUrcRFaPJIxrVNxG8YqwCvpdLFNFLHoS_LZHI2bLk1Zgbf4QK47mzG5Ili_jHK4G3xhz/s1600/backtotop8.gif 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkN3_ze124ALqzMAOWjwhnHe2n3-0HDM8svZx9ax7Prn9uR5Zl0CHUeWdT0DGKJYbnYiJ1vZYVWuDdC4sERv5uhyphenhyphenT7V2iBaIWjaluinjGiNSDpwBWj_qqVX0N_C2SUrQbYaXUZ04jWOMC/s1600/backtotop.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WOL0lFDXHbmvvvkF407tbhY5RKM1_BBGRosOCw4qeMPD72HtSB3STHGlKHcDfEbMlg9TWD0buF2zyRRIXv9Io1RZqSDsM9IZoNPCXj5woxSQlHNN0nyQlgetvRJt8Ufq4XB6kAy8r3OB/s1600/back+to+top1.jpg 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfcUz3SIlm4xTqWYFb9vETuzSenrSJhA1agBFe-vhXft2G1h078at_PgSXBC4YPyDN7a0DmtG8iDLHTMyse_3-1rTdgcLND5Pwx5i6FikRQZz3o6SqF0Uu4zMkdZ_ZBjZC2IPrIASOtsVs/s1600/back+to+top3.jpg 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKM1tKk9i_ig0DVKiIhBPBQf_1tS9L9YLj8ATaUVhC3Jms2JnMKCcQsDhI8VCKiSFTKrF_EGFfRgCednza0bmFxCaT5-CmDMDGI0bOEyGUxyd-5syzHypB3-V-xUCzWzDFSxHjDEAr6V6/s1600/back+to+top7.jpg 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl84LLJQFUMZEUwMejIeCJtHg5MEYdo2REnoaY-l3pq9o-UBNy_HeQcQbtDkWFN7UTh39MGeLjp-FWZIZka82jWQh0U2t_XPTkAnU3at_Tj4NkR5jsA5aStOFkibeAXxPX6jtdMPJqDZDv/s320/back+to+top9.jpg 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_B79AqTN9iYfWXkv5gAdRqZMRVuKWeKvsLbugzJJIB2gSoLbesA4tZQhVt4DCnNqrf6-0Uwcpa6PbA3lvuAmglHQuHT9g81xkTiuIM5LLh_qjZAmuA9ndJrovY8BpjDcOAzp10xQL8kjm/s1600/backtotop2.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfq95tboP8QpMaJ8f-uH-n0ir0Uznojel8lT-I7PK2J5c5HDK1icyvFFGssvEnqdUN3JpLmclX2KLwsjLP_U3Nsd0YBqeuLpS5YE7vEQCGYcXij6IVCFG2zCADvcVusoDT9AdvNl6TPDAf/s1600/back_to_top_button.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gT1gfRU5s2KuFPbDG4x-8k-wG5RYHNFraJ8lIfPmpPhAaAVLNMmhZ_qL7gCuVhAkylVuE06jSDQS3gSglKxqW7_Qh8tUiHT4s_WVLvI8D6IVTOjtYejEC36QFK7UIsF-gkM353seATPF/s1600/backtotop5.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPhcj52EBjE0Y6I-VuBr9tud1MROVKmjyBC38SHOY9BqJuxDycI1RjdY90OtDNIE684ZN-kWi5qyiGQ9ffBOKrDcSwkwSJnbNCu_yFfm7o_vVJB8izM3_3WaRkuvPS6tdxVXYTv4B2AtHw/s1600/backtotop6.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwNr4EwhvQAMvH0z3IMdghDM9J7Fw6p9Rw4qv7GT6uiYT045OpiK3F9FIKTxUVk5roTWdbgCCnfV5DmOZfTwzI0s4ysf2nA-4AEiuWPzxR28fL1gnC_uw5JcfyvrRaTGXVuoJp7dGYEA8K/s1600/Back-To-Top1.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLpxnzBraSZ1wAvNuHJCAtr1Q7OIVm-R1gD7VuzE_VWOeDF4KaywDgwC15PiyW2o2OK1Uy1nF4wNOtsL5mjQTycH6IghmUnhzoGrJoH7yy9YQUnlPfc_LYNgTZNuL4M0HYCBfU4-u6Mds/s1600/backtotop4.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81S-5zRxjei3ifkmTi72AhJG86uiaVDc1l9RdFkMosrnhg3lqrsJy6uR1nFL5UiX2XEbfZWQzzIe0Xedl-8GHWUIBHTmds16XfZ-Ysyqll4leu4hAgkqP-yTy9UQvC4Z1Cp5OIciP9U82/s1600/back-to-top-button1.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLwpOx9EpUuETYDjriWkZK2yVV0RZxBVyVEHXgLypW0kBdpaZT-KITSvzrba3ofLL_omLF6e-r97tBYBxCpznaj15oiLZ0ypMBjGniiT9PEgWp_3exNHBKeb017xFAytyvJf4s40Uw7nm/s1600/back-to-top-button2.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge3SiYcogbI8gDe8wMGluttZQxAZUqlgj76UXo9KqyKDnZLXu2Zw6sL32VPnVc11v4XEc5u90rGq-lDypf5lciCF_93HJuqhyphenhyphenImsQSlvXhSpqNeUzFcsOzQESWZzaQIURBCn4sKVdgHn93/s1600/back-to-top-button.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJYAdZoJAOgLUD8NHxjFyumZZ1BOHXPql4pvzdKVmPGOLGnoZCZzeDP3uZVSEYVRIk_y8pcNCVIfJqu3grqN0b__ImTaoQssLxkfeUZ63FdOcAfKyzqi58TsfVaTALfZUsx_qE0VHkb0aC/s1600/Back-To-Top.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cfaMuGtMbh-MQr9ZRmbr6QT34mNp5OLOu6JP1ux7ipXsWo2foe9BXnP5_b1138Z-UzQumbGk0JvktX-q-1N3TAoqHnLN9edOUyek5MWcu2IC2-AGni9ukzI-RxfAeptR8B4DkZNpIZjb/s1600/backtotop1.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT5Sp1pRIlcPmD4SM50-XHLYG3Kz9Vu6e3MPE691fl2nqbKh_tKV2uG9v8ir5APcePZrRWemq-AuJ_oZ6mIb5o6JUE0jk9dfneXv3GCMfGFvFQ7uT3OF1D0FBCnnk0XNHVRMgVL-udoVXG/s1600/backtotop2.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJSzwJR6cywFZQ4Q51qjK1wZoFH9lT_-uVHlp3TW5JmfNG9gY6WfTFEhWjiLuXXwROXywjOZbyOcHiFastM7RgbTL_QidIMg2CiP1HjJupYtzW-cFTzGvhdTi2UeUJbpLQoizZJ5E2hqi/s1600/backtotop3.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLpxnzBraSZ1wAvNuHJCAtr1Q7OIVm-R1gD7VuzE_VWOeDF4KaywDgwC15PiyW2o2OK1Uy1nF4wNOtsL5mjQTycH6IghmUnhzoGrJoH7yy9YQUnlPfc_LYNgTZNuL4M0HYCBfU4-u6Mds/s1600/backtotop4.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKxKD0QtHhGwqdti3BmZjWtgzg7xWrH6ddtsLN2JAKI2FdFCsFspmyQ6Q97gnP1D5bq5iiqzPPbvw5rhyphenhyphen2EqkpzJq1OFu5233Jzb2WoAJ7gwJfS0FDvnEM7wYM9UjJ7PxfCT4E2fbphg-3/s1600/backtotopbutton1.gif 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCSdzQduwqwKbd_FfO5f0tc58DOnhA8JH-2V6jM6m08RaK5KxGOHP7tGlrWUkrQKzKhq4KHSooWMU0psgW0kQT1WI3e6ooaTUCmnOaegXMJkIMmTT3itfFaQ5f-qQ4cmLB05nxvP_SFey/s1600/backtotopbutton1.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXGHhg00f7_dEndhPM0RlBPnQ0F_FsFVoRMpyuKJMNBh6wRm4CEt3VK5XVgGrc-cueRnfXKYlptKR2vWs05l0U_I7z0zW75l2f05Evf97QDmLKCJxhox3g92QugYckeF2-IL5qQ29RLN6/s1600/backtotopbutton.gif 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG3Ph6F58VO0QG2G4guMWHIF4a2J7PU9eOV_nI0hpc_VI5_CwMaIo8zW6rEHPS5aJeD6BuS92x8gc6S6REfeRpJFITIdQo_zJO72YEwrX8kIS7SRIQSTAn9uhFZPLloFPiWL0JCVudONGP/s1600/backtotopbutton.png Tags: Blogger
0 komentar:
Post a Comment