Cara Membuat dan Memasang Tombol Back to Top (Kembali ke Atas) Keren di Blog

komputerdia.com - Tombol Back to top atau tombol kembali keatas merupakan tombol alternatif yang bisa kalian terapkan di blog yang mana fungsi tombol back to top ini adalah untuk mengembalikan suatu halaman website atau blog dari posisi bawah ke posisi atas tanpa harus melakukan scroll atau menggulir mouse, biasanya tombol back to top ini dipasangkan di samping bawah kanan atau kiri dari tampilan blog / website.

Sesuai dengan penjelasan diatas, bahwa Fungsi utama dari tombol back to top adalah sebagai tombol akses cepat untuk menuju bagian paling atas pada sebuah website atau blog. Dengan kata lain pengunjung bisa lebih cepat mengakses halaman paling atas hanya dengan menekan tombol back to top yang tersedia pada blog tersebut

Perlu diketahui, bahwa tombol back to top atau tombol kembali keatas ini akan muncul serta dapat berfungsi ketika isi halaman suatu blog telah melebihi atau melewati garis batas suatu monitor, dan dengan otomatis tombol ini akan muncul, kemudian kika kita klik tombol tersebut maka dengan otomatis kita akan diarahkan ke halaman paling atas lagi.

Pada tutorial kali ini saya akan memberikan beberapa cara membuat dan memasang tombol back to top di blogger. Untuk masalah pemasangannya sendiri, tombol back to top ini bisa dipasang melalui widget/gadget secara langsung dan ada juga yang memerlukan akses edit html, dan didalam tutorial ini saya akan menjelaskan cara keduanya agar kalian dapat memilih sesuai dengan keinginan

Memasang Tombol Back To Top di Blogger

1. Membuat Tombol Back to Top di Blogger

• Langkah pertama silahkan kalian masuk ke akun blogger, pilih menu tema kemudian klik tombol edit html
• Setelah berada dihalaman edit html, silahkan cari kode </head> kemudian tempelkan kode dibawah ini tepat diatas kode </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>
<style>
#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}
</style> 

• Langkah selanjutnya silahkan kalian cari kode </body> dan tempelkan kode dibawah ini tepat diatas kode </body>

 <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLoz9fbYOIeXvKFgrwA93lVC4QhsfZ0fi5cfgShyphenhyphenCWhVQXl_kv0zSTQpGaZuUj01pO7rRmfDRxN_wRhM46ToRZVNgIyCzLsDHuotYy0Ejrk4KqkleROxF-833lKKuXEw5XMztRzKAYuEL/s1600/backtotop.png'/></div> 

• Jika semua semua kode diatas telah kalian pasang sesuai dengan tutorial, silahkan tekan tombol simpan tema dan lihat hasilnya

2. Memasang Tombol Back to Top dengan CSS

• Langkah pertama silahkan kalian masuk ke akun blogger, pilih menu tema kemudian klik tombol edit html
• Setelah berada dihalaman edit html, silahkan cari kode </head> kemudian tempelkan kode dibawah ini tepat diatas kode </head> 

 <style>
/* Back to Top Pure CSS by komputerdia.com */
html {scroll-behavior:smooth;}
.komputerdiaTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; transition:all .5s; background:#000080 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.komputerdiaTop:hover {background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
</style>

• Langkah selanjutnya silahkan kalian cari kode </body> dan tempelkan kode dibawah ini tepat diatas kode </body>

 <a href="#" class="komputerdiaTop"></a> 

• Jika semua semua kode diatas telah kalian pasang sesuai dengan tutorial, silahkan tekan tombol simpan tema dan lihat hasilnya

3. Memasang Tombol Back to Top di Blogger

• Langkah pertama silahkan kalian masuk ke akun blogger, pilih menu tema kemudian klik tombol edit html
• Setelah berada dihalaman edit html, silahkan cari kode </head> kemudian tempelkan kode dibawah ini tepat diatas kode </head> 

 <style type='text/css'>
