Menyembunyikan Obyek Dengan Kode Overflow:hidden

Membungkus dan menyembunyikan obyek dengan kode div style dan overflow:hidden. Suatu obyek untuk dipasang di blog seperti widget, flash, atau adsense kadang tampilannya tidak sesuai dengan harapan kita. Kita bisa membungkus/masking obyek atau script dengan kode overflow:hidden.

Sebagai contoh, pada widget feedjit normalnya akan menampilkan banyak link history seperti ini:

 Saya hanya ingin menampilkan setengahnya saja dan menyembunyikan link dari feedjit menjadi seperti ini:

 Maka kita bisa menambahkan kode div style dan overflow:hidden seperti ini:

<div style="overflow: hidden; height: 250px; width:100%; "> <script src="http://feedjit.com/serve/?bc=FFFFFF&amp;tc=494949&amp;brd1=FFFFFF&amp;lnk=494949&amp;hc=336699&amp; ww=232&amp;ww=212" type="text/javascript"></script> </div>

Atau kalo mau tampilan Feedjitnya seperti di blog ini pake kode ini:

<div style='overflow:auto;width:220px;height:500px;padding:0px;border:0px solid #eee'> 
<div style='overflow: hidden; height: 500px; width:100%; '> 
<script src='http://feedjit.com/serve/?vv=701&tft=3&dd=0&wid=29ca0b931c70fcf9&pid=0&proid=0&bc=000000&tc=F5F5F5&brd1=454545&lnk=AB6611&hc=FFFFFF&hfc=524D4D&btn=6C0C9C&ww=205&wne=10&wh=Live+Traffic+Feed&hl=0&hlnks=0&hfce=0&srefs=0&hbars=0' type='text/javascript'></script><noscript><a href='http://feedjit.com/'>Feedjit Live Blog Stats</a></noscript>
</div>  
</div>

Sebenarnya cara ini sama ketika kita membuat menu scrolling, yang berbeda hanya atributnya, kalau menu scroll atribut overflow: auto sedangkan jika ingin menyembunyikan kelebihan dari tinggi dan lebar yang sudah ditentukan digunakan overflow:hidden.

Pada height dan width sobat bisa menentukan berapa tinggi dan lebar widget yang ingin ditampilkan. pada contoh diatas tinggi 250px dan lebarnya 100% yang artinya mengikuti lebar widget.Atau hapus saja width:100% jika ingin lebarnya mengikuti lebar widget.

Demikian semoga bermanfaat.

Share this history on :

Tweet

Title : Menyembunyikan Obyek Dengan Kode Overflow:hidden
URL : http://blogcunayz.blogspot.com/2011/07/menyembunyikan-obyek-dengan-kode.html?m=0
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Menyembunyikan Obyek Dengan Kode Overflow:hidden sebagai Sumbernya.