Followers

CARA MEMASANG BACK TO TOP

Posted by irga pasoepati under


Tentu Anda sudah tahu dan tidak asing lagi kan dengan fungsi kegunaan dari rangkaian kode tersebut? Ya, bahwasanya rangkaian kode tersebut dapat digunakan untuk membuat link atau tautan yang fungsinya apabila diklik maka akan mengembalikan kita ke halaman bagian paling atas setelah sebelumnya kita membaca artikel dalam sebuah situs web atau blog, sedangkan saat itu kita sudah berada pada posisi tertentu (misalnya berada di tengah halaman atau di halaman paling bawah). Namun tahukah Anda bahwasanya kode tersebut tidak dapat berfungsi secara

optimal apabila diterapkan dalam template untuk halaman situs web atau blog versi seluler.

Penggunaan kode tersebut untuk membuat tautan ‘Kembali ke Atas’ atau ‘’Back to Top" pada situs web dan blog versi seluler tidak berjalan secara optimal karena ketika tautan diklik maka halaman akan ditayangkan ulang baru kemudian kita akan diarahkan pada halaman bagian paling atas. Ini sangat berbeda dengan apabila kode tersebut diterapkan pada situs web atau blog untuk versi tampilan web, yang akan langsung mengarahkan kita ke halaman bagian atas tanpa terjadi penayangan ulang halaman ketika tautan tersebut diklik. Sehingga akhirnya apabila kode tersebut diterapkan pada halaman versi seluler, maka yang didapatkan bukanlah kemudahan, karena kita tidak langsung diarahkan ke halaman bagian atas seperti halnya ketika kita membuka halaman yang dimaksud dengan menggunakan browser komputer.

Lantas bagaimana caranya agar tautan ‘Back to Top’ pada halaman versi seluler dapat langsung mengarahkan kita ke halaman bagian paling atas ketika tautan tersebut diklik? Agar tautan ‘Back to Top’ untuk halaman versi seluler dapat berfungsi sesuai dengan yang diharapkan, maka Anda dapat menggunakan teknik di bawah ini.

*Untuk Tampilan Sederhana Back To Top dalam blog saya,bisa anda lihat
  • Caranya :
  • Login ke dasbor blog anda
  • Pilih rancangan
  • Pilih Tambah Gadget
  • Pilih Html/Java Script
  • Lalu copy kode Html animasi yang anda ingin pasang di blog. Kodenya ada di bawah, anda bisa memilih sesuai keinginan anda.
  • Pastekan kode tadi di Html/java script tadi.
  • Simpan, dan selesai
<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://3.bp.blogspot.com/-tIcrAJXd0SQ/TbbzlODegZI/AAAAAAAAAeo/JFTR2FkHHTw/s1600/Untitled-2.png'/></a>



*Untuk Tampilan Kedua :
Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

  •  Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.


#Enjoy{display:scroll;position:fixed;bottom:1px;right: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}



  • Kemudian sisipkan kode berikut ini setelah atau dibawah kode <body>

 <div id='Enjoy'>
<a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='
http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
<a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
<a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
<a href='#footbar' title='Ke bawah halaman'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
</div>

  • Lalu simpan tamplate anda, dan lihat hasilnya…

  • Keterangan:
=> Warna biru adalah gambar untuk tombol-tombolnya
=> Warna Merah adalah posisi tombol

.......... smoga bermanfaat

1 komentar:

On 15 November 2012 23.17 , irga pasoepati mengatakan...
Komentar ini telah dihapus oleh pengarang.
 

Ads 468x60px

Movie Category 5

Movie Category 4

Featured Posts

Social Icons

Recent Posts

Read more: http://tutorialblog45.blogspot.com/2012/08/cara-membuat-efek-berputar-mengikuti.html#ixzz2CH02mubb

Unordered List

Berita Luar Negeri

Download

Recent Post

Night Diamond Bloody Red - Precision Select
Diberdayakan oleh Blogger.

Translate

Google

Social Icons

Popular Posts

Search This Blog

Memuat...