Masukan Gambar Dalam Tetingkap Skrol

Panduan bagaimana masukan gambar dalam scrolling window.Window

Contoh:

kod HTML gambar yang kita muatnaik dalam pos blog macam ni (lihat bawah HTML mode):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6J_VpGi3hGPJWaovlROXvOc2zB9XD8AP_-QuUuRQviY4IdamQsS753MUJIZWxM_eB0IfJIwsT06fP51Qc4vMyLiHmTbAZ74ka7vLAy34Q0CReZH_gGE49P1OfdeoMmxIOScMRnlF5pQ/s1600/310182_177619695708731_1342673690_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6J_VpGi3hGPJWaovlROXvOc2zB9XD8AP_-QuUuRQviY4IdamQsS753MUJIZWxM_eB0IfJIwsT06fP51Qc4vMyLiHmTbAZ74ka7vLAy34Q0CReZH_gGE49P1OfdeoMmxIOScMRnlF5pQ/s320/310182_177619695708731_1342673690_n.jpg" width="156" /></a></div>

kod HTML warna merah di atas adalah kod pautan pada gambar. Kod HTML warna biru ni yang sebenarnya kod HTML gambar. Boleh cut ambik kod yang warna biru sahaja masukan dalam scroll window. Kalau ambik semua kod pun boleh juga. Kod HTML warna hitam tu untuk tengah-tengahkan kedudukan gambar.

Ukuran lebar (width) gambar mesti sama besar. Macam mana nak pinda saiz/ukuran gambar ikut panduan http://panduanuntukblogger.blogspot.com/2012/12/besarkecikan-gambar-dalam-pos.html.

Mula-mula muatnaik semua gambar dulu dalam pos, lepas tu pinda ukuran gambar bagi sama besar ukuran widthnya. Kemudian masukan kod-kod gambar dalam kod HTML scroll window.

kod HTML scroll window macam ni... kalau masukan dalam pos blog mesti mau bawah HTML mode:

<div style="overflow: auto; width: 220px; height: 383px;"> <img img border="0" height="143" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3mNNl-HDi0tLlkroRbrGTU1KRUJdEtH9MBPLIzPXgM4QCdTK5VBac85ZGBRDNGek5PI6REmp9IWYOcXB_ypcXzSlU17u23fMrOT1Rx2UEjIc9FES5ixVtoyIALsAEifR4PeljTCJtPE0/s400/black_capped_chickadee.jpg" /> <img border="0" height="256" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPh7QgnbfFYXTkOSgBNKF5AdWoBkFEyTQITXEHm2JyNIe4xYrMdTC1XP2SCl1VxoINAtr2Q5CiGUa99KUjjrBHQV1udmehyNd0P3PVtZE2FT2T0XJBfzwGiIAoYqmmjRGmBq7uhy9uTmg/s400/Bird+51.jpg" /> <img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-H6tjbO4M275CkjYBxLKglDZ1nblHxVuM5y0Z4EdVvW2icQGYcDlPmoo5YqpC8MXcSkDoDLSdnovLHhCwC042C3cFQE_kOUWhpCNoGU9ZcuxZV9cH9VTPXL7ZRNiHeiPHMvj7BfGXcRc/s320/afghandashtelaili.jpg" width="200" /> <img border="0" height="150" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpmcX3a-bl7S6XKINt62iDJvu55SUkBSOFVMPyqbSSy7OVlmM9V6Y0Yy5pTsCaqQT1SarAvXW_bkbpuH-9PkU0DAP6MkXof1XAoQMkXyeul1xUnZYecOZ_oK_tm4S_qEOFxymxgVl8nE/s400/Bird36.jpg" /> </div>

<div style="overflow: auto; width: 220px; height: 383px; padding-left 115px;"> tutup di bawah sekali dengan </div>. Boleh pinda ukuran width, height dan padding-left untuk sesuaikan dalam pos blog.