jump to navigation

Tips Membuat Scrolling Pada Widget Anda !! 14 Desember 2008

Posted by www.dizlees.com in aGHi_sPyWaRe.
Tags:
trackback

Mau Tampilan Seperti Ini ??

Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas aghi spyware
Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas aghi spyware
Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas
Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas
Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas
Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas
Atau Tampilan Seperti ini ??

:: aghi spyware
:: aghi spyware
::
::
::
::

 Seringkali kita kunjungi youtube bukan? Pasti, saya yakin ! Dan pasti anda terkagum-kagum dengan tampilan website mereka yang tertata dengan rapi. Apalagi saya, begitu melihat layoutnya yang profesional, apalagi ketika tertuju pada scrolling box yang ada pada website mereka. Scrolling box yang terletak di sidebar yang berisi “related videos”. Untuk mendapatkan Codenya

 

Coba perhatikan pada gambar yang ada pada awal paragraf.Sebenarnya dulu saya menduga-duga bahwa youtube menggunakan kode html iframe (bahasa kode html) atau paling tidak menggunakan textarea (bahasa kode html juga).

Tetapi selidik punya selidik, dan ketika kita buka View Source dari browser kita, ternyata youtube tidak menggunakan tipe tersebut, karena tipe tidak SEO friendly. Saya yang seorang html-ers awam begitu penasaran, dan ternyata saya menemukan jawabannya tadi malam. Jadi saya ingin mensharingkan apa yang telah saya dapatkan kepada para pembaca blog ini. Ternyata ada beberapa baris saja yang paling penting dan ternyata baris-baris kode html tersebut sangatlah sederhana adanya. Kekuatannya terletak pada STYLESHEET dengan STYLE (overflow:scroll;). Agar lebih paham, saya berikan contoh sepotong kodenya:

Silahkan Copy Paste Script Dibawah Ini :

<table>
<tr>
<td>
Mau Tampilan Seperti Ini ??
<div style=”background-color:white;border:2px solid #cccccc;overflow:scroll;height:200px;width:200px;”>
<table>
<tr>
 <td width=”200″ height=”80″>Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas</td>
 <td valign=”middle” align=”center” width=”80″ height=”80″><a href=”//aghi182.wordpress.com/””><img src=”https://aghi182.files.wordpress.com/2008/07/aghi-spyware-part-2.jpg alt=”aghi spyware” width=”160″ height=”60″></a></td>
</tr>
<tr>
 <td width=”200″ height=”80″>Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas</td>
 <td valign=”middle” align=”center” width=”100″ height=”100″><a href=”//aghi182.wordpress.com””><img src=”https://aghi182.files.wordpress.com/2008/07/retro-love.jpg&#8221; alt=”aghi spyware” width=”60″ height=”60″></a></td>
</tr>
<tr>
 <td width=”200″ height=”80″>Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas</td>
 <td valign=”middle” align=”center” width=”80″ height=”80″><a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/banner1.jpg&#8221; border=”0″ width=”160″ height=”40″></a></td>
</tr>
<tr>
 <td width=”200″ height=”80″>Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas</td>
 <td valign=”middle” align=”center” width=”80″ height=”80″><a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/t-shirt-7.jpg&#8221; border=”0″ width=”160″ height=”60″></a></td>
</tr>
<tr>
 <td width=”200″ height=”80″>Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas</td>
 <td valign=”middle” align=”center” width=”80″ height=”80″><a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/i-love-spyware-part-2.jpg&#8221; border=”0″ width=”60″ height=”160″></a></td>
</tr>
<tr>
 <td width=”200″ height=”80″>Selamat Datang di website milik Aghi-182, silahkan dibaca-baca sampai puas</td>
 <td valign=”middle” align=”center” width=”80″ height=”80″><a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/banner.jpg&#8221; border=”0″ width=”160″ height=”60″></a></td>
</tr>
</table>
</div>
</td>
<td>
Atau Tampilan Seperti ini ??
<div style=”overflow:scroll;width:200px;height:200px;background-color:white;border:#cccccc 2px solid;”>:: <a href=”//aghi182.wordpress.com/””><img src=”https://aghi182.files.wordpress.com/2008/07/aghi-spyware-part-2.jpg&#8221; alt=”aghi spyware” width=”160″ height=”100″ /></a>
:: <a href=”//aghi182.wordpress.com””><img src=”https://aghi182.files.wordpress.com/2008/07/retro-love.jpg&#8221; alt=”aghi spyware” width=”100″ height=”100″ /></a>

