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>


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.


10 komentar:

Reza Fauzi said...

jadi gitu ya caranya.. baru tau bos... terima kasih ya

JR said...

wow keren buanget tutornya, thanks for share infonya ya

Eric said...

Siip infonya... tinggal "go" aja nich ama blogspot, tp msh kagok krn terbiasa pake wp euy

iskandaria said...

Ntar saya pasti coba mas. Thx berat buat sharingnya. Jadi bertambah lagi nih pengetahuan coding saya.

belajar seo blog said...

tutorial yang sangat menarik untuk mengembalikan jati diri bangsa terus berbagi tutorial agar lebih memajukan bangsa kita

buxer said...

Tapi mas, saya punya masalah nih. Di blog saya ada sebuah widget iklan seperti iklan diatas judul post comment ini, tapi ketika dicari kodenya di "edit HTML", kodenya tidak terlihat atau lebih tepatnya ada tapi tidak ada. Gimana tuh mas.

admin said...

@Buxer pastikan pas di edit HTML centang "expand template widget", tks

Terbaik Keluarga said...

ga pernah pasang nih widget..!

Replica Watches said...

matur terima kasih tutorialnya

gamer-id said...

wah terima kasih tutorialnya .. btw utuk menyembunyikan object gimana

Post a Comment

Silahkan memberi komentar, saran, kritik atau masukan tentang artikel atau blog ini
Do not insert a link on comment box or you will be considered a spammer

 
Seo marketing © 2010 | Designed by Chica Blogger | Back to top