Tutorial Memasukkan Gambar Ke Dalam Kotak Skroll

Untuk tujuan ini saya andaikan yang anda sudah pun faham bagaimana memasang Kotak Skroll pada blog anda. Untuk keterangan lanjut Tutorial Memasang Kotak Skroll pada blog anda, pergi ke sini.

Untuk memasukkan gambar ke dalam Kotak Skroll, anda hanya perlu menyediakan beberapa keping gambar yang anda suka dan muatnaik ke laman sesawang anda. Jika anda belum ada laman sesawang, pergilah ke sini (untuk permulaan). Mendaftarlah dengan mana-mana penyedia perkhidmatan membina laman sesawang secara percuma tersebut dan kemudian binalah laman sesawang yang sederhana guna untuk memuatnaik gambar-gamabr anda.

Selepas anda muatnaik gambar-gambar pilihan anda, anda perlu dapatkan embedded URL address bagi gambar-gambar tersebut. Bagaimana nak dapatkan embedded URL address? Soalan yang baik. Sebenarnya ada banyak kaedah yang boleh anda lakukan, tetapi bagi tutorial ini, saya akan dedahkan satu cara yang paling senang dan ringkas. Jangan peningkan kepala anda. Mari kita teruskan …

Selepas anda muatnaik gambar pilihan anda, cuba paparkan gambar tersebut pada sehalaman paparan dengan mengklik gambar tersebut. Ya lah seperti yang anda biasa lakukan. Apa yang anda nampak? Bagus.

Pada browser address tab, akan tertera satu ‘butiran’ yang agak panjang menganai bagaimana gambar tersebut dapat dipaparkan, dimulai dengan - http:// ….. (ini contoh saja okey). Copy dan simpan butiran itu. Itulah embedded URL address bagi gambar tersebut. Gambar-gambar yang lain, lakukan perkara yang sama dan anda akan mengumpul banyak embedded URL address bagi gambar-gambar anda. Senangkan?

Oleh kerana dalam tutorial ini kita akan berhadapan secara langsung dengan kod-kod html (Hypertext Markup Language), ada baiknya anda mempunyai satu perisian untuk menyunting mana-mana yang perlu bagi kod-kod html tersebut. Anda sebenarnya boleh menggunakan perisian word, atau Notepad, tetapi saya cadangkan anda miliki perisian Araneae. Dapatkan di sini secara percuma.

Jangan peningkan kepala dengan kod html ini kerana kita tidak membina kod-kod tersebut cuma sunting mana-mana yang perlu. Alright, mari kita teruskan ...

Untuk tutorial ini, saya akan masukkan dua keping gambar pada kotak skroll serentak. Jika anda faham bagaimana proses ini dilakukan, saya yakin jika anda memasukkan sekeping, tiga atau empat keping sekali pun, memang tidak akan menjadi masalah bagi anda lagi.

Untuk contoh ini, saya akan gunakan gambar 1a dan 1b berikut.

 Photo 1a

Photo 1b

Muatnaiklah gambar-gambar yang sudah anda simpan dalam format jpg atau jpeg dan pastikan kebesarannya bersesuaian dengan peraturan penyedia laman sesawang dimana anda mendaftar. Bagaimana pun anda boleh mengawal kebesaran paparan gambar-gambar tersebut di dalam kotak skroll menggunakan kod html. Jangan risau. 

Soalnya bagaimana nak masukkan gambar tersebut ke dalam kotak skroll? Apa yang perlu dibuat? Seperti yang saya telah katakan diawal tadi, iaitu kita akan menggunakan sedikit kod html yang agak ringkas. 

Saya hanya gunakan kod html berikut.

<center>

<div style="width:250px;height:175px;overflow:auto;

border-width:fpx;border-color:000000;border-style:solid;">

<img src="http://memberfiles.freewebs.com/69/19/60591969/photos/Melinsung%20Sabah%202.JPG" width="350" height="175" alt="2.jpg."/>

<img src="http://memberfiles.freewebs.com/69/19/60591969/photos/Sunset%202.JPG" width="350" height="175" alt="2.jpg."/>

</div>

</center>

Hasilnya seperti ini:

Apa yang anda perlu lakukan ialah copy kod html berikut dan sunting dengan memasukkan embedded URL address gambar-gambar anda ke dalam kod tersebut, kemudian paste-kan ke blog atau web anda.

<center><div style="width:250px;height:175px;overflow:auto; border-width:fpx;border-color:000000;border-style:solid;"><img src="<----Masukkan embedded URL address gambar anda di sini ---->"</div></center>

Menarik bukan, dan jika anda rasa tutorial ini baik dan bagus untuk dikongsikan silakan copy-paste kod berikut ke laman web atau blog anda.



<br /> <center><br /> <a href="http://www.keluargablogger.blogspot.com/2011/11/tutorial-memasukkan-gambar-dalam-kotak.html" target="_blank">Tutorial Memasukkan Gambar Ke Dalam Kotak Skroll</a><br /> </center><br />

Beberapa tutorial berguna untuk blog anda akan menyusul. Komen anda amat dialu-alukan.