Cara Mudah Memasang Tombol Back To Top Blog Yang Responsive

Back To Top Responsive

kali ini saya akan berbagi sedikit tentang Cara memasang tombol back to top pada blog yang responsive dan mudah tentunya. sebenarnya sudah banyak yang membahas tentang topik ini namun tidak ada salahnya jika saya juga sedikt berbagi apa yang saya bisa dan berguna bagi orang lain. he he jadi sok baik gtu ya......

Blog adalah tempat kita berbagi pengetahuan, pengalaman, informasi, dan lain-lain, kita semua berhak membuat blog kita sendiri dan pengunjung juga berhak untuk mengunjungi dan melihat blog yang kita buat, kita juga seharunya jangan tinggal diam saat pengunjung kehilangan kenyamanannya di blog kita, kamu juga harus memberikan beberapa fasilitas untuk pengunjung di blogmu sebagai apresiasi bahwa blog yang kamu buat memang bertujuan untuk berbagi ilmu yang mungkin berguna bagi yang membacanya. salah satu fasilitas yang bisa di beri pada blog yaitu tombol back to top, tombol back to top ini dapat mempermudah pengunjung untuk scroll ke atas dengan cepat, selain cepat, tombol back to top ini sudah diberi smoothing hingga saat scroll ke atas dengan halus.

Tombol Back to Top untuk Blogger ini muncul saat halaman discroll ke bawah. Posisinya juga di samping kanan bawah, sehingga tidak mengganggu halaman.

Back to Top merupakan bagian dari trend desain website/blog karena user friendly, yaitu berfungsi memudahkan pengunjung kembali ke halaman bagian teratas dengan satu klik, tidak harus scroll atau "usap layar" (HP). Tinggal klik satu kali saja, maka halaman otomatis kembali ke atas.

Cara Memasang Tombol Backk To Top Responsive Pada Blog

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

3. Copas kode berikut ini di kolom content:

<!--Responsive Back to Top Button Strat-->
<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://plusdil.com/resimler/yukaricik.png" / /></a>
<!-- Responsive Back to Top Button End-->

4. Kemudian save

Catatan : Warna Merah link icon gambar Back To Top 
Kamu bisa mengganti gambar tombol back to top, dengan cara mengganti url yang berwarna merah. Pilih salah satu gambar dibawah ini, dan salin url-nya untuk menggantikan url yang berwarna merah. Atau, Anda dapat mencarinya di Iconfinder dan Google.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGz1l8gBIreC9hXAGk6VmPQ-q4obHsFQ8mPMcVG32yA8zrgcN3ftCk4L0cHNWrUuWPLEhODpF5J9Nei9xTRpak-AoeDgnmHdRyzRz5SjMWThZl1Ke0i0XLtTx_0-sTHBey0m03QxpnTSvS/s1600/back.to.top.2.png 

