Promote Your Web Here

Get paid To Promote at any Location

18 May 2009

Membuat Text dan Gambar "CRAWLER"

Text atau Gambar "CRAWLER" merupakan sebuah text / gambar yang dapat bergeser kedepan (ke kiri) maupun berbalik kembali ke belakang (ke kanan) apabila posisi "mouse" digeserkan ke arah yang berlawanan.

Isi dari kontent "CRAWLER" merupakan halaman pengkodean HTML biasa. Yang menggunakan beragam konten "Marquee", "CRAWLER" merupakan konten lebih mudah dengan menggunakan event tanpa "Onload". "CRAWLER" sangat mudah dan dapat dipadukan dengan berbagai macam script. Silahkan lihat Contoh dibawah

Membuat text crawler, perlu kehati-hatian yang sangat harap perhatikan semua perintah dalam membuatnya,jangan sampai anda melewatkan salah satu cara dan aturan dalam membuatnya.







Cara membuat Text / Gambar "CRAWLER" :
1. Download Crawler.js, setelah di download kemudian upload file Crawler.js tersebut kedalam direktori penyimpanan file sobat (ex : www.geocities.com).

2. Masuk ke blogger sobat kemudian ke Tab "TATA LETAK/LAYOUT" ==> "EDIT HTML" ==> tandai kotak kecil pada tulisan "Expand Template Widget". Jangan lupa untuk selalu Backup template sobat dengan klik tulisan yang berbunyi "Download Full Templates"

3. Cari Kode <head> kemudian tempatkan kode dibawah tepat dibawah kode <head>.
<script type="text/javascript" src="http://www.geocities.com/ciao.indo/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
ganti kode yang berwarna Biru dengan Alamat direktori penyimpanan file Crawler.js sobat.

4. "simpan Template" sobat.

Cara menuliskan kode Sript pada Halaman Blog Sobat :

Pada contoh diatas saya menggunakan cara (text crawler) sebagai berikut :
<div class="marquee" id="mycrawler">
Membuat text crawler, perlu kehati-hatian yang sangat harap perhatikan semua perintah dalam membuatnya,jangan sampai anda melewatkan salah satu cara dan aturan dalam membuatnya.
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'blue',
'border': '1px solid #2EFE2E'
},
inc: 6, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>

Penjelasan :
- Pada text warna Biru merupakan Text yang akan ditampilkan.

- Pada Text :
'padding': '5px', = Tinggi Kotak
'width': '450px', = Lebar/Panjang kotak
'background': 'blue', = warna Background Kotak
'border': '1px solid #2EFE2E' = Warna Border Kotak

- Pada Text warna Pink merupakan kecepatan gerakan text.

- Pada Text "mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)" merupakan penggunaan Mouse untuk jeda, default untuk "pause" yaitu false. Penggunaan False disini agar Marquee tidak sangat berpengaruh.

Pada contoh diatas saya menggunakan cara (Image/Gambar crawler) sebagai berikut :
<div class="marquee" id="mycrawler2">
<img src="http://i40.tinypic.com/9tlic8.jpg" /> <img src="http://i43.tinypic.com/1zbqs5t.jpg" /> <img src="http://i44.tinypic.com/2419ul3.jpg" /> <img src="http://i43.tinypic.com/296nh3r.jpg" /> <img src="http://i40.tinypic.com/mk7ki.jpg" />
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true
});
</script>

Penjelasan :
- Text warna Merah merupakan dimana sobat menaruh gambar yang akan ditampilkan sobat (URL gambar)

- Penjelasan Lain sama

- pada Text :
** moveatleast: 2, = merupakan Kecepatan minimum untuk Kursor drives (default tidak bergerak onmouseout)
** neutral: 150, = Ini adalah ukuran area di bagian tengah tenda besar di mana hovering akan menghentikannya. (default ke 16)
** savedirection: true = merupakan pengatur arah jika mouse di pindahkan, Gambar/text akan berjalan mundur (defaulnya menggunakan "false")

Semoga dapat bermanfaat broo....selamat mencoba

Bahan referensi dari : www.dynamicdrive.com

Comments :

17 comments to “Membuat Text dan Gambar "CRAWLER"”

adi said...
on 

bagus ni artikelnua...

salutee,,..
follow aku please....
nti aku follow balik..

:)

alfi said...
on 

artikel nya bgus banget
tukeran link yuk

rajalampu.blogspot.com said...
on 

nih dari indoster.blogspot.com
cara bikin menu tab nya gimana bosss..

roomen said...
on 

wah keren niy bos postinganya,,,
bermanfaat bgt bagi roomen... thanks ya

eRGe said...
on 

wuih ... mantab nih tutorial nya ... perlu dicoba .. mohon izin brot ...

keep postin n sukses slalu .... salam

wahyoe said...
on 

mas kalo buat yang SHOW HIDE gimana yach???
minta pencerahannya :D

Unknown said...
on 

upload filenya.js nya ke mana yah mas?
pliss send to email : gendimanik@gmail.com

syahril said...
on 

masih bingung nih ...

Anonymous said...
on 

dating rich men http://loveepicentre.com/ private dating services in toronto

Anonymous said...
on 

frederik pohl ebook let lt s http://audiobookscollection.co.uk/es/Educaci-n/c1163/ ebook compare [url=http://audiobookscollection.co.uk/fr/The-Exact-Mind-An-Artist-With-Asperger-Syndrome/p169029/]coming prince ebook[/url] ebay store ebook

