Travelog 225: Tutorial untuk Ibu menukar Gambar

Semua pun boleh ambil ini sebagai pengajaran dan panduan hidup!

Ini adalah langkah-langkah untuk memasukkan gambar-gambar di bahagian template ibu. Gambar yang dimaksudkan adalah yang terletak pada bahagian tengah-tengah template seperti mana gambar rajah di bawah:

Anak panah menunjukkan tempat gambar-gambar untuk ditambah dan ditukar.

1) Yang pertama, Ibu harus membuka laman ibu, ataupun terus ke laman www.blogger.com. Di situ, ibu haruslah memasuki username, dan password pada tempat yang sepatutnya. Dan klik LOG IN atau ENTER.

anak panah menunjukkan tempat untuk memasuki Dashboard

2) Kemudian ibu akan berjumpa dengan DASHBOARD ibu. Gambar di bawah adalah gambar dashboard saya, namun ianya serupa sahaja dengan dashboard ibu. 

anak panah menunjukkan tempat untuk masuk dan meng'edit'kan gambar-gambar kenangan

3) Seterusnya, ibu harus menuruti langkah berikut. Perjalanan ke code html memang tidak susah, namun ianya perlukan sedikit ketabahan dan kekuatan sama ada rohani dan jasmani. Opps, termengarut pulak, baiklah, selepas kita klik design option seperti gambar di atas, kita akan berjumpa gambar di bawah. 

anak panah menunjukkan kepada kita semua di mana terletaknya 'rumah' kod HTML.

4) Klik sahaja pada tempat yang anak panah tunjukkan. Ibu akan sampai di rumah HTML. Di situlah nanti ibu akan bermain-main dengan kod. Baiklah, kita layan gambar seterusnya, iaitu gambar rumah HTML.

Ibu jangan risau kalau ada perkataan/kod yang tidak sama seperti gambar ini. Ini kerana gambar ini adalah gambar rumah HTML saya, maka sememangnya tidak sama dengan ibu, namun begitu, keadaan, rupa bentuk serta fungsinya tersangatlah sama.

5) Ibu kemudiannya harus menekan butang Ctrl yang ada pada keyboard komputer ibu. Jangan lepas lagi ibu. Kemudian, tanpa melepaskan tekanan jari ibu pada butang Ctrl, ibu tekan butang huruf F. Jadi formulanya senang sahaja, iaitu Ctrl+F atau dalam bahasa penuhnya Ctrl+Find. 

6) Nantikan bu, akan ada satu kotak cari akan keluar di bahagian bawah skrin ibu. Ianya seperti gambar di bawah ini.

Anak panah menunjukkan kotak kecil itu muncul setelah ibu menekan papan kunci Ctrl+F, namun bagi pengguna Google Chrome ianya akan muncul di atas penjuru kanan.

7) Selepas itu, ibu haruslah menaip perkataan <div class='panel'>

pada dalam kotak tersebut. Seperti mana yang terdapat pada gambar di bawah. Ianya akan automatik dapat berjumpa dengan perkataan yang ditulis.

anak panah menunjukkan kedudukan kod yang dicari dan secara automatik dapat dikesan

8) Kemudian ibu cuma akan meng'EDIT'kan apa yang saya terangkan di samping gambar rajah yang diberikan seprti di bawah ini.

Ibu boleh klik di atas gambar untuk membesarkan lagi gambar.

 Di dalam gambar tersebut ibu akan nampak perkataan yang digariskan.Itulah tempat-tempat yang sangat penting. Yang lain tolak tepi jer ibu. Di sini ibu harus mengikut langkah-langkah ini terlebih dahulu.

@ Ibu BUKA windows baru, ataupun NEW TAB seperti mana ditunjukkan pada gambar rajah di bawah.  Gambar untuk pengguna  MOZILLA FIREFOX, dan GOOGLE CHROME

anak panah menunjukkan tempat untuk 'new tab'. Klik sahaja untuk membuka halaman/windows yang baru seperti di arahkan -google chrome

untuk pengguna mozilla, tempat untuk menambah 'new tab' adalah seperti yang ditunjukkan. Bagi yang tidak menjumpainya, bolehlah menggunakan 'short cut key' iaitu Ctrl+T

@ Di halaman 'new tab' tersebut, Ibu harus membuka mana-mana HOSTING untuk  memasukkan gambar-gambar ibu yang ibu mahu. Hosting paling cepat, mudah. bagus adalah Facebook.

