Membuat Tombol Back to Top, Down, Home, dan Refresh | CATATAN SAIF - Tutorial Blogger

Membuat Tombol Back to Top, Down, Home, dan Refresh

Cara Mudah Membuat Tombol Back to Top, Down, Home, dan Refresh unik.
Scroll Otomatis keatas dan kebawah dapat memudahkan pengunjung untuk melihat kesuluruhan isi halaman. Makanya penting juga, Kebanyakan template kususnya template bawaan pastilah belum ada, jika sobat memakai template yang memang belum ada bisa pakai tutorial ini, ga di jamin sih karena belum saya terapkan sendiri,tapi tak ada salahnya mencoba dan mudah2an berhasil.


Berikut tutorialnya..

1. Login ke akun blogger
2. Menuju dasbor/rancangan
3. Pilih Template dan Klik Edit HTML
4. Cari kode ]]></b:skin>  dan copy kode dibawah ini tepat diatasnya

#Enjoy{display:scroll;position:fixed;bottom:1px;leftt: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}
5. Kemudian cari kode <body> dan tempatkan kode berikut tepat diatasnya
<div id='Enjoy'><button><a href='URL Blog kamu' title='Beranda'><span style='font-size: large;'><b>Ω</b></span></a></button>
<button><a href='#' onclick='window.location.reload()' title='Reload Page'><span style='font-size: large;'><b>&#8634;</b></span></a></button>
<button><a href='#top' title='Back to Top'><span style='font-size: large;'><b>&#8679;</b></span></a></button>
<button><a href='#footer' title='Page Down'><span style='font-size: large;'><b>&#8681;</b></span></a></button></div>
Keterangan:
Ganti URL yang berwarna merah dengan URL Blog sobat

6. Selanjutnya klik simpan template
Selesai dech..!!

Tambahan:
Bila sobat ingin mengganti buton-buton tersebut dengan gambar, silahkan sobat ganti kode nomer 5 dengan kode dibawah ini:

<img src='URL Gambar'/>

Silahkan sobat ganti tulisan yang berwarna merah dengan URL Gambar sesuai keinginan sobat..!!

Atau langsung aja coba gambar berikut ini:
<div id='Enjoy'>
<a href='URL Blog kamu' title='Beranda'><img src='https://lh4.googleusercontent.com/-NLRRkrf1Xjg/UOcXcopujMI/AAAAAAAABKw/udtVFEWd3PA/w497-h373/black-windows.png'/></a>
<a href='#' onclick='window.location.reload()' title='Reload Page'><img src='https://lh4.googleusercontent.com/-WGNwP0p-4eM/UOcX6kFiBTI/AAAAAAAABLM/zKCXBXK59QY/w497-h373/repeat.png'/></a>
<a href='#top' title='Back to Top'><img src='https://lh4.googleusercontent.com/-VSMRm-IZGzU/UOcUjxXZIkI/AAAAAAAABJ8/U0Uv5yumzu0/w78-h78/next00.png'/></a>
<a href='#footer' title='Page Down'><img src='https://lh6.googleusercontent.com/-la1BjEMLTwY/UOcUjwVn5VI/AAAAAAAABJ4/HnXjFTOIzd4/w78-h78/next0.png'/></a>
</div>

Kode Orange adalah Url gambar.
Silakan coba Cara Membuat Tombol Back to Top, Down, Home, dan Refresh unik. Semoga bermanfaat..
src:blogbloggertrick.blogspot.com

Silahkan tinggalkan Kritik dan Saran Sobat dibawah sini :
Gunakan Akun openID / Google+ / Blogger agar ada pemberitahuan untuk catatansaif. Boleh Copas asal ada sumbernya ya.. untuk sedikit hargai kerja keras orang lain aja..
Centang "Notify Me" agar ada pemberitahuan balasan dari saya.
Mulai 2016 Komentar dengan menyertakan Link Aktiv / No Aktiv akan dihapus, jadi gunakan openID saja.