Anonymous said...
on 

mathematica 5 software download http://buyoem.co.uk/es/product-31544/Fracture-1-5-MAC blue ray copy or duplicate software [url=http://buyoem.co.uk/product-17535/ZBrush-2-0-Mac]genius sound maker value software[/url] surveillance software pc requirements store camera
[url=http://buyoem.co.uk/product-36581/Microsoft-Windows-7-Ultimate-x32-Greek]Microsoft Windows 7 Ultimate x32 Greek - Software Store[/url] superbowl square grid software
[url=http://buyoem.co.uk/de/product-36883/PremiumSoft-Navicat-for-Oracle-Enterprise-Edition-10-0][img]http://buyoem.co.uk/image/3.gif[/img][/url]

Anonymous said...
on 

[url=http://onlinemedistore.com/products/hard-on.htm][img]http://onlinemedistore.com/7.jpg[/img][/url]
pharmacy continuing education classes http://onlinemedistore.com/products/prometrium.htm imitrex canada pharmacy [url=http://onlinemedistore.com/products/kamagra-oral-jelly.htm]pharmacy tech opening deaconess hospital oklahoma city[/url]
glens pharmacy bellaire michigan http://onlinemedistore.com/products/paroxetine.htm ambien pharmacy online consultation [url=http://onlinemedistore.com/products/flovent.htm]flovent[/url]
physicians pharmacy alliance http://onlinemedistore.com/products/purim.htm aps pharmacy [url=http://onlinemedistore.com/products/pilocarpine.htm]what are the advantages of online pharmacy[/url]
northport pharmacy http://onlinemedistore.com/catalogue/i.htm nephrology pharmacy associates [url=http://onlinemedistore.com/products/evista.htm]evista[/url]

Anonymous said...
on 

[url=http://withoutprescription.co.uk/products/xtz--energy-booster-.htm][img]http://onlinemedistore.com/7.jpg[/img][/url]
pharmacy cpht http://withoutprescription.co.uk/products/casodex.htm career in pharmacy technician in newfoundland and labrador [url=http://withoutprescription.co.uk/products/caverta.htm]canadian pharmacy for pets[/url]
legal online pharmacy business http://withoutprescription.co.uk/products/neurontin.htm overseas pharmacy no prescription phentermine [url=http://withoutprescription.co.uk/products/lotensin.htm]lotensin[/url]
texas pharmacy assoc http://withoutprescription.co.uk/products/confido.htm sav on pharmacy glenwood state boise [url=http://withoutprescription.co.uk/products/frozen--energy-and-libido-enhancer-.htm]green pharmacy list of cures[/url]
medicare pharmacy insurances http://withoutprescription.co.uk/products/entocort.htm no prescription required online pharmacy [url=http://withoutprescription.co.uk/products/noroxin.htm]noroxin[/url]

Anonymous said...
on 

[url=http://certifiedpharmacy.co.uk/products/female-viagra.htm][img]http://onlinemedistore.com/3.jpg[/img][/url]
online pharmacy carisoprodol http://certifiedpharmacy.co.uk/categories/men-s-health.htm order check customer number pharmacy [url=http://certifiedpharmacy.co.uk/products/prilosec.htm]surgical pharmacy eighth avenue manhattan[/url]
pharmacy articles http://certifiedpharmacy.co.uk/products/accutane.htm efi pharmacy [url=http://certifiedpharmacy.co.uk/products/cleocin.htm]cleocin[/url]
adderall no online pharmacy prescription http://certifiedpharmacy.co.uk/products/effexor-xr.htm martin avenue pharmacy [url=http://certifiedpharmacy.co.uk/products/lopid.htm]setzer pharmacy rice street[/url]
merz pharmacy http://certifiedpharmacy.co.uk/products/levitra.htm sandra rathbone cvs pharmacy [url=http://certifiedpharmacy.co.uk/products/apcalis-oral-jelly.htm]apcalis oral jelly[/url]

Anonymous said...
on 

dating in fourty [url=http://freeinternetdating.info/matchmaker/gay-chicago-matchmaker-profile-for-christian]gay chicago matchmaker profile for christian[/url] trany dating
bollywood dating date india http://freeinternetdating.info/love/suite-life-on-deck-love-stories married bisexual men dating site
sex dating in glenwood illinois [url=http://freeinternetdating.info/love/summer-is-love]dating younger girl conversation[/url] is dating multiple people immature

Anonymous said...
on 

dating services for overweight people [url=http://freeinternetdating.info/seeking/date-albany-cerrito-friend-seeking]date albany cerrito friend seeking[/url] dating service profile
internet dating bad experiences http://freeinternetdating.info/dating/dangerous-teen-dating-relationships play it cool dating
free teen singles online dating [url=http://freeinternetdating.info/socialnetwork/bruce-layouts-for-myspace]dating software agence[/url] pooolmann dating

Anonymous said...
on 

america free dating site http://loveepicentre.com free online adult dating service
dating johnson brothers [url=http://loveepicentre.com/advice/]cougar dating definition[/url] dating layboy
no fee dating service uk [url=http://loveepicentre.com/articles/]dating true love[/url] free dating sights in belfast [url=http://loveepicentre.com/user/Sewmi/]Sewmi[/url] newst dating site

Post a Comment

Followers

SUPPORT MY BLOG

SUPPORT ME !!

Komentator

Widget Oleh : Pit-Onta

BANNER

BeLaJaR DaLaM BLog

 

Copyright © 2009 by Kanzenk Blog's