4+ Cara Pasang Tombol Back to Top di Blog dengan Mudah

Tutorial: Cara Membuat, Memasang dan Menampilkan Tombol Menu Back to Top di Blog Blogspot

Pernah mendengar atau membaca artikel tentang Back to Top di blog? Buat yang belum tahu, pengertian Back to Top adalah sebuah ikon yang apabila di klik, akan kembali ke halaman atas.

Praktisnya begini, tombol Back to Top ini berfungsi mengembalikan pembaca dari halaman terbawah suatu situs web, menuju ke halaman bagian paling atas. Biasanya, widget Back to Top ini digunakan oleh situs-situs yang biasanya memposting Content dengan isi yang panjang ke bawah.

Salah satu fakta menariknya, -- yang berkaitan erat dengan Google AdSense; Back to Top sebenarnya kurang cocok digunakan apabila situs web itu menampilkan iklan Google AdSense; kenapa? Karena dengan adanya Back to Top, berarti memperkecil klik pada iklan yang berada di Sidebar-Wrapper.

Selain itu, menggunakan Back to Top juga turut mempengaruhi kecepatan loading situs web; karena untuk membuat dan mengaktifkan fitur ini, mayoritas menu tombol Back to Top menggunakan JavaScript tambahan.

4+ Cara Pasang Tombol Back to Top di Blog dengan Mudah

Di bawah ini ada beberapa cara yang bisa di pilih, dan bisa disesuaikan dengan kondisi situs web kamu; apakah template blogger kamu masih berbahan default, atau sudah di modifikasi seperti halnya SEO Kraken Blogger Theme.

Mengapa kami katakan seperti itu? Suatu tema blogger yang sudah di modifikasi, biasanya tidak lagi mendukung beberapa JavaScript tambahan ini, dan bahkan peletakan kodenya bisa saja berbeda.

Contoh mudahnya saja; biasanya JavaScript ditambahkan di atas kode </body>. Nah beberapa diantaranya tidak bekerja, melainkan harus di pasang di atas </head> agar JavaScript benar-benar bekerja sebagaimana mestinya.

1. Cara Membuat Tombol Back to Top dengan HTML/JavaScript

Yang dimaksud memasang tombol menu Back to Top dengan HTML/JavaScript, artinya kita hanya perlu masuk ke Layout, -- tanpa harus masuk lagi ke template blogger.

• Blogger > Layout (Tata Letak) > Add a Gadget (Tambahkan Gadget)
• Pilih HTML/JavaScript > Copy (Salin) kode di bawah ini > Paste (Tempel) di kolom yang sudah disediakan oleh Blogger
• Kemudian simpan Layout (Tata Letak) dan lihat hasilnya

Kode yang akan di Copas dan/atau diletakkan di Layout (Tata Letak) di Blogger:

<script type="text/javascript" >
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="URL_GAMBAR_DISINI" />',
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 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()
</script>

Ubah kode URL_GAMBAR_DISINI di atas dengan tautan URL yang ingin kamu gunakan. Beberapa koleksi URL untuk ikon Back to Top yang bisa digunakan, diantaranya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga1rypTs17dlK0QPZfALgJir3J1fBD5qPrdq41-Tq-zWypK1jXkP5nLfBmdCKlBB_CaFWidFkcicHwhQ7hbIRGP4JWMcRCtOr_S6N8MX45ZW8o1OUspE_IL0zsTNuJb0NBRQE52H41ASIa/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGJJd7nUX-L6TIcBeXmsBRcZZo_HNwd4OcVZ1aVkGJH9l1q9V2V7LxSgR_mzF7eENnfiHp0LZ1nfVuQuPhVjifPtaG38D8SslycJDV2QGHn6hI_S5QNtIaXqaC2lZplBn_6w1ecg2NbTEl/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2i3n0HNCkcdweKz6raVu9HSuCX0zB7TXEBv0SStxFWkij2fsCGXKIrgS1KxQEifXfiEfG_DNWclD4hO7zCCOVmHMxjB-JEoCE8ZpBwtmFjvKcwQgQhEf9GSOncoCzDvBEX0kETldO_nQ/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cHiOMxep5ignKzIO9qXlfgyU3AZolIAMgFanb0_yF94SxtuSUb0lqAb5TFSxKUC-zubHZqAH9y0wlaBjAPRjlKAU-UcNtFtvPeNv1AQG2AdptVRAnVTE62XMn7PPsm_GMtTGwkqG7goh/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nef7LVWY7Vhcb9mLkJ8wmgH3Uhkq9s0w7EPfk7raqmobcedYTE1wqMcdYab-woPhqC4HVlAW8XYzRPwHaI6cBHM2lpqcjJ2DAEP8nvOQCwoMPAhzp2XP2fdFjxXWZvRXlcXsgn8-Ea9V/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-5.png

Catatan: Untuk ukurannya sendiri, kamu bisa mengaturnya langsung dengan bantuan CSS untuk bagian Width dan Height.

Cara di atas, kami rasa cukup mudah. Jangan lupa, hapus Obeng dan Tang yang ada di dalam template blogger TEPAT sesudah memasang widget Back to Top di atas.

2. Cara Membuat Tombol Back to Top dengan jQuery dan HTML/JavaScript

Hampir sama dengan tutorial No. 1 diatas, akan tetapi di tutorial No. 2 ini kita akan membutuhkan sedikit bantuan dari yang namanya jQuery.