http://3.bp.blogspot.com/-tI9PVWH6hRE/VIABAUPVY_I/AAAAAAAABXo/WCcctNeoTw/s1600/back.to.top.1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHyTEHdCY9saDrXaKQz9f6pGG1-BgMeFlK518BxYQDXy5wjeP9hCaG5D2sFs6fG8bBS41pJ8SkMERp0dTHp9j-VtKzHD-3kNXN92pR3xY2ze9D9hD3hA0GI5YGLqG3Dqhcwa6WDop-2TA/s1600/back+to+top+green.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggxNcBmXyaT1XjuydaD0KuezfYoxk8xYo2lQx_y6N8RZrRfxZ9kBjncO2jalR-m6PeNXQnXcO5W4VKtf1iWhkUErU64fpvLzKtIeLINNFM7QzoL7ZaMEOI1KSfzyw5j7XvTigDUZ51Md2e/s1600/back.to.top.4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQNfanExLrs1HG4nMIYPEWdNhoCg865FowOlGM3ullJkiWERcRwwIlvfu6NuJBdJOomlXUoZI_SEEZgpzH4CWVscfMnqHjaYOO6RA0upKPy1ZbI0dyXULJBL8BqUhsJnB-co4NqN6XIS5S/s1600/back.to.top.5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHCvhIQ6lrgj89MlhIJpPtO1Lh0wiiptcy3jHEGQXyPgC2OPXq9TihCt1EMGU0l66u_tlf-D_phd1iVaywVGxa54TOUQIup41R07BIY1ksG_T6fsfbO0Cy8Y7pPgJl3We7jyzACPWd4I/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixaoc7X68b2GZJ-iCYfoxyBOlEfzpQ5qEEERRormCOzZzZLt__YXlWqFG944qIxhUK2hdX_tODsvno61QJmf_AndRxScU5Xnw62eGvG5OcxRMduWog05fU7Z55FsclZrZNk2JgmUvGrXA/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYTNObh1aw4ecgo9DWK2Oi7ac_PQu5hiz75h5QbKbXWhue9xgVgI2wg0bC4jaqG4-8iNG2PCtrl-dzviRS5asrcHtol0CSKRGKGw9lrTQXEtcrMcLL-lGz1UPUDcFw1Hepk28_m3L264/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNFNtQ9tVaIPIEEPIGwF9vhzCWHsx7Q14U1XkraR1Zg_Ga7tssljvSvKGnQ9Kg_BALvM4M9-KS6I1p0DS5SyBK9hp50k1wEfOUrotp26IbTb6XkSTlutjWSc058NdcS9bbK3a44lvfUFs/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSAkopmcbqERe1rQWazlz9vw-dpysQK68G7VKHMbYmhm4MAVrmd366Usgv2MjAf7MgXxgIeSMPMzUTl4VUIFvQZV3zMdq6G0e_M-dHnlJ2x6OkqOweeNfcFr7sWzTDpJj2EulxrCJCqU/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHH-sbt8fAKlikqmB7AulwELCh58V0FOYpo_dWnjXVhyJGmWMSxN0pjXLOB-7JbKR6HsO79ORVTXT5cPH3mrNmc8hCifrEdEyN2VF8bzdQwm06YnZXbPnXj3dOkPjZkXPY5F4v17taY8/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhek_9vNrHz76EkUQGjwxhC7F7xIEaxsCTOvny8xG68EEdAuhNffNnI0H-iPgnLdlnMJwLIGOsFdY7o_jfC4BJkvLtqD8Fo2N411MfeMo8Io4CUZdZx5btC7JH5KeVy2LdN78GX2yNeU_4/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbUGIL-qEktuuW-o-hmLY9mIsgqT0_FSY0VuD5gd5ATQSkZQM6LUDuXewiEl6mqaC5acs0H3H7ESWCZ7lp8w97WPapt42kHoFu26VzGUsUBeC8TTNn_Ef5yWeQZkePMd2mzzfruFJFm4/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHk1cYu_EI-22bABRVTY0gSTLLhuUVcgbHcQn_-W_Z7dYDOG8Slh93YBFfsPhMJ-USE2kmdok2Xu69xTsvCp2Xw3EFcQSKTxC42DmwDWqbpLf9srTGhvFov7aro1LgkSxKJCa7NXVicjU/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis736T6fasZQT37bPEd0peF3O_kT-p9NSUZvyMzbVMWaKt36egMYDx4gtQxmQoi2f-U8Ndk5SSth8sC9yd7GDqbOETFxcRjqzdE9OMnIEPeBax3QLd90N_GY6ZkUNzd3_SFyZjOZgZiCU/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ1GG8F_AgIiIwK9OKsr7UWdu6KdHQJ_GEzeYQCv8bSJ18XDkypN56TFAC7qDc5FDthj1m4h2quBXCWG7NmFh948SxXS4j0iCLGkqBNo8dmOXiFTzTgXD1ZrsoOOiwAjceM07XHaTGvbo/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2eoL1l-a5ly3bo_q4LxXP1yjSorSCrS6cntUDGonV2WuWX0EGeO1bNSC5gbxUIxB1n-JBIQFC3JMUjNT3AgmCpDPM0bKu1t0-g9ck5uCdUarDg6EddQaIOP69oz3UrwIS5mPiqoB0EE/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRXFO0QCbs_fcgIJXsDA-POjI-utaXaqljJ-V0A8I51xMhk-LcPUF8QYG-xCYPB5MlnD1I78Hks98JM4OWV3AYDD-Knurhw0JoGcgHZlixHzkEYyC2Pfam21BA_zYcRGZLI8RGiFnaAhA/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLs1Moi6eoncvSP8tR3P6IKS4R_TytkbNUti20FZRR2s4DH7_vnMU8IP-cTi9QEr6M0yIAm4yemcfU_FRLFiaTculEmGCpIzChzr5oZl2cZ7iwJW6N-wkeGIj-i_cVgJNVVoFF9MNBb0Y/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg49vNpaxIhFdeD0ZwcZgaVJwIcuoTUy_cgk85NC_UunpH0XHWJ-V98iWIo1cIvhGZVQjkV1BmCJorzkU-QWC7EFqV1TiIoOWAS7HWKGf6fQ4HVcN8X0I-jqid8Qlyiy2DAZapRJZ7nkQE/s1600/back_to_top_button.png 

Nah, itu tadi sedikit share tentang Cara Mudah Memasang Tombol Back To Top Blog Yang Responsive , jangan ragu-ragu untuk mencoba ya,.... he he. karena dengan mencoba kita tau seberapa kemampuan kita, terus belajar dan tetap semangat. Semoga artikel ini dapat menambah wawasan kamu dan bermanfaat, selamat belajar dan sukses selalu.

Terimkasih telah berkunjung dan menyempatkan membaca.

Tweet

Artikel keren lainnya: