Cara Memasang Back to Top Keren untuk Blogger Cara Memasang Back to Top untuk Blogger Ringan Responsive
Cara Memasang Back to Top Keren untuk Blogger. Ringan & Responsive.

SALAH satu klien menggunakan jQuery.

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

Back to Top merupakan potongan dari musim desain website/blog sebab user friendly, yakni berfungsi memudahkan pengunjung kembali ke halaman potongan teratas dengan satu klik, tidak mestik scroll atau "usap layar" (HP). Tinggal klik, maka halaman otomatis kembali ke atas.

Berikut ini salah satu isyarat Tombol Back to Top sebagaimana dishare vktechzone. Penampakananya menyerupai dalam ilustrasi. Live Demo

Cara Pasang Kode Back to Top di Blogger

1. Pastikan blog Anda sudah dipasang link ke jQuery, menyerupai ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Jika belum ada, maka pasang isyarat tersebut di atas kode </head>

2. Layout > Add a Gadget > pilih HTML/JavaScript
3. Copas isyarat 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="Cara Memasang Back to Top Keren untuk Blogger Cara Memasang Back to Top untuk Blogger Ringan Responsive" / /></a>
<!--Smooth Back to Top Button End-->

Jika mau gambar panah menyerupai blog CB, ganti isyarat gambar warna merah di atas dengan link gambar berikut ini:

https://lh3.googleusercontent.com/-djDGtUlZYVg/VWZgc3OhARI/AAAAAAAAJik/9up-tcLb3icthtbooNPApn4oMTx07eBDQCCo/s50/back%2Bto%2Btop%2Bbutton.gif

4. Save!

Back to Top yang Dipasang di Blog CB

Berikut ini isyarat tombol kembali ke atas yang dipasang di blog CB. Pastikan ada link ke awesome font di atas isyarat </head> menyerupai ini:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Kode CSS
Pasang di atas isyarat ]]></b:skin>

#back-to-top {background: #E73037;color: #ffffff;padding: 8px 10px; font-size:24px}
.back-to-top {position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

Kode JavaScript Back to Top 
Pasang di atas isyarat </body>

<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

Demikian Cara Memasang Back to Top untuk Blogger. Masih banyak desain atau cara lain memasang Back to Top.

Good Luck & Happy Blogging! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours