05 Juni 2009

jQuery Scroll to Top Control

Hari ini, Jum'at 05 Juni 2009 secara serentak saya posting artikel tentang jQuery Scroll to Top Control di beberapa blog saya, termasuk menginstallnya. Setelah saya mempelajari dari situs www.dynamicdrive.com lalu menerapkan ke blog saya, pada awalnya gagal. Namun setelah saya cermati dari beberapa kode script yang ada kemudian menghilangkan sederetan kodenya, lalu memasang URL dari Image di dalam srolltopcontrol.js filenya kemudian mengupload file jsnya ke www.geocities.com dan yang terakhir masuk pada edit html blogger dan akhirnya......

Anda bisa mendemokannya sendiri di halaman blog IRENG ini yang bernasip malang karena digebug-ki oleh EG ( untung LW masih peduli sama blog ini sehingga masih dapat job..he..he.. , tapi untuk BV, nampaknya... ngeres kali), coba perhatikan saat anda scroll halaman setelah mencapai separuh dari halaman ini maka akan muncul ICON ANAK PANAH ATAS. Nah, silahkan diklik.. maka halaman akan menggulir ke atas secara automatis.... berjalan seperti ARGO ANGGREK jurusan Sidoarjo- BATAM- KALIMANTAN...... (Apa ada, ya..... jurusan kesana).

Dengan memasang kode script jQuery Scroll to Top Control khusus pada blog ini, terpaksa saya harus merubah susunan html dari CREDIT fixed yang ada di bottom bidikCOM ini. Dari padding yang semula 15 px, terpaksa saya geser jadi 60 px sekedar untuk memberikan kelonggaran bagi icon jQuery Scroll to Top Control untuk mampir dan nongol batang hidungnya agar bisa unjuk gigi yang kemudian akan diklik oleh pengunjung setia bidikCOM.

Oke, ndak usah lama-lama kita bahas secara singkat. Bila ingin melihat gambaran yang lebih lengkap anda bisa ABSEN HADIR di AYOMAOS.

Silahkan login di blogger, tanpa contreng kotak Expand Widget Template ( karena bidikCOM memang tidak punya hak pilih), lalu cari kode : <head>.

Langkah selanjutnya dalam menambahkan script dari jQuery Scroll to Top Control adalah tambahkan kode dibawah ini persis dibawah kode <head> dan sebelum kode META.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

<script type='text/javascript' src='http://www.geocities.com/nataludin5/scrolltopcontrol-1.js'>

/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>

Oh,ya... mengapa harus dipasang persis dibawah kode <head> dan sebelum kode meta ( Verifikasi, keyword dll )? Hali ini agar jQuery Scroll to Top Control berfungsi dengan normal, dan ICONnya bisa ngintip kegiatan t-mouse para pengunjung kali..he..he..

Ini lho gambaran tempat jQuery Scroll to Top Control dipasang.



( sorry... gambarnya aku kasih tulisan bidikCOM yang gede, soalnya beberapa artikel saya di COPAS oleh salah satu blogger yang sempat nyasar di bidikCOM sampai akar-akarnya tanpa sungkan-sungkan dan tidak ada embel-embel url sumbernya..heik.. rasain luh... ojo nesu!!! )

Oke silahkan dicoba, anda juga bisa belajar di http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm, kalau anda ingin memodifikasi dari script jQuery Scroll to Top Control pada srolltopcontrol.js filenya. Daku sudah mumet, jadi gantian anda yang memodifikasi. Yang penting saya sudah ngasih tutorial yang terbaik buat sobat setia bidikCOM untuk mempercantik blognya..... gratis... cukup do'in panjang umur sehat wal'afiat ..amien.

6 komentar:

  1. Postingannya sering di kopas yach? Berarti dia ngefans tuh mas sama panjenengan he..he..

    BalasHapus
  2. mantab... nambah satu lagi ilmu baru negh..

    BalasHapus
  3. sore2 enaknya nyantai di depan rumah, dan di temanni segelas kopi hangat, sepiring gorengan, and laptop sambil ngblog ria!, and lebih enak nya lagi berkunjung ke blog saya! key cuy!!!
    ditunggu kunjungan and komen nya!

    BalasHapus
  4. wah kang tambah keren aja nih......oke buanget. aku ijin ikut mencobanya yah. tahnks kang

    BalasHapus
  5. bagus bos, makasih ya, and mo tak coba
    health love money and family

    BalasHapus
  6. artikel di copas ya. :D
    di ikhlasin aja mas, namanya kan emang share ilmu. seharusnya seneng kalo dishare lagi :)

    tapi tetep harus ngehormatin yang nemuin :D
    back to top jquery ini keren, wa juga pake jadi berasa wp :D

    mari bikin blogger lebih bermakna. *halah

    BalasHapus

Mockup Hijab Adobe Photoshop Tutorial - FREE FILE PSD

  Mockup Hijab Adobe Photoshop adalah tutorial tentang bagaimana cara merubah warna hijab maupun coraknya. Jika anda ingin mendownload file ...