News Update :

Rabu, 13 Februari 2013

Cara Membuat Floating Image Scroll Top And Down Page

Print Friendly and PDF
Membuat Floating Image Scroll Top And Down PageTutorial kali ini kita akan belajar Membuat Floating Image Scroll Top And Down Page dengan bantuan penambahan script dan frame work javascript dari JQuery. Sehingga ketika tombol link perintah itu diklik maka pergerakan keatas dan kebawahnya akan lebih aktraktif dan menarik. Untuk mencobanya, silahkan klik tombol love perintah keatas dan kebawah yang berada pada pojok kanan bawah dari blog ini!
Bagaimana? Tertarik untuk mencoba membuat tombol perintah dan ke atas page blog anda? Silahkan ikuti langkah-langkah berikut:
  • Setelah login ke akun anda, dari halaman dasbor blogger anda klik template-edit HTML.
  • Kopikan kode berikut dan letakkan diatas ]]></b:skin>:
#floating-atas-bawah {
position:fixed; _position:absolute; vertical-align:bottom; width:30px; bottom:5px; right:5px; clip:inherit; z-index:+1000;
}
    Note: Atur ukuran yang berwarna merah sesuai keinginan anda!
  • Setelah itu kopikan kode berikut dan letakkan dibawah ]]></b:skin>
<script src='http://tipstrikblogging.googlecode.com/files/jquery151.js' type='text/javascript'/>
<script src='http://tipstrikblogging.googlecode.com/files/scrolltopdown.js' type='text/javascript'/>
  • Selanjutnya kopi kode HTML berikut dan letakkan dibawah </head>:

Note:
  • Untuk perintah keatas harus sesuai dengan kode CSS template anda, Untuk kode atas template anda, apakah menggunakan top, head, header atau header-wrapper. Demikian juga perintah kebawah harus sesuai dengan kode bawah pada template anda, apakah footer atau bottom".
  • Jika anda menginginkan alamat tombol atau gambar panah yang lain silahkan ganti alamat gambar dengan tombol gambar-gambar yang anda sukai!
Demikian tutorial Membuat Floating Image Scroll Top And Down Page kali ini. Selamat mencoba dan semoga bermafaat!
Comments
0 Comments

Tidak ada komentar:

Posting Komentar

 

© Copyright The Tutorial Blogger 2013 -2014 | Design by Onedra | Published by Templates | Powered by Blogger.com.

Pesan Admin :Selamat Datang Bro ≧◉◡◉≦ <div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div><div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div>