Sunday, May 31, 2009
Bagaimana membuat tiga coloumn
Sila gunakan template minima sebagai permulaan kerana ia merupakan template blogger yang paling mudah untuk diubahsuai dan lebih mudah untuk difahami khusus bagi mereka yang masih baru dalam dunia blog. Dapatkan codingnya di sini.
Wednesday, May 27, 2009
Bagaimana membuat menu horizontal
Bagaimana membuat menu horizontal atau butang navigasi seperti HOME, ABOUT US, PROFIL, CONTACT US dan lain-lain. Bagi mereka yang masih tidak ada idea apa itu butang navigasi, sila lihat contoh di bawah.
Sebelum membuat butang navigasi, kita perlu membuat persiapan daripada segi kata kunci-kata kunci yang akan digunakan. Sebagai contoh dalam tutorial ini, kata kunci-kata kunci yang akan digunakan ialah HOME, ABOUT US, SERVICE, PRODUCT, CONTACT US.
Anda sudah bersedia untuk membuat tutorial ini? Ayuh kita mulakan.
Anda sudah bersedia untuk membuat tutorial ini? Ayuh kita mulakan.
1. Sila login ke blogger.com menggunakan ID anda
2. Klik Layout.
3. Klik Edit HTML.
2. Klik Layout.
3. Klik Edit HTML.
4. Klik di sini untuk langkah berikutnya.
CONTACT US
Address
Faridah Bte Kamis
Kolej RISDA Melaka
Lot 2020, Ayer Pa'abas
78000 Alor Gajah Melaka
No Tel pejabat
06-5529227
No Fax pejabat
06-5529963
78000 Alor Gajah Melaka
No Tel pejabat
06-5529227
No Fax pejabat
06-5529963
Tuesday, May 26, 2009
MY PROFILE
Biodata
Inilah saya...Suka bersederhana dalam apa jua perkara baik pakaian, makan, make up. Orangnya pun biasa-biasa sahaja. Merupakan anak jati Melaka yang lahir pada 20 Jun 2009 dan berbintang Gemini.
Status
Ibu kepada 3 orang anak...Fatin Nabilah(9 tahun) yang sulung diikuti Muhammad Irfan(7 tahun) dan yang bongsu pula Fatin Najihah(11 bulan). Lupa pula nak kenalkan dengan rakan sebilik. Dialah suami dan sahabat sejati yang sentiasa menemani di saat suka dan duka.
Kerjaya
Sudah 6 tahun melibatkan diri dalam bidang pengajaran di Kolej RISDA Melaka dan akan terus dalam bidang ini selagi diizinkan.
Prinsip hidup
Kalau main...mainlah bersungguh-sungguh. Kalau kerja...kerjalah bersungguh-sungguh dan jangan buat orang menyampah dengan kita.
Pedoman
Di sebalik harta, kekayaan dan kesenangan kita terselit hak orang lain yang perlu dikongsi bersama, oleh itu jangan ralat untuk bersedekah dan memberi pada yang perlu.
Wednesday, May 20, 2009
Bekerja dengan coding HTML/JavaScript
Sebarang kod HTML atau JavaScript boleh diletakkan pada dua bahagian dalam blog kita samada pada post atau page element.Apabila kita bekerja dengan coding HTML atau JavaScript, kita akan selalu melakukan langkah-langkah mudah seperti di bawah.
Untuk meletakkan coding pada page element.
1. Loggin ke blogger.com menggunakan ID anda.
2. Pilih layout --> Add a Gadget --> pilih HTML/JavaScript --> copy paste coding yang berkenaan --> save --> view blog dan lihatkanlah hasilnya.
Untuk meletakkan coding pada post pula.
1. Loggin ke blogger.com menggunakan ID anda.
2. Pilih posting --> create --> copy paste coding yang berkenaan pada ruangan ynag disediakan --> klik publish post --> view blog dan lihatkan hasilnya.
Selamat mencuba. Sekiranya masih tidak berjaya, bolehlah ajukan sebarang kemusykilan pada ruangan comment. Jumpa lagi.
Untuk meletakkan coding pada page element.
1. Loggin ke blogger.com menggunakan ID anda.
2. Pilih layout --> Add a Gadget --> pilih HTML/JavaScript --> copy paste coding yang berkenaan --> save --> view blog dan lihatkanlah hasilnya.
Untuk meletakkan coding pada post pula.
1. Loggin ke blogger.com menggunakan ID anda.
2. Pilih posting --> create --> copy paste coding yang berkenaan pada ruangan ynag disediakan --> klik publish post --> view blog dan lihatkan hasilnya.
Selamat mencuba. Sekiranya masih tidak berjaya, bolehlah ajukan sebarang kemusykilan pada ruangan comment. Jumpa lagi.
Tuesday, May 19, 2009
Bagaimana membuat vertical scroll dengan imej
Anda ingin tahu bagaimana untuk membuat vertical scroll dengan imej.Vertical scroll dengan imej adalah seperti demonstrasi di bawah.
Berikut adalah codingnya:
Note!Gambar terlebih dahulu perlulah diupload ke website yang menyediakan service upload gambar. Cthnya seperti photobucket.com atau picasaweb.
Selamat mencuba dan jumpa lagi!
Berikut adalah codingnya:
Note!Gambar terlebih dahulu perlulah diupload ke website yang menyediakan service upload gambar. Cthnya seperti photobucket.com atau picasaweb.
<table cellspacing="0" cellpadding="0" width="180" align="center" border="1">
<tbody><tr>
<td class="marquee"><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" loop="true" height="300">
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung3.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung3.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung5.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung5.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung6.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung6.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung7.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung7.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung6.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung6.jpg" border="0" /></a></center>
</marquee></td></tr></tbody></table>
<tbody><tr>
<td class="marquee"><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" loop="true" height="300">
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung3.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung3.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung5.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung5.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung6.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung6.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung7.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung7.jpg" border="0" /></a></center>
<center><a href="http://s670.photobucket.com/albums/vv63/faridah_photos/tudung/?action=view¤t=tudung6.jpg" target="_blank"><img alt="Photobucket" src="http://i670.photobucket.com/albums/vv63/faridah_photos/tudung/tudung6.jpg" border="0" /></a></center>
</marquee></td></tr></tbody></table>
Selamat mencuba dan jumpa lagi!
Monday, May 18, 2009
Bagaimana membuat scroll bar
Anda ingin tahu bagaimana membuat scroll bar? Tidak tahu apa itu scroll bar? Jangan susah hati. Scroll bar sangat sesuai untuk dijadikan sebagai menu dalam blog kita. Ia dapat membolehkan pengunjung blog mencari sesuatu maklumat posting dengan lebih mudah dan cepat. Di sini saya tunjukkan contoh.
Jika anda berminat, bolehlah dapatkan codingnya di sini. Seterusnya lakukan langkah-langkah mudah seperti yang telah saya terangkan pada posting-posting yang sebelum ini. Kalau ada yang masih tidak faham, sila baca ruangan ini.
Jika anda berminat, bolehlah dapatkan codingnya di sini. Seterusnya lakukan langkah-langkah mudah seperti yang telah saya terangkan pada posting-posting yang sebelum ini. Kalau ada yang masih tidak faham, sila baca ruangan ini.
Bagaimana membuat marquee
Apa itu marquee? Marquee adalah kod HTML yang digunakan untuk membolehkan objek bergerak.
Tetapi, apa kata kita lihat atribut yang selalu digunakan :
BGCOLOR="color" → untuk setkan warna latarbelakang bagi objek (teks, imej ..etc).
DIRECTION="left/right/up/down" → untuk setkan arah pergerakan objek samada kiri, kanan, atas atau bawah.
BEHAVIOR="scroll/slide/alternate" → untuk setkan jenis pergerakan objek.
Scroll → objek bergerak secara pusingan.
Slide → objek akan bergerak kemudian berhenti seketika dan seterusnya.
Alternate → objek bergerak dari kiri ke kanan dan kembali semula ke kiri dan seterusnya.
TITLE='message" → objek akan berhenti apabila cursor ditunjuk kepada objek.
SCROLLMOUNT="number" → untuk setkan kelajuan marquee, lebih besar nombornya maka lebih cepat kelajuannya.
WIDTH="number" → untuk setkan lebar marquee dan ianya dalam unit picel(px) atau persen(%).
Cuba kita lihat beberapa contoh di bawah.
Dapatkan codingnya di sini.
Dapatkan codingnya di sini.
Dapatkan codingnya di sini.
Untuk menghasilkan kesan-kesan marquee seperti di atas, sila ikuti langkah-langkah seperti sebelum ini iaitu ;
1. Sila copy coding pada link yang disediakan.
2. Seterusnya, login ke blogger.com menggunakan ID anda.
3. Pilih layout --> Add a Gadget --> HTML/JavaScript --> paste coding yang berkenaan --> save --> view blog dan lihatkan hasilnya!. Selamat mencuba dan jumpa lagi.
Tetapi, apa kata kita lihat atribut yang selalu digunakan :
BGCOLOR="color" → untuk setkan warna latarbelakang bagi objek (teks, imej ..etc).
DIRECTION="left/right/up/down" → untuk setkan arah pergerakan objek samada kiri, kanan, atas atau bawah.
BEHAVIOR="scroll/slide/alternate" → untuk setkan jenis pergerakan objek.
Scroll → objek bergerak secara pusingan.
Slide → objek akan bergerak kemudian berhenti seketika dan seterusnya.
Alternate → objek bergerak dari kiri ke kanan dan kembali semula ke kiri dan seterusnya.
TITLE='message" → objek akan berhenti apabila cursor ditunjuk kepada objek.
SCROLLMOUNT="number" → untuk setkan kelajuan marquee, lebih besar nombornya maka lebih cepat kelajuannya.
WIDTH="number" → untuk setkan lebar marquee dan ianya dalam unit picel(px) atau persen(%).
Cuba kita lihat beberapa contoh di bawah.
Dapatkan codingnya di sini.
Dapatkan codingnya di sini.
Dapatkan codingnya di sini.
Untuk menghasilkan kesan-kesan marquee seperti di atas, sila ikuti langkah-langkah seperti sebelum ini iaitu ;
1. Sila copy coding pada link yang disediakan.
2. Seterusnya, login ke blogger.com menggunakan ID anda.
3. Pilih layout --> Add a Gadget --> HTML/JavaScript --> paste coding yang berkenaan --> save --> view blog dan lihatkan hasilnya!. Selamat mencuba dan jumpa lagi.
Bagaimana membuat scroll text
Anda ingin tahu bagaimana untuk membuat scroll text seperti demo di bawah?
Ikuti langkah-langkah mudah seperti di bawah.
1. Sila klik di sini untuk mendapatkan codingnya.
2. Seterusnya, login ke blogger.com menggunakan ID anda
3. Pilih layout --> Add a Gadget --> HTML/JavaScript --> copy paste coding yang berkenaan --> save --> view blog dan lihatkan hasilnya!. Selamat mencuba dan jumpa lagi.
Ikuti langkah-langkah mudah seperti di bawah.
1. Sila klik di sini untuk mendapatkan codingnya.
2. Seterusnya, login ke blogger.com menggunakan ID anda
3. Pilih layout --> Add a Gadget --> HTML/JavaScript --> copy paste coding yang berkenaan --> save --> view blog dan lihatkan hasilnya!. Selamat mencuba dan jumpa lagi.
Bagaimana meletakkan element di bawah header
Bagaimana meletakkan element di bawah header.
Untuk meletakkan element baru di bawah header, kita perlu menambah beberapa baris kod html. Anda masih tidak jelas tentang objektif tutorial ini? Begini, struktur template yang biasa adalah seperti di bawah.
Bagaimana untuk setting blog anda
Untuk memastikan blog anda dikuasakan oleh google.com, sila setting blog anda seperti berikut.
1. Sila login ke blogger.com menggunakan ID anda.
2. Klik Setting diikuti Basic. Berikut adalah beberapa bahagian yang terdapat dalam menu Basic:
o Title : Tajuk blog anda. Contoh : My Blog For Your View.
o Description : Penerangan ringkas tentang blog anda. Contoh : Blog ini mengandungi beberapa siri tutorial berkaitan langkah-langkah membangunkan blog
o Add your blog to our listing : Pilih Yes, supaya setiap posting yang dihantar akan memasuki senarai Blogger.com.
o Show Quick Editing on your blog : Pilih Yes.
o Show Email post link : Sila pilih Yes, jika pilih No juga tidak mengapa.
o Show compose Mode for all your blog : Pilih Yes.
o Show transliteration button for your post : Pilih Yes jika anda mahukan kekunci di dalam blog diterjemahkan kepada bahasa hindi dan pilih No jika sebaliknya.
o Klik Save Settings.
o Tamat.
3. Klik Publishing untuk selaraskan menu paparan.
o Blog’Spot Address : Content with your blog address. Example : fareidah.blogspot.com
o Send Pings : Pilih Yes.
o Klik Save Settings.
o Tamat
4. Klik Formatting untuk selaraskan menu format.
o Show : Pilih bilangan post yang hendak dipaparkan pada blog. Contoh : Show : 6 post, bilangan post yang akan dipaparkan pada blog anda adalah 6 sahaja. Sila pilih Post (jangan pilih days).
o Date header Format : Sila pilih format tarikh yang dikehendaki. Format tarikh ini akan dipaparkan pada bahagian bawah post.
o Archive Index Date Format : Sila pilih format archive yang dikehendaki.
o Timestamp Format : Sila pilih format masa yang dikehendaki.
o Time Zone : Pilih zon yang sepadan dengan tempat anda.
o Language : Pilih bahasa yang dikehendaki.
o Convert line break : Pilih Yes, jika pilih No juga tidak mengapa.
o Show Link Field : Pilih No, jika pilih Yes juga tidak mengapa.
o Enable Float aligment : Pilih Yes, jika pilih No juga tidak mengapa.
o Klik Save Settings.
o Tamat.
5. Klik Comment untuk selaraskan menu komen.
o Comments : Pilih Show.
o Who Comment? Pilih Anyone. Ini bermakna sesiapa sahaja boleh memberi komen pada post anda.
o Comments Default for Post : Pilih New post Have Comments.
o Back links : Pilih Show. Ini bermakna anda mengetahui jika ada pengunjung yang membaca post anda.
o Backlinks default for Posts : Pilih New post have Backlinks.
o Show comments in a popup window? : Pilih Yes. Ini bermakna jika pengunjung klik pada Comment link ia tidak akan menghilangkan paparan blog anda.
o Show word verification for comments? : Adalah lebih baik memilih Yes.
o Enable comment moderation? : Pilih No, jika pilih Yes tidak mengapa.
o Show profile images on comments? : Pilih Yes.
o Comment Notification Address : Content with your email address.
o Klik SAVE SETTINGS.
o Tamat.
6. Klik ARCHIVING untuk selaraskan menu archiving.
o Archive Frequency : Pilih monthly.
o Enable Post Pages? : Pilih Yes.
o Klik SAVE SETTINGS.
o Tamat.
7. Klik Site Feed.
o Publish Site Feed : Pilih Yes.
o Descriptions : Pilih Full.
o Article Footer : Jika anda mempunyai advertising code seperti Google Adsense, anda boleh masukkan kod tersebut di sini.
o Klik SAVE SETTINGS.
o Tamat.
1. Sila login ke blogger.com menggunakan ID anda.
2. Klik Setting diikuti Basic. Berikut adalah beberapa bahagian yang terdapat dalam menu Basic:
o Title : Tajuk blog anda. Contoh : My Blog For Your View.
o Description : Penerangan ringkas tentang blog anda. Contoh : Blog ini mengandungi beberapa siri tutorial berkaitan langkah-langkah membangunkan blog
o Add your blog to our listing : Pilih Yes, supaya setiap posting yang dihantar akan memasuki senarai Blogger.com.
o Show Quick Editing on your blog : Pilih Yes.
o Show Email post link : Sila pilih Yes, jika pilih No juga tidak mengapa.
o Show compose Mode for all your blog : Pilih Yes.
o Show transliteration button for your post : Pilih Yes jika anda mahukan kekunci di dalam blog diterjemahkan kepada bahasa hindi dan pilih No jika sebaliknya.
o Klik Save Settings.
o Tamat.
3. Klik Publishing untuk selaraskan menu paparan.
o Blog’Spot Address : Content with your blog address. Example : fareidah.blogspot.com
o Send Pings : Pilih Yes.
o Klik Save Settings.
o Tamat
4. Klik Formatting untuk selaraskan menu format.
o Show : Pilih bilangan post yang hendak dipaparkan pada blog. Contoh : Show : 6 post, bilangan post yang akan dipaparkan pada blog anda adalah 6 sahaja. Sila pilih Post (jangan pilih days).
o Date header Format : Sila pilih format tarikh yang dikehendaki. Format tarikh ini akan dipaparkan pada bahagian bawah post.
o Archive Index Date Format : Sila pilih format archive yang dikehendaki.
o Timestamp Format : Sila pilih format masa yang dikehendaki.
o Time Zone : Pilih zon yang sepadan dengan tempat anda.
o Language : Pilih bahasa yang dikehendaki.
o Convert line break : Pilih Yes, jika pilih No juga tidak mengapa.
o Show Link Field : Pilih No, jika pilih Yes juga tidak mengapa.
o Enable Float aligment : Pilih Yes, jika pilih No juga tidak mengapa.
o Klik Save Settings.
o Tamat.
5. Klik Comment untuk selaraskan menu komen.
o Comments : Pilih Show.
o Who Comment? Pilih Anyone. Ini bermakna sesiapa sahaja boleh memberi komen pada post anda.
o Comments Default for Post : Pilih New post Have Comments.
o Back links : Pilih Show. Ini bermakna anda mengetahui jika ada pengunjung yang membaca post anda.
o Backlinks default for Posts : Pilih New post have Backlinks.
o Show comments in a popup window? : Pilih Yes. Ini bermakna jika pengunjung klik pada Comment link ia tidak akan menghilangkan paparan blog anda.
o Show word verification for comments? : Adalah lebih baik memilih Yes.
o Enable comment moderation? : Pilih No, jika pilih Yes tidak mengapa.
o Show profile images on comments? : Pilih Yes.
o Comment Notification Address : Content with your email address.
o Klik SAVE SETTINGS.
o Tamat.
6. Klik ARCHIVING untuk selaraskan menu archiving.
o Archive Frequency : Pilih monthly.
o Enable Post Pages? : Pilih Yes.
o Klik SAVE SETTINGS.
o Tamat.
7. Klik Site Feed.
o Publish Site Feed : Pilih Yes.
o Descriptions : Pilih Full.
o Article Footer : Jika anda mempunyai advertising code seperti Google Adsense, anda boleh masukkan kod tersebut di sini.
o Klik SAVE SETTINGS.
o Tamat.
Subscribe to:
Posts (Atom)
