Sabtu, 06 April 2013
Cara Membuat Tobol Back to Top, Down, Home, Refresh - Sahabat blogger pada postingan yang lalu bang dadan pernah membuat artikel tentang Cara Membuat Tombol Back to Top dengan JQuery, nah untuk kali ini bang dadan akan coba share artikel tentang Cara Membuat Tobol Back to Top, Down, Home, Refresh,
artikel ini sebenarnya mempunyai fungsi sama seperti pada postingan
sebelumnya, namun ada penambahan tiga link lagi yaitu page down, refresh
dan home. gambar dibawah ini adalah screen shoot nya.
Untuk DEMO nya sobat bisa lihat
pada bagian bawah blog ini. dan bagi sobat yang ingin memasang nya di
blog silahkan ikuti langkah - langkahnya berikut ini:
Cara Membuat Tombol Back to Top, Down, Home, dan Refresh
1. Login ke akun blogger2. 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='http://bangdadan.blogspot.com' 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..!!
Catatan:
Bagi sobat yang tidak ingin belajar dan tidak mau pusing, dan ingin
tombolnya sama persis kaya punya bang dadan, gampang aja sob, sobat
cukup ganti kode pada no.5 di atas dengan kode dibawah ini:
<div id='Enjoy'>
<a href='http://bangdadan.blogspot.com' 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='http://bangdadan.blogspot.com' 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>
Nah mungkin cukup sekian dulu pembahasan artikel tentang Cara Membuat Tombol Back to Top, Down, Home, dan Refresh. mudah - mudahan artikel ini bisa bermanfaat bagi sobat semua. Selamat mencoba dan succes selalu buat sahabat semua..!!
kalo biar menunya keluar waktu di klik kanan gimana?
BalasHapus