Cara Membuat Tombol Back to Top, Down, Home, dan Refresh
Lihat DEMO1. 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
Berikut kodenya:
#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}
#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
Berikut kodenya:
<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>↺</b></span></a></button>
<button><a href='#top' title='Back to Top'><span style='font-size: large;'><b>⇧</b></span></a></button>
<button><a href='#footer' title='Page Down'><span style='font-size: large;'><b>⇩</b></span></a></button></div>
<button><a href='#' onclick='window.location.reload()' title='Reload Page'><span style='font-size: large;'><b>↺</b></span></a></button>
<button><a href='#top' title='Back to Top'><span style='font-size: large;'><b>⇧</b></span></a></button>
<button><a href='#footer' title='Page Down'><span style='font-size: large;'><b>⇩</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 yang berwarna orange 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>
<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>
Silakan coba Cara Membuat Tombol Back to Top, Down, Home, dan Refresh unik dan lihat hasilnya.