Kosong
faceblog
Account


News Feed Top News Recent Post
6 Okt 2010
Kejadian ini mungkin pernah anda alami saat membuat postingan di blog, apalagi jika postingan yang dibuat memuat banyak gambar/image. Kadang tanpa kita sadari Gambar yang kita muat ukurannya jauh melebihi ukuran layar yang tersedia untuk postingan, sehingga ukuran gambar tadi mendesak layar lain terutama yang ada di sidebar sebelah kanan. Jika layar pada sidebar tidak menggunakan properti "float", kemungkinan halaman blog anda akan melebihi kapasitas layar komputer sehingga memaksa layar komputer mengeluarkan scroll horisontal yang membuat kita dan orang lain yang mengunjungi blog kita menjadi kurang nyaman melihatnya. Jika layar pada sidebar kanan menggunakan properti "float", maka layar tersebut akan jatuh ke bawah sehingga template blog menjadi tampak berantakan.

Bagaimana cara mengatasinya?. Jika memang anda tidak ingin mengecilkan ukuran gambar, maka sebaiknya anda memisahkan gambar tersebut dari postingan dengan cara menempatkannya pada layar popup. Misalnya menjadi seperti ini [ DEMO ]. Jika anda tertarik dengan metode tersebut. Silahkan diterapkan tutorialnya,

Pertama : Tempatkan script dibawah ini pada bagian atas tag </head>

<script>
function scrolltopx()
{
ScrollTop = 0;
if( typeof( window.pageYOffset ) == &#39;number&#39; ) {
ScrollTop = window.pageYOffset;
}
else
if( document.body.scrollTop ) {
ScrollTop = document.body.scrollTop;
}
else
if( document.documentElement.scrollTop ) {
ScrollTop = document.documentElement.scrollTop;
}
else
{
return ScrollTop;
}
}

function viewpict(gb)
{
scrolltopx()
document.getElementById(&#39;demo&#39;).style.display=&#39;block&#39;;
document.getElementById(&#39;demo&#39;).style.top=ScrollTop + &#39;px&#39;;
document.getElementById(&#39;pictu&#39;).src=gb;
}

function closi()
{
document.getElementById('demo').style.display='none';
document.getElementById('pictu').src='';
}
</script>

Kedua : Masukkan Script dibawah ini pada bagian atas tag </body>

<div id='demo' style='background:#efefef;padding:5px;border:1px solid rgb(204,204,204);position:absolute;top:50px;left:20px;z-index:15;opacity: 0.9;-moz-opacity: 0.9;-khtml-opacity: 0.9;filter: alpha(opacity=90);display:none'>
<div align='right' style='background:#cccccc;width:100%'><b><a href='javascript:closi()'>Close [x]</a></b></div>
<img id='pictu' src=''/>
</div>

Ketiga : Cara menampilkannya pada postingannya adalah dengan menggunakan link misalnya [ VIEW IMAGE ], scriptnya adalah

[&nbsp;<a href="javascript:viewpict('http://farm5.static.flickr.com/4085/5044870358_c5d9585d20.jpg')">View&nbsp;Image</a>&nbsp;]

Ganti text yang berwarna merah dengan alamat  link image anda.
Silahkan di coba semoga ada manfaatnya
Trafik Kunjungan

Recent PostsSee All

Berlangganan Faceblog

Enter your email address:

People You May KnowSee All

SponsoredCreate an Ad

Beriklan di Faceblog
Promosikan bisnis ke 500 juta lebih pengguna aktif dan setia di Faceblog. Kembangkan merek online dengan koneksi ke audiens Anda.
RequestsSee All

Members Only
FollowersSee All

Facebook Fun



Yahoo Indonesia
Blogger Buzz
Liputan 6 SCTV
Media Indonesia
Tv One
Tempo Interaktif
Antara
Republika
VVA News
You Tube
BlogListAdd Blog Here

Daftarkan Blog Anda pada Bloglist Kami
Faceblog © 2010 English (US)AboutAdvertisingDevelopersTerms •PrivacyHelp


Maaf!!, Blog Kami Gagal melakukan Ekstraksi Data dari Server http://freetzi.freewebhostingarea.com. Hal ini mungkin disebabkan karena adanya gangguan loading pada server atau server sedang melakukan maintenance. Kami menyarankan anda untuk me-reload/refresh jika hal tersebut terjadi