earth
/* Iklan google ads */
Browse » » » Membuat Perintah Ke Atas - Ke Bawah Halaman Blog Dengan JQuery

Membuat Perintah Ke Atas - Ke Bawah Halaman Blog Dengan JQuery

Ditulis oleh Kang eNeS Kamis, 09 Juni 2011. 19.03
Kategori: comments (13)
Masih ingat dengan artikel Membuat Floating Image Untuk Perintah Ke Atas - Ke bawah Halaman Blog? Nah, kali inipun bahasannya masih seputar perintah itu, bahkan CSS yang digunakanpun hampir sama. Hanya saja terdapat penambahan script dan framework javascript dari jQuery sehingga ketika link perintah itu diklik maka pergerakan ke atas atau ke bawahnya akan terlihat atraktif dan menarik. Gak percaya? Coba saja kamu klik gambar panah ke atas - ke bawah yang terletak di pojok kanan bawah.

Gimana, tertarik? Lalu bagaimana jika sudah menggunakan framework mootools, apa masih bisa berfungsi? Tenang saja sob, script-nya sudah dibuat bersahabat dengan mootools, soalnya title slider blog saya juga pake dukungan mootools, hehehe...

Langkah-langkah yang harus kamu ambil untuk membuat perintah ke atas dan ke bawah ini adalah:
  • Dari halaman Dasbor Blogger kamu, pilih Rancangan - Edit HTML.
  • Kopikan kode CSS berikut dan letakkan di atas ]]></b:skin>: 
    #floating-atas-bawah {
position:fixed; _position:absolute; vertical-align:bottom; width:30px; bottom:5px; right:5px; clip:inherit; z-index:+1000;
}
    Atur ukuran yang berwarna merah sesuai keinginan.
  • Setelah itu kopikan script berikut dan letakkan di bawah ]]></b:skin> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/>
<script src='https://github.com/kang-enes/BlogScript/blob/main/scrolltopdown.js' type='text/javascript'/>
    Bagi yang sudah menggunakan mootools, letakkan script tersebut di bawah script mootools.
  • Selanjutnya kopi kode HTML berikut dan letakkan di bawah </head>: 
    <div id='floating-atas-bawah'>
<a href='#header' title='Ke Atas'><img border="0" alt='top' src='https://images2.imgbox.com/95/75/z0GnGsZb_o.png'/></a>
<a href='#footer' title='Ke Bawah'><img border="0" alt='down' src='https://images2.imgbox.com/a4/0a/W57pIxVX_o.png'/></a>
</div>
    Catatan:
  • Untuk perintah ke atas harus sesuai dengan CSS untuk "kode atas" template kamu, apakah menggunakan top, head, header, atau header-wrapper. Demikian juga perintah ke bawah harus sesuai dengan "kode bawah" pada template kamu, apakah footer atau bottom.
  • Jika kamu menginginkan gambar panah yang lain, ubah alamat source image (src) dengan alamat gambar-gambar yang kamu suka. Tinggal klik gambarnya, lalu kopikan URL-nya.
  • Simpanlah hasil kerjaan kamu dan ucapkan Alhamdulillah...

Segitu aja, sob. Semoga bermanfaat dan selamat mencoba...

    • Artikel Terkait Dengan CSS dan Javascript

    13 comments
    Posting Komentar

    Balas
    1
    reni mengatakan...

    ilmunya gak pernah habis nih kayaknya.. :) salut deh..!

    9 Juni 2011 pukul 21.48  
    Balas
    2
    Elsa mengatakan...

    ooooo
    stelah lihat gambarnya, baru ngerti perintah ke atas ke bawah kayak apa
    hehhe

    terima kasih infonya Mas

    10 Juni 2011 pukul 11.00  
    Balas
    3
    Pasti Robbianto mengatakan...

    Hayang oge make nu kitu kang. Katempona alus, ngageleser...

    10 Juni 2011 pukul 19.11  
    Balas
    4
    Anonim

    Terima kasih kepada kang enes yg senantiasa memberikan pencerah desain blog pada kami yg nubi ini, heheh
    Makasih juga atas koreksi linknya :))
    *senengnya dapet backlink dr blog ber PR 4*
    Tp sayang ah, di status komentar form URL nya didisable :(

    10 Juni 2011 pukul 19.52  
    Balas
    5
    Unknown mengatakan...

    terima kasih atas ilmunya kang.... maju terus pantang mundur,,, gegeleseran ayeuna mah

    12 Juni 2011 pukul 20.36  
    Balas
    6
    Keng eNeS mengatakan...

    @Reni:
    Biasa mbak, banyak belajar dgn try n error, hehehe...
    @Elsa:
    Si ibu yang cantik ini bisa aja, hehehe...
    @Pasti:
    Nyieun atuh...
    @Insan:
    Tong sok kitu ah kang, sok era paradah. URL sengaja didisable supaya ulah aya "jurig anoname
    @Herwan:
    Hapus atuh hiji gambar keluhur-kahandapna supaya teu double

    12 Juni 2011 pukul 21.33  
    Balas
    7
    Unknown mengatakan...

    Artikelmu bagus juga,
    silahkan berkunjung di blog saya @
    Get A New Articles
    makasih...^^

    12 Juni 2011 pukul 23.27  
    Balas
    9
    Ummu Nailah mengatakan...

    Terim kasih mas.Banyak ilmu disini dan langsung disedot.
    Terima kasih dan alhamdulillah berhasil.
    Lanjutkan berbagi ilmunya mas...

    23 Juli 2011 pukul 06.40  
    Balas
    10
    CompactibleNewCoreografJOKER- mengatakan...

    ..makasih gan wat tips ent tricknya ..

    13 Agustus 2011 pukul 16.25  
    Balas
    11
    Unknown mengatakan...

    Aduh .. gagal kang untuk top downnya #footer /#bottom gak ada yang bisa

    11 Agustus 2012 pukul 15.43  
    Balas
    12
    Keng eNeS mengatakan...

    @Andreas:
    Coba baca catatan paling akhir. Mungkin CSS untuk kode header dan footernya berbeda. Bisa saja kodenya header-outer dan footer-outer, tergantung template sobat. Jadi penulisannya pun disesuaikan dengan kode header dan footernya, spt ini: #kode-header dan #kode-footer

    11 Agustus 2012 pukul 23.28  
    Balas
    13
    Unknown mengatakan...

    ilmu yg bermanfaat hehehe. ditunggu juga kunjungannya di www.smartkiosku.com

    29 Februari 2016 pukul 11.07  

    Tambahkan Komentar

    Langganan: Posting Komentar (Atom)