20 Style Button Back To Top Untuk Blogger

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.

Tomy Saputra

Tomy Saputra is a blogger and marketer who actively writes on his personal blog Iamtomys.com (tips & tricks on blogging and digital marketing strategies) and also has established an entertainment site Link15 and several other sites. He also specializes in content marketing for startups and small businesses. You can hire him for your next writing project.

• 
• Share
• Tweet
• Share