1. Copy (Salin) salah satu kode yang ada di bawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Atau kode ini:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

2. Letakkan di atas kode </head>

Setelah memasang kode jQuery, selanjutnya ikuti beberapa langkah mudah cara menampilkan tombol Back to Top di bawah ini dengan cermat:

• Masuk ke Blogger > Masuk ke bagian Layout (Tata Letak)
• Ketuk tombol Add a Gadget (Tambahkan Gadget)
• Copas kode di bawah ini, dan simpan > Cek tampilan blog seperti biasa

<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="URL_GAMBAR_DISINI" />
<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>

Catatan: Hapus URL_GAMBAR_DISINI di atas dan ganti dengan salah satu URL daftar ikon yang sudah kami sediakan di tutorial No. 1 di atas.

Jika tutorial di atas Gagal, coba cek kembali template blogger yang digunakan. Permasalahan kenapa bisa gagal, biasanya karena kode jQuery tersebut sudah ada di dalam template blog yang kamu gunakan; sehingga jQuery menjadi 2 -- Duplicate, or Double jQuery.

Untuk mengatasinya, hapus jQuery yang sudah ada sebelumnya. Jangan pasang kode jQuery yang sama, dan jangan pernah menduplikatnya.

3. Cara Cepat Membuat Tombol Back to Top di Blogger/Blogspot

Mau yang lebih cepat dan efisien? Ikuti langkah-langkahnya di bawah ini dengan hati-hati.

1. Masuk ke Blogger > Layout (Tata Letak)
2. Ketuk tombol Add a Gadget (Tambahkan Gadget), Copas (Copy/Paste) kode di bawah ini:

<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="URL_GAMBAR_DISINI" />', //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. Selanjutnya klik tombol Save

Kode yang digunakan ada di bawah ini, dan jangan lupa ganti URL_GAMBAR_DISINI dengan URL yang menampilkan ikon Back to Top yang sudah kami siapkan di atas (lihat kembali tutorial No. 1 di atas).

4. Cara Pasang Widget Back to Top yang Smooth di Blogger/Blogspot

Dikatakan smooth karena muncul atau tidaknya ikon Back to Top ini sangat lembut. Dan bahkan, kondisinya tombol Back to Top ini bisa hilang dan muncul secara otomatis.

Maksudnya begini lho... Jika kondisi sedang di atas, ikon tidak muncul. Namun ketika di scroll ke pertengahan laman dan ke halaman paling bawah, ikon Back to Top akan muncul secara otomatis.

Karena sifatnya yang smooth, kita membutuhkan kode jQuery. Simpan kode jQuery di bawah ini, tepat di atas kode </head> atau </body>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

Catatan: Jika kode jQuery sudah ada, tidak perlu lagi memasangkannya. Sebab kalau sudah duplikat, widget Back to Top tidak akan muncul dan widget lainnya akan mengalami error.

• Layout Blog (Tata Letak) > Add a Gadget > HTML/JavaScript
• Copy (Salin) kode di bawah ini, dan letakkan (Tempel/Paste) di dalam Content yang disediakan HTML/JavaScript
• Klik tombol Save, dan cek hasilnya

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="URL_GAMBAR_DISINI" alt="Back to Top" / /></a>

5. Cara Buat dan Pasang Menu Back to Top dengan Font Awesome (Bootstrap)

Bisa di bilang, gadget Back to Top inilah satu-satunya widget Back to Top yang ringan (Fast Loading) dan Responsive.

Kenapa dikatakan ringan? Karena yang diandalkan adalah Font Awesome yang berasal dari Bootstrap, -- bukan gambar lagi. Terlebih-lebih, ini anjuran sebagaimana rekomendasi dari Google sendiri.

1. Pasang kode JavaScript font awesome di bawah ini, tepat di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

2. Untuk CSS nya sendiri, kami menggunakan kode CSS berikut:

#back-to-top {background: #E73037;color: #ffffff;padding: 8px 10px; font-size:24px}
.back-to-top {position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

3. Untuk mengaktifkan dan memanggil fungsi widget Back to Top, pasang kode JavaScript di bawah ini TEPAT di atas kode </body>

<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

4. Selanjutnya akhiri dengan menekan tombol Save Template, dan cek hasilnya.

Karena sifatnya yang mengandalkan Font Awesome, gambar (atau tombol) yang ada bisa kamu ubah (ganti) sesuai keinginan kamu. Caranya seperti apa sih?

Coba lihat JavaScript di atas (langkah nomor 3), ini kodenya:

<i class='fa fa-chevron-up'/>

Kode di atas bisa kamu ganti dengan kode-kode Font Awesome lain yang ingin kamu gunakan. Untuk mengecek Font Awesome lainnya, bisa langsung mengunjungi situs web Font Awesome.

Punya pertanyaan seputar cara membuat, memasang, dan menampilkan widget Back to Top di blogger/blogspot ini?

Source:
http://www.contohblog.com/2016/07/cara-mudah-memasang-tombol-back-to-top.html
http://www.contohblog.com/2014/08/cara-memasang-back-to-top-di-blog.html
http://www.contohblog.com/2016/12/cara-memasang-back-to-top-untuk-blogger.html

Labels: Tutorial Blogger

Thanks for reading 4+ Cara Pasang Tombol Back to Top di Blog dengan Mudah. Please share this article.

Share this post