#Backtotop{
 position:fixed;
 background:#00BFFF;
 text-align:center;
 bottom:1px;
 right:15px;
 cursor:pointer;
 width:35px;
 height:40px;
 border-radius:5px 5px 0 0;
 padding:2px;
 display:none;
 transition:all .3s ease-out;
}
.Back.to.top:before{
 content:&quot;&quot;;
 position:absolute;
 bottom:7px;
 right:7px;
 width:0;
 height:0;
 border-style:solid;
 border-width:0 12px 32px 12px;
 border-color:#FFFFFF;
 line-height:0;
 transition:all .3s ease-out;
}
.Back.to.top:after{
 content:&quot;&quot;;
 position:absolute;
 bottom:6px;
 right:7px;
 width:0;
 height:0;
 border-style:solid;
 border-width:0 12px 15px 12px;
 border-color:#FFFFFF;
 line-height:0;
 transition:all .3s ease-out;
}
#Backtotop:hover{
 background:#b50800;
}
</style>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){if($(this).scrollTop()&gt;100){$(&#39;#Backtotop&#39;).slideDown(200);}else{$(&#39;#Backtotop&#39;).slideUp(300);}});$(&#39;#Backtotop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50);});});
</script>

• Langkah selanjutnya silahkan kalian cari kode </body> dan tempelkan kode dibawah ini tepat diatas kode </body>

 <div id='Backtotop' style='display: block;'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxAmxyyYn2B2jKOehYo1AhNR38VX6Yk7E5fys-afflsJDjLcVWp2plCcKS2XzUhrN4f7zckBB-j1rrRd2lowm57dPp4RIaQ7v-EIeMMvjmHVSX3cj6tNithDPBsFm8t1MJtVKFfAPLW6O9/s1600/backtotop.png'/>
<span class='Back to top' title='Back to top'/>
</div> 

• Jika semua semua kode diatas telah kalian pasang sesuai dengan tutorial, silahkan tekan tombol simpan tema dan lihat hasilnya

4. Membuat Tombol Back to Top di Blogger

• Langkah pertama silahkan kalian masuk ke akun blogger, pilih menu tema kemudian klik tombol edit html
• Setelah berada dihalaman edit html, silahkan cari kode </head> kemudian tempelkan kode dibawah ini tepat diatas kode </head> 

<style>
.atas {position:fixed;left:3%;bottom:10%; 
background-color:#fff;
font-size:2em;
font-weight:700;
border-left:2px solid #333;
box-shadow:2px 2px 4px #000;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
display:inline;
padding:6px;
}
.atas a {
color:#333;
text-decoration:none;
border-left:1px solid #555;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
box-shadow:2px 2px 4px #000;
}
.atas:hover {
border:1px solid #555;
box-shadow:2px 2px 4px transparent;
}
</style>

• Langkah selanjutnya silahkan kalian cari kode </body> dan tempelkan kode dibawah ini tepat diatas kode </body>

<div class="atas"><a href="#" title="Back To Top">&#8657;</a></div>

• Jika semua semua kode diatas telah kalian pasang sesuai dengan tutorial, silahkan tekan tombol simpan tema dan lihat hasilnya

5. Memasang Back to Top Dengan Javascript

• Langkah pertama silahkan kalian masuk ke akun blogger, pilih menu tema kemudian klik tombol edit html
• Setelah berada dihalaman edit html, silahkan cari kode </head> kemudian tempelkan kode dibawah ini tepat diatas kode </head> 

<style type='text/css'>
/*<![CDATA[*/
/*Back To Top*/
.scroll-button{box-sizing:border-box;font-size:1.2rem;line-height:2rem;padding:3px;width:38px;height:38px;right:20px;bottom:20px;visibility:visible;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;cursor:pointer;transition:all 1.2s;-webkit-transition:all 1.2s;-moz-transition:all 1.2s;-ms-transition:all 1.2s;-o-transition:all 1.2s;background:none;border:solid 2px rgb(0,191 ,255);color:rgb(0,191 ,255);border-radius:0%;position:fixed}
.scroll-button:hover{filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}
.scroll-button--hidden{filter:alpha(opacity=0);filter:progd:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;visibility:hidden}
/*]]>
</style>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/backtop.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

• Langkah terakhir silahkan kalian tekan tombol simpan tema dan lihat hasilnya

Share this post