Sudah tahu dengan Scroll Back To Top yang dapat memudahkan pengunjung blog / website tanpa harus mengscroll mouse pada sebuah halaman, cukup dengan Klik sekali saja, maka halaman yang berada di posisi bawah akan kembali keatas dengan sendirinya.
Seperti yang ada di bawah kanan blog saya saat ini, tombol tersebut akan muncul secara otomatis, apabila telah melewati batas tertentu pada halaman. Kalau tombol tersebut di Klik, maka dia akan kembali ke bagian atas halaman, tanpa harus susah-susah lagi mengscroll mouse. Simple, khan?
Jika kamu ingin memasangnya di blog, maka saya akan memberitahukan cara simplenya. Tidak perlu repot-repot untuk mengedit HTML dan CSS, cukup dengan memasukkan script ini, maka layanan Scroll Back To Top akan langsung terpasang di blog / website kamu.
Jika kamu ingin memasangnya di blog, maka saya akan memberitahukan cara simplenya. Tidak perlu repot-repot untuk mengedit HTML dan CSS, cukup dengan memasukkan script ini, maka layanan Scroll Back To Top akan langsung terpasang di blog / website kamu.
Saya sudah berkeliling mencari artikel yang simple ini, dan rata-rata artikel yang saya dapatkan, agak repot mengaplikasikannya ke blog, dan kurang sesuai dengan selera saya. Sampai dengan akhirnya, saya menemukan artikel dari salah seorang rekan blogger, yang menyajikan tutorial Scroll Back To Top simple dengan script jquery.
Okeh, tanpa berpanjang lebar lagi, kita tuntaskan artikel ini dengan mengikuti langkah-langkah jitu berikut ini (fasten your seat belt) (",)v :
1. Seperti biasa, Log in ke Blog kamu (Awas! Nyasar ke orang lain!)
2. Masuk ke Rancangan
3. Lalu tujukan target kamu ke Edit HTML
4. Kemudian seperti biasa Klik Expand Widget Templates
5. Cari kode <head>
Jangan lupa "Ctrl + F" biar gampang mencarinya
6. Kalau sudah ketemu, Copy script di bawah ini :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://raezen.fileave.com/scrolltop.js" type="text/javascript"></script>
7. Kemudian Paste dibawah kode <head>
8. Done!
Nah, ada yang model satu lagi nich. Tapi yang ini rada agresif gerakannya, langsung aja yach!
1. Cari kode </body>
Nah, ada yang model satu lagi nich. Tapi yang ini rada agresif gerakannya, langsung aja yach!
1. Cari kode </body>
Jangan lupa "Ctrl + F" biar gampang mencarinya
2. Kalau sudah ketemu, Copy script di bawah ini :
<!-- Back To Top By www.siradel.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png'/></a>
3. Kemudian Paste tepat diatas kode </body>
2. Kalau sudah ketemu, Copy script di bawah ini :
<!-- Back To Top By www.siradel.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png'/></a>
3. Kemudian Paste tepat diatas kode </body>
4. Warna yang Ungu merupakan alamat dari icon back to top, dan bisa kamu ganti sesuai dengan selera.
4. Done!
Lihat perbedaan yang ada di blog kamu sekarang, sambil berdoa yach jangan lupa.
GutLaK! (",)v
Sumber : rivan-aprian.blogspot.com, berbagai sumber lainnya
Editor : AdeL`FarouK
wew mantap bro, thanks lg daah
BalasHapus@azonic sama² broW.. smg bmanfaat.. ;)
BalasHapusbagus nieh bos... mau tanya nieh bos, mohon jawab segera ya, ada gak caranya supaya tombol muncul dibottom & center, kalo yang sekarang inikan munculnya di bottom right.. Tq bos.. jalan jalan ke blog q juga ya http://mas-kas.blogspot.com.
BalasHapusnewbie.. :d)
@Mas Kas cm cara ini yg gw dpt ilmunya boz.. cb aja diutak-atik htmlnya.. ;p
BalasHapusiya, segera mluncur kesana.. ;)
sir adel: tq bos atas kunjungannya...
BalasHapus@Mas Kas sama² boz.. t`kasih sdh bkunjung ;)
BalasHapus@SiR AdeL bisa tukaran link gak bos??
BalasHapus@Mas Kas ya bisalah boz.. masak gak bs sich ;)
BalasHapus@SiR AdeL sudah bos.. sudah aku masukan disini bos tolong dimasukan ke blog mu ya bos
BalasHapus@Mas Kas sudah aku cek.. gak ada tuch.. dmn ya ditaruhnya boz?
BalasHapus