20 Style Button Back To Top Untuk Blogger

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

Back To Top style 1

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

Back To Top style 2

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

Back To Top style 3

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

Back To Top style 4

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

Back To Top style 5

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

Back To Top style 6

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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

Back To Top style

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.

Comments Leave a Reply

Add a Comment

Kami senang anda memutuskan untuk meninggalkan komentar, harap di catat bahwa setiap komentar dimoderisasi sesuai dengan privacy policy situs kami. Kami menggunkan sistem komentar disqus, semua komentar yang mengandung spam, promosi, tautan, dan lainnya tidak akan ditampilkan.

0 Response to "20 Style Button Back To Top Untuk Blogger"

Post a Comment

share counter

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel