menu melayang

Selasa, 05 Juli 2022

Cara Memasang Tombol Back To Top Rensponsive Keren dan Ringan



Bagi kamu yang ingin ada tombol back to top ini sangat berguna dalam meningkatkan Kenyamanan Pengunjung blog anda dan mengurangi Bounce Rate anda

Walaupun tombol ini cukup sederhana, tetapi menurut Saya terasa sangat menarik dan minimalis. 

Tombol ini nantinya akan muncul di pojok bawah kanan blog Anda. 

Oke! Langsung saja kita menuju tutorial 


Cara Memasang Tombol Back To Top Rensponsive Keren


1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>


/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}

2. Setelah itu tambahkan kode di bawah ini tepat sebelum kode </body>


<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>

3. Terakhir simpan template dan lihat hasilnya.




Cara Memasang Tombol Back To Top Rensponsive Ringan :



Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.



Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.


Berikut cara pemasangannya :

1. Login ke Blogger Dashboard > pilih blog > pilih Template > kemudian klik Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.


2. Simpan CSS di bawah ini sebelum ]]></b:skin> atau </style>


.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}


3. Simpan jQuery dan HTML di bawah ini sebelum </body>

<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

$(document).on( 'scroll', function(){

if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});

$('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>


4. Setelah itu simpan template dan lihat hasilnya.



Dengan tambahan efek bounce

<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

$(document).on( 'scroll', function(){

if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});

$('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>


Untuk setingan warna dan lainnya bisa anda edit kembali sesuai selera, sekian dari saya. Selamat pagi dan semoga bermanfaat.


Terima kasih





template powerpoint,link download powerpoint,template powerpoint gratis,bahan presentasi gratis,template powerpoint mahasiswa gratis,free template powerpoint,kumpulan Presentasi Powerpoint free Download. Template Ucapan Idul Fitri, Template Ucapan Hut RI, Template Undangan Pengajian, Template Powerpoint Presentasi

Blog Post

Related Post

Back to Top


Cari Artikel

tag

Jasa video animasi Arsitektur & Desain, Jasa video animasi Buku Bangunan, Jasa video animasi Buku Codes & Standars, Jasa video animasi Buku Dekorasi & Ornamen, Jasa video animasi Buku Desain Dapur, Jasa video animasi Buku Desain Kamar, Jasa video animasi Buku Desain Ruang Keluarga, Jasa video animasi Buku Desain Ruang Tamu, Jasa video animasi Buku Desain Rumah, Jasa video animasi Buku Interior & Eksterior, Jasa video animasi Buku Metode, Jasa video animasi Buku Taman, Jasa video animasi Material Bangunan, Jasa video animasi Buku Hukum, Jasa video animasi Buku Gender & Hukum, Jasa video animasi Buku Hukum Dagang, Jasa video animasi Buku Hukum Perdata, Jasa video animasi Buku Hukum Internasional, Jasa video animasi Buku Hukum Pidana, Jasa video animasi Buku Kemanusiaan, Jasa video animasi Buku Politik & Hukum, Jasa video animasi Kumpulan Peraturan Perundang-Undangan, Jasa video animasi UUD 1945, Jasa video animasi Buku Import, Jasa video animasi Agriculture Book Import, Jasa video animasi Art & Novel Import, Jasa video animasi Child & Teenager Book Import, Jasa video animasi Computer Book Import,