:: <a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/banner1.jpg&#8221; border=”0″ alt=”” /></a>

:: <a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/t-shirt-7.jpg&#8221; border=”0″ alt=”” /></a>

:: <a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/i-love-spyware-part-2.jpg&#8221; border=”0″ alt=”” /></a>

:: <a href=”https://aghi182.wordpress.com&#8221; target=”_blank”><img src=”https://aghi182.files.wordpress.com/2008/07/banner.jpg&#8221; border=”0″ alt=”” /></a></div>
</td>
</tr>
</table>

Ya, hanya itu saja, ternyata manipulasi terletak pada tag DIV yang tidak disangka-sangka mempunyai properti OVERFLOW:SCROLL.

sumber :

First Source : http://www.speedytown.com/kimyong/index.php/2008/08/05/membuat-tampilan-scrolling-box-mirip-youtube-html/

Variasi Source Code :  https://aghi182.wordpress.com/2008/12/14/tips-membuat-scrolling-pada-widget-anda/#more-326

Author :  https://aghi182.wordpress.com/

Komentar»

1. estu - 14 Desember 2008

boleh coba neh

@Estu
Boleh dunk !! silahkan dicoba ..
makasih dah mampir ..

Suka

2. Blue'Zz Smile - 15 Desember 2008

Waah bLh di Coba nih…
Thx ya bos..

@Blue’Zz Smile
Woke sep silahkan dicoba ..
smoga bermanfaat ..

Suka

3. h a b i b - 15 Desember 2008

oke nih, cuman banyak bener kodenya, jadi jiplak aja ya, coba modif entar….

@Habib
ok boz thx atas kunjungannya ..
smoga script nya bermanfaat ..

Suka

4. IMABA Surabaya - 18 Desember 2008

Salam kenal, mas…

Bgaimana kalau diterapkan di blogpot? Bisa nggak?

Mohon dijawab ya, mas…

@IMABA
bisa koq ditempel di blogspot ..
kan ini scriptnya punya HTML ..
jadi bsa dpasang di Blog HTML ..

Suka

5. liroesdy - 18 Desember 2008

kopas ah…

thank’s ya… dari dulu pengen coba buat blogroll di sidebar soalnya 😀

salam kenal

@Liroesdy
slm knal jg ..
thx yuv dah mampir ..
smoga ja scrolling nya berguna ..

Suka

6. dedidwitagama - 21 Desember 2008

Nice posting Sir … thx for visit and comment at my blog

@Dedidwitagama
Thx juga dah mampir n leave a comment ..

Suka

7. dewi - 21 Desember 2008

pengin seh…..
tapi mau yg laen…
gimana dunk caranya?😦

@Dewi
thx dah mampir mba dewi ..
klo mau yg lain jga bisa koq ..
tinggal di edit adja kata2 sama link href sama img src nya ..
it so simple ..

Suka

8. Ardian - 22 Desember 2008

kok gak muncul?

@Adrian
masa seh bos ga muncul ??
ok dech mas kasih link gambar sama link mas ..
nanti saya coba buatin untk mas ..

Suka

9. z03r4 - 22 Desember 2008

umm, tipsnya boleh juga… btw, ada cara lain g’ ya?
ato ada ide tentang plugin untuk scrolling box?

oya, mas aghi… aq pengen tau donk cara masukin banner di scrolling box sekalian, ntar banner itu langsung ngelink ke suatu website. kan kl kita upload ke photobucket linkna ya link image photo bucket kan? nah, ngubahnya jadi link kita gmn? or any other idea?

aq mo bikin ini bwt blog baru http://www.zuraworld.co.cc

thanks ya bwt visit nya di blog aq (www.boisterousgirl.wordpress.com) … salam kenal, thanks bwt bantuannya.😉

@Zo3Ra
makasih bwat mba zoera dah mampir ..
klo plugin scrolling box bwat WP kayanya msh manual pke tag HTML ..
tp klo di blogspot kayanya dsediain ..
hmmm klo pngen nge link sebuah gambar pada scrolling ke sebuah alamat web mudah adja mba ..
ntar saya kasih cnth script nya ke comment blog nya mba ..
thx yuv dah mau nanya ..
sapa tau bsa bantu ..

