
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.
boleh juga ni untuk dipasang di blog agar memudahkan pengunjung kita
BalasHapustrims ilmunya
gan kalo mau di pindah ke sebelah kanan giman ya ane udah pasang tapi ada di sebelah kiri
BalasHapusTerimakasih banyak mas, sangat membantu sekali artiklnya... keep posting mas..
BalasHapus