Tombol link scroll back to top yang diperuntukan membuat ke atas halaman memang sering kita jumpai. Lebih gaya lagi membuat scroll to top and bottom alias keatas bisa kebawah juga oke ;)) Sebenarnya membikin link back to top dengan menggunakan HTML juga bisa loh! Sobat tinggal mensisipkan unique id kedalam syntax link di template kalian masing² yang mengarah/kedudukannya paling atas!
Biasanya pada template format blogger, posisi teratas dihuni oleh bagian header. Untuk unik id biasanya memakai header-wrapper, outer-wrapper, main-wrapper dan banyak lagi. Sehingga penulisan syntax link back to top menjadi seperti berikut
Itu kode syntax bentuk dasarnya sob. Tanpa perlu lagi memasang embel² unique-id ;) Urusan gaya, mari kita bubuhkan sedikit CSS coded agar lebih cuamik apik. Pilih saja opsi pemasangan paling cepat Add a Gadget ► HTML/JavaScript :D
Happy back to top \m/
Biasanya pada template format blogger, posisi teratas dihuni oleh bagian header. Untuk unik id biasanya memakai header-wrapper, outer-wrapper, main-wrapper dan banyak lagi. Sehingga penulisan syntax link back to top menjadi seperti berikut
<a href='#' id='UNIQUE-ID'>Back to top</a>Dengan bentuk HTML sederhana begitu saja kita sudah bisa memiliki link kembali ka atas :DNo Uniq No Gaya, No Gaya No Full Stylish maka Beben Koben si bloglang anu ganteng kalem tea akan berbagi kembali cara make link back to top full stylish :D Simple tapi styler sob :)) Uniknya lagi tanpa diklik, hanya di arahkan saja sudah kembali ke atas versi sekarang mah b-) :-bd
Default Syntax Link
<a href='#' onmouseover='window.location=this.href' title='back to top'>Back To Top</a>Itu kode syntax bentuk dasarnya sob. Tanpa perlu lagi memasang embel² unique-id ;) Urusan gaya, mari kita bubuhkan sedikit CSS coded agar lebih cuamik apik. Pilih saja opsi pemasangan paling cepat Add a Gadget ► HTML/JavaScript :D
Back Top Posisi Kiri Pojok Bawah
<div style='background: #EEE;border: 1px solid #CCC;position: fixed;bottom: 0px;left: 0px;padding: 5px;-moz-border-radius: 0px 5px 0 0;-webkit-border-radius: 0px 5px 0 0;border-radius: 0px 5px 0 0'><a href='#' onmouseover='window.location=this.href' title='go top'>TOP ▲</a></div>Back Top Posisi Kanan Pojok Bawah
<div style='background: #EEE;border: 1px solid #CCC;position: fixed;bottom: 0px;right: 0px;padding: 5px;-moz-border-radius: 5px 0 0 0;-webkit-border-radius: 5px 0 0 0;border-radius: 5px 0 0 0'><a href='#' onmouseover='window.location=this.href' title='go top'>▲ TOP</a></div>Semoga bermanfaat :)Happy back to top \m/
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...