CARA MEMBUAT IKON BACK TO TOP GAYA EDITBLOGTEMA

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.