Suka

10. ardian - 23 Desember 2008

Makasih bung…
Ane kemarin nyoba copy paste tapi tampilannya gagal. coba lihat aja di my blog..
Saya pernah dengar dri dosen saya…lw bahasa html dari format div itu tidak bisa dipakai di wordpress…apakah betul?
best regards.

@Ardiansyah
Thx bwat ardi dah mau nanya lagi ..
oia kmrn cnth yg dri aghi emank ada yg salah ..
tp udh dbetulin koq ..
aghi jg bikin contoh lagi di comment tmn ..
coba buka link ini http://boisterousgirl.wordpress.com/guestbook-2/
itu comment contoh scrolling yg sderhana ..
coba ja di mutilasi ..
div bsa dpake di wordpress ..
contoh nya kan aghi pke di postingan sama di widget
itu pke div loh ..

Suka

11. Ardian - 23 Desember 2008

bung numpang tanya donk…untuk html dari font bewarna apa?
makasih yah

@Ardian
maksudnya pingin font warna apa ??
ada banyak warna bwat font di html ..

Suka

12. Ardian - 24 Desember 2008

makasih dah mampir…mudah2an kita bisa tukeran informasi dan ilmu yah,,,,semangat.
Iyah mas sya lupa lagi bwt warna font di html?…
Boleh tanya donk..bisa gk scrollingnya gerak otomatis seperti di web http://www.blogor.org?

@Ardiansyah
klo untuk kode html warna buka ja link ini https://aghi182.wordpress.com/2008/12/21/tips-code-warna-pada-html/?preview=true&preview_id=397&preview_nonce=ba768aa005
klo scrollingnya bergerak, saya pelajari dlu ..
hehe ..
maklum msh blajr ..
coba di kombinasi pke marquee diection ..

Suka

13. Ardian - 24 Desember 2008

ode html warna…lw bisa yang mas tahu…

@Ardiansyah
untuk kode warna html coba bka link ini
https://aghi182.wordpress.com/2008/12/21/tips-code-warna-pada-html/?preview=true&preview_id=397&preview_nonce=ba768aa005

Suka

14. Ardian - 24 Desember 2008

marque gak bisa yah di wordpress

@Ardi
bisa koq marquee di WP ..

Suka

15. Ardian - 24 Desember 2008

mas ardi dah ngutak ngatik marquee di wordpress kok gak ng run yah…
ardi punya pnduan di http://jaya-example.blogspot.com/2007/07/image-in-marquee.html…..coba aja lihat…
truz lihat jg blog ardi

@Ardi
Waduh maaf bru bsa blz ..
coz lagi banyak kerjaan, jd lom ada wktu bwat bka2 ..
ntar dech dplajari lagi ..

Suka

16. ben - 27 Desember 2008

asyik juga ya.. scrollingnya sambil link kesini

@Ben
Ya om kan itu sample scrolling blog saya ..
klo mo link nya ke blog om, tinggal di modif ja om ..

Suka

17. omeng - 27 Desember 2008

Makasih mas atas tutornya, sangat berguna bagi saya🙂

Sekali lagi saya ucapkan banyak terima kasih, ini sebagai bahan referensi untuk blog saya. salam kenal🙂

@Omeng
sama2 om omeng, smoga bermanfaat ..
salam kenal jg ya om omeng ..

Suka

18. ben - 27 Desember 2008

trims atas kunjungan baliknya, ide scrollnya bagus koq… kreatif.

@Ben
maksih om ben ..
ya aghi cma masih belajar adja ..
cuma ingin berbagi om ..
hehehe ..
thx ya om ..

Suka

19. masdjoen - 14 Maret 2009

siiippp

Suka

20. viska - 16 Juli 2009

coba dulu ah…….

Suka

aGHi 182 - 18 Juli 2009

ok silahkan dicoba ..
semoga bermanfaat ..
thx

Suka

21. miezan - 10 November 2009

terima kasih atas panduan yang di berikan

Suka

22. dinooo - 13 Mei 2010

kok g bekerja di blogku ya mas, apa karena backgroundnya?,

Suka


Silahkan Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: