Cara Memasang Back to Top untuk Blogger Ringan Responsive - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Cara Memasang Back to Top untuk Blogger Ringan Responsive, saya telah menyediakan Tutorial Blog lengkap seperti Cara Memasang Back to Top untuk Blogger Ringan Responsive . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

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

SALAH satu klien Layanan Premium CB Blogger minta dipasangkan tombol kembali ke atas (Back to Top Button) yang smooth menggunakan jQuery.

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 mestik scroll atau "usap layar" (HP). Tinggal klik, maka halaman otomatis kembali ke atas.

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

Cara Pasang Kode Back to Top di Blogger

1. Pastikan blog Anda 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:

<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5g5fUfm1opGv35ZOTwvwTbjCTkyY65hk7ZwlCJ5WdG-IzFQGpxj56O0k-62QwRqG8zDwdeNJC7wNINdJrqiZ4LI-EBPyUkYi7lWfpT0lbf7fnuIEdaiiLp5o6Uqzh9_NqwZSWt7apjEuJ/s1600/back+to+top+.png" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpASHryLsDLMNy_Bn18e7Ip-XG16ArR5uoai7GqrkgdfcgoaCk5B1cYrpNWSXUR_yDpv3RAb3oCpxo9RiB9wC1mK_Ie6la238Nchte6knWDxk8nFb0NIaCWz6EGfvYRluteTuMtwvSXCI/s50/back+to+top+button.gif

4. Save!

Back to Top yang Dipasang di Blog CB

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

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

Kode CSS
Pasang di atas kode ]]></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 kode </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.contohblog.com).*

Demikianlah Artikel Cara Memasang Back to Top untuk Blogger Ringan Responsive

Sekian Tutorial dari Blogrenanda Cara Memasang Back to Top untuk Blogger Ringan Responsive, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

Cara Memasang Back to Top untuk Blogger Ringan Responsive

Anda sedang membaca artikel Cara Memasang Back to Top untuk Blogger Ringan Responsive dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2016/12/cara-memasang-back-to-top-untuk-blogger.html Semoga artikel ini bisa bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: