20 Style Button Back To Top Untuk Blogger
Posted on
February 27, 2018
by Editorial Team

Tombol Kembali keatas/ back to top adalah sebuah ikon kecil yang pada umumnya terdapat di template, biasanya di setiap template sudah terpasang secara otomatis, namun jika kamu bosan dengan tampilannya yang itu, itu aja saya merkomendasikan kamu untuk mencoba menggantinya dengan 20 model Back To Top yang ajan saya bagikan dibawah ini.
Jika pada template kamu belum dilengkapi dengan ikon back to top ini, ada baiknya kamu pasang terlebih dahulu, berikut langkah-langkahnya.
2 Langkah Memasang Back To Top di Suts Blogspot
#1. Pastikan blog kamu sudah dipasang link ke jQuery, seperti ini:<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Jika belum ada, maka pasang kode tersebut di atas kode </head>
#2. Layout > Add a Gadget > pilih HTML/JavaScript
Copas kode berikut ini di kolom content:
<!--Smooth Back to Top Button Start-->
<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="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->
Keterangan: Pada URL merah di atas kamu bisa gantikan dengan model-model yang kamu sukai dibawah ini, kamu tinggal menggantikannya saja.
20 Style Back To Top Keren Untuk Blogger

https://1.bp.blogspot.com/-pkrLNYZpT8I/WpMd7zX2QiI/AAAAAAAAB4U/i4Hp-yGyouAfwphFcD6du9BPpQbjF2NDACLcBGAs/s1600/back%2Bto%2Btop%2Bsugeng.png

https://3.bp.blogspot.com/-2Qn6rGzVqdk/WpLcwcIt-vI/AAAAAAAABzU/e4buNkPA5qkTXwSsXHiAz_zi-65Te-LcwCLcBGAs/s1600/back%2Bto%2Btop.png

https://3.bp.blogspot.com/-nZcuwBmhz5s/WpSNPJErWOI/AAAAAAAAB7w/dVRktxI8TRoMhc2FWLure8Sw55vqn8t7wCLcBGAs/s1600/nxo%2Bnsocmsocjkx.png

https://3.bp.blogspot.com/-3Y8OLd0x47Y/WpSMcCH55II/AAAAAAAAB7o/IaJx6JCVVckhf8kqYEQVhLx9_zgfTz6AACLcBGAs/s1600/sdcsvbntthetrv.png

https://1.bp.blogspot.com/-ADyqeHzydSo/WpVSGQKInnI/AAAAAAAAB8k/zWpdlU0k7l4IjaZTYmHz5kS-C1OdEDKOgCLcBGAs/s1600/Untitled-kmkokonk.png
https://2.bp.blogspot.com/-wz2y1Dk7FKI/WpVQcdHiaeI/AAAAAAAAB8Y/RF6fU6ksSoQX1jUSkmxCJ4Jntgvm47uDACLcBGAs/s1600/Untitled-1-des.png

https://4.bp.blogspot.com/-82SRf4zOASw/WpVTBgmE-vI/AAAAAAAAB80/tY-1ulUph940Kht-rRuymdHMBhnjhytFgCLcBGAs/s1600/Untitled-jnjinijnjin.jpg

https://4.bp.blogspot.com/-eGHvnREuud0/WpVPqfYEhzI/AAAAAAAAB8Q/0UAIZktfDTAdixtZLjIUbhoj-dVWh1tSQCLcBGAs/s1600/Untitled-1-Recovered.jpg

https://3.bp.blogspot.com/-8Si-qJzLaMI/WpVSn03evtI/AAAAAAAAB8s/S-80qP0CnNI6MLwWsxl6Bp7X3v1WCH9wgCLcBGAs/s1600/Untitled-kjmoijiojoijo.png

https://2.bp.blogspot.com/-fAkyLcTwIh4/WpMd_d9xmhI/AAAAAAAAB4Y/EJIyDeSzh2crM4ViddMxiZ4UzEzdKKE_ACLcBGAs/s1600/back%2Bto%2Btopkjooj.png

https://4.bp.blogspot.com/-0uZMcz6teMk/WpVVI5bjdgI/AAAAAAAAB9M/vptgRH4oXqU4Zkn-WzJXsmRXBlMsJ1mcwCLcBGAs/s1600/Untitled-klmklmklm.png

https://3.bp.blogspot.com/-C8InFgpmAMo/WpLiFHD3PiI/AAAAAAAABz8/zfPuRH2U_4wIRdVgdt2Ih_cSgpxgi1XegCLcBGAs/s1600/back%2Bto%2Btop%2BW.png

https://3.bp.blogspot.com/-xYMNVf7Oqw0/WpVThrshfMI/AAAAAAAAB9A/9i_EJeTFwNgV3cwi4PDaGiTbxpU8tKdRgCLcBGAs/s1600/hubhyuvgyugygyug.png

https://3.bp.blogspot.com/-8Si-qJzLaMI/WpVSn03evtI/AAAAAAAAB8s/S-80qP0CnNI6MLwWsxl6Bp7X3v1WCH9wgCLcBGAs/s1600/Untitled-kjmoijiojoijo.png

https://2.bp.blogspot.com/-u4kcFQMbwV0/WpVVJjQpC3I/AAAAAAAAB9Q/3lfg_Rp9WLkFXabQbr5rx7isEjj8LfurACLcBGAs/s1600/Untitled-ijiohiuhihui.png

https://3.bp.blogspot.com/-wWRqH3WUxMM/WpLnA81s-eI/AAAAAAAAB0U/tPWKexy56kobJw8CIr88tVpQjrZUo-0AgCLcBGAs/s1600/back%2Bto%2Btop.png

https://2.bp.blogspot.com/-TJGRIhLFR4U/WpLkGzMLlYI/AAAAAAAAB0I/7jHdDkRl9kY_kqnt1_J74vISqUAXYCFRQCLcBGAs/s1600/back%2Bto%2Btop11.png

https://2.bp.blogspot.com/-47Y_RjbnU1s/WpLgq06karI/AAAAAAAABzw/scQ8GjDVVjce-8_WhmuNbHklRd7J-DEQwCLcBGAs/s1600/back%2Bto%2Btopuhiuh.png

https://3.bp.blogspot.com/-lArUel3kBIQ/WpVOZDaaNaI/AAAAAAAAB8E/535GK2jVSigY-dTrA3ZIYpjRjNzgodrhgCLcBGAs/s1600/asasasasasaUntitled-1-Recovered.png

https://2.bp.blogspot.com/-gT7d1P03vI4/WpLd1EQG7mI/AAAAAAAABzk/rMHUmoUmX2sXgeZ8tjZiZIjlW6Gqb90lwCLcBGAs/s1600/back%2Bto%2Btop3.png
Mungkin hanya itu, jika kamu meyulai artikel ini, beri tahu saya di kolom komentar.
0 Response to "20 Style Button Back To Top Untuk Blogger"
Post a Comment