Help you by sincere

October 29, 2018

CARA MEMBUAT IKON BACK TO TOP GAYA EDITBLOGTEMA

6
Back to top kalau di terjamahkan secara leterlek dari bahasa Inggris ke Bahasa Indonesia adalah "Kembalikan keatas" ikon back to top akan muncul dibawah bagian kiri blog jika halaman blog di scroll kebawah, dan menghilang ketika halaman blog di scroll keatas kembali. Dia berguna sebagai navigasi cepat untuk kembali ke atas halaman blog.
Setiap template blogger premium memiliki back to top, dia menjadi salah satu ciri ciri premium atau tidaknya sebuah tema blogger. Jadi tidak ada ruginya memilikinya juga.

Kami memanfaatkan font dan ikon awsome, elemen yang sangat penting dalam HTML dalam mendesain tema blogger. Penerapannya ke dalam template blogger juga sangat mudah dan menggairahkan. Cobalah untuk anda sendiri.

Contoh 1 namanya chevron up:
kodenya:<i aria-hidden="true" class="fa fa-chevron-up fa-3x"></i>

Contoh 2 namanya Hand-pointer:
Kodenya:<i aria-hidden="true" class="fa fa-hand-pointer-o fa-3x"></i>

Contoh 3  namanya arrow-up:
Kodenya: <i aria-hidden="true" class="fa fa-arrow-up fa-3x"></i>

Contoh 4 namanya plane:
Kodenya: <i aria-hidden="true" class="fa fa-plane fa-3x"></i>

Contoh 5 namanya hand-paper-o:
Kodenya: <i aria-hidden="true" class="fa fa-hand-paper-o fa-3x"></i>

Dan masih banyak lagi.

Langkah pertama masuk ke pengaturan blogger.
  1. Pilih pengaturan
  2. Pilih Tema
  3. Pilih EditHTML
Cari kode </head>
kopi kode dibawah ini dan letakan di atas kode </head> tadi:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


Catatan: Jika di dalam template kode tersebut sudah terpasang pada blog anda, abaikan langkah diatas.

Langkah kedua kembali ke pengaturan blogger:
  1. Pilih Tataletak
  2. Pilih Tambahkan Gagdet
  3. Pilih Tambahkan HTML/JavaScript
Maka akan muncul kotak HTML kosong dan lalu pastekan saja kode HTML di bawah ini ke dalamnya:

<!--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">

<i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i>

<!--Smooth Back to Top Button End--></a>

Tapi perhatikan kode yang saya sorot warna orange muda? Nah kode itu dapat anda ganti dengan kode fa fa awsome, dari 5 contoh yang kami berikan di atas. Caranya hapus saja kode tersebut, lalu ganti dengan kode salah satu 5 contoh diatas dengan cara mengkopi dan mem-paste-kannya dan jika mengkopi ikuti batas warna, atau yang anda kopi hanya kode di dalam batas warna yang telah saya sorot dengan warna warna diatas.

6 comments:

  1. Dengan tombol ini kita menghemat tenaga scroll ke atas

    ReplyDelete
    Replies
    1. Hahaha..masak harus pakai tenaga nyata. . Ya benar sebagai navigasi mempercepat kembali pulang.

      Delete
  2. Kalo gini bacanya harus pelan2 mas, kodenya rumit sih hihihi

    ReplyDelete
    Replies
    1. tinggal kopi paste coba saja pasti bisa

      Delete
  3. Dikasih gituan biar cepat naik ke atasnya ya sob... tp kalo misalkan pengen ke bagian bawah lagi biar cpt, ada caranya gak tuh?

    ReplyDelete
    Replies
    1. bikin kode kebalikannya Sains Box pasti mengerti :)

      Delete

Follow