Tutorial Blog

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

7 tahun ago
2 Comments
by Kahfie IDN

Cara Memasang, Menampilkan, atau Membuat Tombol Kembali ke Atas otomatis (Back to Top Button) Terbaru di Blogger.. pada hari ini saya akan menjelaskan bagaimana cara membuat tombol back to top yang biasanya terpasang pada sebuah blog. Pernahkah anda melihat sebuah button tanda panah keatas pada sebuah blog yang jika diklik button tersebut maka akan membawa kita kehalaman atas pada sebuah artikel atau homepage. Button back to top kembali keatas dipasang memiliki tujuan , yakni memudahkan para pengunjung untuk kembali kehalaman atas pada sebuah blog.

Cara memasangnya juga cukup mudah, namun ada beberapa hal ayng perlu anda perhatikan, dalam membuat tombol ini sebaiknya pilihlah kode script yang benar benar responsive agar tidak mengganggu kinerja suatu blog.Dan tombol ini pun merupakan tombol tampilan web web atau blog masa kini, jadi jika anda ingin memasangnya silahkan simak caranya berikut ini:

Untuk demonya anda bisa melihat website ini DISINI

Atau contoh pada gambar kurang lebih seperti ini :

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

1. Silahkan buka dashboard blogger anda.
2. Kemudian pilih menu Tema/Theme.
3. Edit HTML
4. Copy kode dibawah ini dan letakan diatas kode </body>

Baca Juga:

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

 

5. Oke sekarang mari kita berikan sedikit sentuhan kode CSS nya
6. Copy kode dibawah ini lalu letakan diatas kode ]]></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}


 7. Setelah itu mari tambahkan javascriptnya
8. copy kode dibawah ini lalu letakan diatas 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>


 9. Lalu SAVE TEMPLATE dan lihat hasilnya

Demikian cara Membuat Tombol Kembali ke Atas (Back to Top Button) di Blogger. semoga berhasil 😀

You may also like

About the author

Kahfie IDN

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

View all posts

Leave a Comment

2 Comments

  • kak mau tanya
    yang ini

    // 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);
    });
    //]]>

    itu di taruh di css atau HTML YA KAK?

    Reply