@ Sesudah Ibu memasukkan gambar ibu, dan sememangnya sudah boleh di'VIEW'kan di Facebook, maka ibu harus MEMBESARkan gambar tersebut di FACEBOOK. Seperti contoh keadaan di bawah.

 @ Ibu RIGHT CLICK kan di ATAS gambar tersebut

@ COPY IMAGE LOCATION, kemudian pergi balik ke 'TAB' sebelah yakni halaman DASHBOARD ibu seperti mana yang sudah ibu buka.


@ Di 'EDIT HTML' tadi, ibu harus mencari kod HTML seperti mana di bawah ini.

<div class='belt'><!-- // image slider html-->
<div class='panel'>
<a href='#' title='Bersama suami tersayang, Azami Zaharim'> <img alt='Bersama suami tersayang, Azami Zaharim!' height='122' src='http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs211.ash2/47444_1641555597715_1201576418_31861700_2579641_n.jpg' width='153'/> </a>
</div>

 nak cari dengan cepat? Buat seperti mana yang di ajar pada langkah 6 & 7.

@ Apabila ibu sudah jumpa dengan kod seperti di atas, ibu perasan tak dengan kod yang saya 'BOLD'kan. Okey, ibu sudah 'COPY IMAGE LOCATION' kan, seperti yang ditunjukkan oleh gambar rajah di atas? Kalau sudah, ibu buangkan kod http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs211.ash2/47444_1641555597715_1201576418_31861700_2579641_n.jpg, dan ibu GANTIKAN dengan KOD IMAGE yang ibu copy tadi.

@ Sekarang, penukaran gambar sudah berjaya. Ibu nampak perkataan yang saya warnakan dengan warna BIRU? Ya, itu adalah tempat 'CAPTION' gambar ibu. Ibu ganti sahaja dengan CAPTION lain yang sesuai dengan gambar yang ibu masukkan tadi.

@ Sekarang, ibu sudah pun berjaya menukar gambar, dan meletakkan gambar baru. Jikalau ibu mahu menukar gambar-gambar lain, langkahnya cuma sama. Untuk pengetahuan ibu, kod-kod tersebut sudah pun tersusun mengikut urutan gambar yang di'DISPLAY'kan di halaman blog ibu. Jikalau gambar yang ketiga ibu mahu tukarkan, ibu seharusnya menukarkan kod yang ketiga, seperti mana gambar di bawah.

klik untuk besarkan

 Info mengenai gambar di atas:

(1) Kod yang mewakili gambar yang pertama
(2) Kod yang mewakili gambar yang kedua
(3) Kod yang mewakili gambar yang ketiga

dan masih ada banyak lagi kod yang mewakili gambar setelah ibu 'SCROLL DOWN' kan.

(4) Setelah semuanya selesai, ibu perlu menekan 'SAVE TEMPLATE'. Jikalau tidak berlaku apa-apa kesalahan kod, template ibu selamat di SAVE kan. Jikalau ada, akan ada masalah yang timbul di sebelah atas kotak EDIT HTML dan menyuruh kita EDIT semula.

IBU INGIN MENAMBAH LAGI GAMBAR BARU??

Ini adalh jikalau ibu sudah menukar semua gambar yang ada di blog ibu. Dan ibu teringin untuk menambah lagi gambar untuk dikongsikan kepada para pembaca tanpa mengurangkan ataupun membuang gambar yang sudah ada. Okey, ibu ikut langkah ini:

(1) Ibu COPY kod ini, semuanya tanpa meninggalkan satu kod pun:

<div class='belt'><!-- // image slider html-->
<div class='panel'>
<a href='#' title='Bersama suami tersayang, Azami Zaharim'> <img alt='Bersama suami tersayang, Azami Zaharim!' height='122' src='http://sphotos.ak.fbcdn.net/hphotos-ak-ash2/hs211.ash2/47444_1641555597715_1201576418_31861700_2579641_n.jpg' width='153'/> </a>
</div>

(2) Ibu PASTE kan betul-betul di bawah kod IMAGE yang terakhir, seperti di dalam gambar di bawah ini:

klik untuk besarkan gambar

(3) Setelah itu, Ibu cuma perlu tukarkan CAPTION (ayat warna biru), dan URL IMAGE (Bold hitam) kepada alamat gambar yang baru. (Lihat contoh COPY IMAGE LOCATION)

Jikalau ada apa-apa masalah, silalah mengajukan soalan di meja Part Time saya. Harap maklum. Hehehehe...

Sekian daripada saya, anak didik Ibu Martinelli Hashim.