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.

Ditulis Oleh : Unknown ~ KRJ_Team

Anda sedang membaca sebuah artikel yang berjudul Menyembunyikan Obyek Dengan Kode Overflow:hidden, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar

:: Terima Kasih ! ::

Bagikan ke teman : FacebookTwitterGoogle+LinkedinTechnoratiDigg

Artikel terkait :