Cara Membuat Tombol Back To Top di Blog

Membuat Tombol Back To Top di Blog
gambar oleh contohblog.com


Cara Membuat Tombol Back To Top di Blog


Sobat yang ingin mempelajari seputar CSS, disini sekaligus saya akan bagikan Tutorial Cara membuat Tombol Back To Top yang Keren untuk Blog. Perlu di ketahui, saya belum mencoba cara ini di Template Blog yang lain, murninya sudah ada di blog ini.

Contohnya, silahkan sobat gulir artikel ini kebawah, kemudian dengan transisi Fade In, akan muncul tombol seperti gambar di pojok kanan bawah.

Mungkin sudah banyak yang membagikan informasi ini, tapi kebetulan niat saya hanya ingin membantu sobat menemukan masalah. Tak panjang lebar, kita langsung ke cara - cara nya Membuat Tombol Back To Top di Blog


1. Login ke akun Blogger milik sobat.
2. Klik Tema / Template di sidebar sebelah Kiri
3. Kemudian klik Edit HTML

Setelah berada di dalam Editor Template Blog sobat, letakkan CSS berikut di atas ]]></b:skin>
cari menggunakan CTRL + F

/* Back to top */
#back-to-top {
background:#1E90FF;
color:#ffffff;
padding:8px 10px;
font-size:24px;
border-radius: 22px;
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}


4. Kemudian letakkan Kode berikut ini di dalam tag pembungkus body atau di atas tag </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>

5. Kemudian Simpan Template. Selesai



Nah, itu tadi dia Cara Membuat Tombol Back To Top di Blog , untuk sedikit pemberitahuan, ini adalah Tombol Back To Top default versi Template Viomagz 3.1 , untuk sobat yang ingin menggunakan Template ini, silahkan langsung beli di Mas Sugeng Blog .

Gimana? sudah berhasil membuatnya?
Ingat sobat, pelajari mengapa bisa menjadi seperti itu. Jika ada yang mau di tanya, atau ada yang mau berlajar, silahkan Hubungi kami di Kontak atau silahkan tanyakan di Kolom Komentar.

Terimakasih.
Salam hangat dari kami, Tim RISMAX

Catatan :
  • Nama Penulis : Paris P. Sitanggang dan Tim
  • Tanggal Di Posting : Minggu, 27 Oktober 2019
  • Referensi : //www.google.com
  • Gambar : //www.contohblog.com

Kategori :
TUTORIAL BLOG

Belum ada Tanggapan untuk "Cara Membuat Tombol Back To Top di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel