Membuat Floating Image Scroll Top And Down Page

Tutorial 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>:

<div id='floating-atas-bawah'>
<a href='#header' title='Ke Atas'><img border="0" alt='top' src='https://sites.google.com/site/tipstrikblogging/amatullah/ScrollTop.png'/></a>
<a href='#footer' title='Ke Bawah'><img border="0" alt='down' src='https://sites.google.com/site/tipstrikblogging/amatullah/Scrolldown.pNG’/></a>
</div>

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!

Jika ingin membuat floating image atau gambar melayang pada blog silahkan lihat tutorialnya disini

• Tweet
• Share
• Share
• Share
• Share