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 ) == 'number' ) {
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('demo').style.display='block';
document.getElementById('demo').style.top=ScrollTop + 'px';
document.getElementById('pictu').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
[ <a href="javascript:viewpict('http://farm5.static.flickr.com/4085/5044870358_c5d9585d20.jpg')">View Image</a> ]
Ganti text yang berwarna merah dengan alamat link image anda.
Silahkan di coba semoga ada manfaatnya
Postingan
){kind=link}