Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun

Selamat siang semua, kali ini saya mau berbagi trik nih memasang tombol kembali ke atas dan kembali turun di bloger.
Ook dari pada ke banyakan basa-basi mending langsung aja nih triknya Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun berikut ini.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template kalian, sebagai asuransi tamplate kalian...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, kalian hanya perlu menambahkan kode berikut sebelum kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjfCgLIkrVwTTqRRIul_vPz9UXo3UsnP3ed737_idFX24l-3cW7HCq1phnjGBPEBfnO4ypMV3rr8u6wot4zF5mISC92LALrwHET_QD4HufoGtwJRVuuahMC_Yybo_wbPS8o-6ru-NtXJc/s1600/Untitled-2.png'/></a>

Untuk penjelasannya, kalian login dulu ke blogger kalian lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>

<!-- Bact to top By Ozan Hacker -->

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjfCgLIkrVwTTqRRIul_vPz9UXo3UsnP3ed737_idFX24l-3cW7HCq1phnjGBPEBfnO4ypMV3rr8u6wot4zF5mISC92LALrwHET_QD4HufoGtwJRVuuahMC_Yybo_wbPS8o-6ru-NtXJc/s1600/Untitled-2.png'/></a>

5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

• Kode warna kuning adalah posisi tombol berada
• Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar kalian bila ingin menyesuaikan  gambarnya dengan selera anda)

Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika kalian ingin yang lebih komplit, kalian bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang kalian harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1.      Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

2.      Kemudian sisipkan kode berikut ini setelah atau dibawah kode </body>

    <div id='Enjoy'>
    <a href='#' onClick='window.location.reload()' title='Reload page'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
    <a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
    <a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
    <a href='#footbar' title='Ke bawah halaman'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
    </div>

3.      Lalu simpan tamplate kalian, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar kalian ganti dengan #footer atau #copyright sesuaikan dengan HTML template kalian.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog kalian).