earth

Guestbook

/* Iklan google ads */
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://sites.google.com/site/ruangsc/enes/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='http://sites.google.com/site/ruangsc/imgsb/scrolltop.png'/></a>
    <a href='#footer' title='Ke Bawah'><img border="0" alt='down' src='http://sites.google.com/site/ruangsc/imgsb/scrolldown.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

    Terimakasih sudah membaca artikel SC Community's Blog

    13 komentar

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

    9 Juni 2011 21.48  

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

    terima kasih infonya Mas

    10 Juni 2011 11.00  

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

    10 Juni 2011 19.11  

    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 19.52  

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

    12 Juni 2011 20.36  

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

    12 Juni 2011 23.27  

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

    23 Juli 2011 06.40  

    ..makasih gan wat tips ent tricknya ..

    13 Agustus 2011 16.25  

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

    11 Agustus 2012 15.43  

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

    29 Februari 2016 11.07  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler