Loading...

Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger - Hallo sahabat MALAYSIA ON THE HOME INFORMATION, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel budaya, Artikel ekonomi, Artikel information, Artikel jawatan kosong, Artikel perniagaan, Artikel politik, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger
link : Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger

Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger

Cara Memasang, Menampilkan, atau Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger.

DI blog ini sudah banyak tutorial cara memasang tombol kembali ke atas (Back to Top Button), termasuk Cara Memasang Back to Top untuk Blogger Ringan Responsive.

Kali ini kembali CB share tentang cara memasang kode tombol kembali ke atas yang lebih oke, ringan, responsive, menggunakan Font Awesome.

Demonya bisa dilihat di Code Pen yang menjadi sumber kode Back to Top Button for blogger blog ini.

Tombol ini menjadikan blog kita ramah pengguna (user friendly) dan merupakan trend tambilan website masa kini. Back to Top Button ini memudahkan pengunjunh kembali ke halaman teratas blog dalam satu klik atau satu tap.

Desain tampilannya persis seperti gambar ilustrasi di postingan ini.

Cara Memasang Tombol Kembali ke Atas (Back to Top Button)

1. Klik Theme/Tema > Edit HTML

2. Masukkan (Copas) tiga kode Tombol Kembali ke Atas untuk Blogger berikut ini.

KODE CSS:
Simpan di atas ]]></b:skin>

#return-to-top{position:fixed;bottom:20px;right:20px;background:#000;background:rgba(0,0,0,0.7);width:50px;height:50px;display:block;text-decoration:none;-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;display:none;-webkit-transition:all .3s linear;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top i{color:#fff;margin:0;position:relative;left:16px;top:13px;font-size:19px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top:hover{background:rgba(0,0,0,0.9)}
#return-to-top:hover i{color:#fff;top:5px}

Kode JavaScrip Tombol "Kembali ke Atas"
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
 $(window).resize(function () {
  var w = $(window).width();
  if (w > 800 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
//]]>
</script>

KODE HTML Back to Top Button
Simpan di atas kode </body>

<a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>

Demikian Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*



✍ Sumber Pautan : ☕ Contoh Blog

Kredit kepada pemilik laman asal dan sekira berminat untuk meneruskan bacaan sila klik link atau copy paste ke web server : http://ift.tt/2rfqOlB

(✿◠‿◠)✌ Mukah Pages : Pautan Viral Media Sensasi Tanpa Henti. Memuat-naik beraneka jenis artikel menarik setiap detik tanpa henti dari pelbagai sumber. Selamat membaca dan jangan lupa untuk 👍 Like & 💕 Share di media sosial anda!

Demikianlah Artikel Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger

Sekianlah artikel Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Tombol Kembali ke Atas (Back to Top Button) Terbaru di Blogger dengan alamat link https://malaysiaonthehome.blogspot.com/2017/05/cara-membuat-tombol-kembali-ke-atas.html

Tweet

Subscribe to receive free email updates: