Tips Membuat Scrolling Pada Widget Anda !!

Mau Tampilan Seperti Ini ?? 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 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 ?? :: :: :: :: :: ::

 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/