2 Membuat Floating Image Scroll Top And Down Page

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

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

<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


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

2 komentar :

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!