Tutorial HTML/JavaScripts

Tutorial ni special aku nak share kat kawan², dalam banyak² Gadget, HTML/JavaScript adalah yang paling banyak fungsi digunakan seperti meletakkan Jam, Kalender, Gambar, Link, Counter, Games, Iklan @ Ads, ShoutBox (Chat) dan lain-lain. Disini aku nak share code html yang yang aku belajar sebelum ni untuk pelbagaikan lagi widget pada bahagian sidebar, footer dan header di dalam blog.

Cara memasukkan HTML/JavaScripts

1. Login ke ID Blogger atau terus ke "Dashboard"
2. Klik "Layout" dan terus Masuk di Bahagian "Page Elements"

3. Pilih "Add a Gadget" dan pilih "HTML/JavaScripts" dengan klik butang seperti gambar di bawah.

Contoh Memasukkan Code Gambar pada HRML/JavaScript:

code center untuk meletakkan gambar pada tengah² gadget dan code width (lebar) serta height (tinggi) untuk ukuran size gambar, masukan code gambar seperti dibawah ini

<center><img width="lebar" src="url gambar" height="tinggi" /></center>

anda boleh menyimpan gambar (upload) anda di photobucket atau imageshack (free image host)

Tamabahan

untuk membuat link pada gambar/text tambahkan code sperti ini sebelum code gambar

<center><a href="link web" target="_blank">Text atau Code Gambar</a></center>

apabila gambar di klik akan terus terbuka new tab untuk link yang diletak pada link web. jika tidak inginkan new dan inginkan window yang sama hanya padam code target="_blank di dalam kotak di atas.

URL Berguna Untuk HTML/JavaScript
Shoutbox - Code Shotbox Chat
CBox - Code CBox Chat
Photobucket - Tempat menyimpan gambar
Clocklink - Code Jam
Hit Counter - Code Counter
Al-Habib - Code Kalender Islam, Jam dll
My Flashfetish - Code Muzik

Congrats Qis

Semalam Aku and My Wife berkunjung ke Seremban rumah sahabat Forum kami Qis yang telah selamat melahirkan cahaya mata perempuan. Kami buat kunjungan beramai² dengan Keluarga Red & Lie, Kak Ain & Abg Jiman, Dr. Ayam dan Wife, dan jugak Kak Jue n Husband. seronok rasanya dapat berkumpul beramai² ni, biasanya pok pek pok pek kat Sembang Shoutbox (SS) dan kali ni warga sembang rumahtangga dot net (SRT) dapat berkumpul ramai² plak, Qis selamat melahirkan baby gurl pada 18.03.2009 "Nur Damia Afrina" ahaks... Sedap nama tu... meh kita ikuti sedutan sepanjang berada di sana

kroohh... zzZZZzzzZZZ heuheuheu budak kecik mana ada dengkur laa comel jer...

Me, My Wife & Nur Damia Afrina elelele... Comilnya.... zzzzz aku takde gambar yang terdekat... nanti aku cilok kat SS

Yang ni takde kena mengena.. tapi ini laa wajah² family Qis, husband dan anaknya masa aku kawen dulu...

Red & Lie... And.. Yasmeen!!!!!!!!! dah besar meen....

Santai... Kapten Jiman dengan anak² & Dr. Ayam

Kak Jue... And Baby Kak Ain Ashsraf

Alahai.. gambar itu jer? adoi!!! tak cukup laaa!!! tunggu aku cilok kat Kak Ain pulak :P yang ni aku cilok kat Lie :D

Update: ok dah dpt 2 keping gambar kat atas :D

Tutorial 3 COLUMN

Bagaimana nak buat blog 3 column? (macam blog aku) ini stepnya, tapi sebelum nak start buat 3 column pastikan anda buat backup (Download full template) dulu sebelum memulakan penambahan ini kerana jika ada perkara yang tidak diingin berlaku anda masih boleh upload balek template lama. dan gunakan Ctrl + F untuk memudahkan mencarik code.

1. Login ko Blog ID atau Dashboard

2. Masuk pada "Layout" dan terus ke Edit HTML tak perlu tanda "Expand Widget Templates".

3. Sekarang carik code seperti dibawah ini :

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

4. kemudian copy dan paste kod tulisan merah dibawah ini pada sebelah bawah kod di atas :

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Copy dan paste code merah seperti gambar kat atas ni

5. kemudian carik code kat bawah ni :
<div id='main-wrapper'>

6. bila dah jumpa code seperti diatas ambil code dibawah ni copy dan paste atas pada code tesebut :

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Copy dan paste seperti gambar diatas.

7. bia dah selesai carik code ini dan tukarkan kepada tulisan merah :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <-- tukarkan kepada 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

8. Kemudian "Save Template" dan anda septutnya boleh melihat Sidebar disebelah kiri dan kanan seperti gambar dibawah ini :

Sidebar kiri dan kanan

9. Last sekali carik code bawah ni dan tukar sikit atau tambah seperti tulisan merah dan akhir sekali save.

#main-wrapper {
width: 410px;
margin-left: 10px; <-- tambahkan code
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

10. Settle!~!~!~

Tambahan

Jika inginkan kelebaran pada bahagian post entry anda boleh mengubah "width" #main-wrapper dan wajib dikuti dengan "width" pada #outer-wrapper (Kelebaran column).

#main-wrapper {
width: 410px; <-- tambah kelebaran post entry 440 (+30)
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

dan wajib menambah lebar pada #outer-wrapper

#outer-wrapper {
width: 880px; <-- +30 = width menjadi 920px
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Nota : Tutorial ini adalah tutorial asas untuk default template minima, bagi template yang lain kemungkinan berlaku kelainan code dan anda perlu berhati² sebelum membuat pengubahan.

Tutorial SIDE BAR @ GADGET

Kali ni aku nak terangkan mengenai tutorial SIDE BAR, SIDE BAR adalah widget sisi di antara isi pada posting, kebiasaannya sidebar pada template biasa (Default) hanya mempunyai satu sidebar dan template yang di upload atau ditambah kepada 3 column akan memiliki 2 sidebar di kiri dan kanan. sidebar memainkan peranan pelbagai fungsi yang dimana anda boleh menambah Gadget yang sedia ada atau menambah apa sahaja widget kesukaan anda.

"Pandangan Sidebar pada blog"

Pandangan Sidebar pada "LAYOUT"

Untuk menambahkan widget pada tepi tu anda perlu mengikuti langkah ini

1. Log masuk ke ID Blogger atau terus ke "Dashboard"
2. Pegi "Layout" automatik truss ke "Page Elements" dan Klik "Add a gadget" pada bahagian tepi blog posting seperti bulatan merah dalam gambar di bawah.

setelah klik pada "Add a Gadget" window seperti dibawah ini akan keluar

Anda boleh memilih pelbagai gadget yang anda suka dengan klik + untuk dimuatkan dibahagian sidebar blog, berikut ada contoh² Gadget Basic yang biasa digunakan.

Followers - Memudahkan pengjunjung mengikuti blog
Blog Archieve - Memaparkan entry blog yang terdahulu
Label - Memaparkan bilangan post entry anda mengikut label yang anda tandakan.
Profile - Profail anda.
Blog List - Memaparkan blog² kawan atau mana² blog yang anda ikuti.
Picture - Meletakkan gambar kesukaan anda pada tepi blog.
Poll - Membuat Undian mengenai apa² sahaja soalan dan jawapan yang anda berikan.
HTML/Javascrip - Untuk meletakkan widget seperti Jam, Hit Counter, Games dan lain-lain.

pelbagai gadget lagi yang anda boleh muatkan selain daripada Gadget Basic seperti Featured, Most Popular, Newest, dan lain-lain.

Anda juga boleh mengubah kedudukan tajuk tulisan pada sidebar dari kiri ke tengah atau ke kanan dan meletakkan background daripada kosong kepada warna dengan mengubah/edit pada template.

cari kod seperti dibawah dan tambah seperti code yang bewarna merah di bawah

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 12px 0px;

font-size: 105%; <-- ubah size tajuk tulisan mengikut kesesuaian
color: $sidebarTitleTextColor; <-- boleh meletakkan kod warna
text-align: centre; <-- Tajuk Gadget boleh
background: url('url gambar background atau kod warna') #FFFFFF ;
background-repeat:no-repeat;
background-position:center;

}

Ok settle :P sebarang pertanyaan boleh komen kat sini.. atau YM aku kalau online.

MAYSYDA = ADYSYAM

Heuheuheu... Ramai ingat aku pompuan zzzzzzzz!!! aku lelaki laaa... adess.. tulen!!! telah berumahtangga... Aku letak link blog aku maysyda sebab nama ni aku dapat ilham after aku terbalekkan nama sebenar aku, bunyik macam perempuan dan tiada makna pun (huh!), tapi aku teringin nak letak nama bakal anak perempuan aku Nur Maysyda Mujahidah ngeee :P angan² tu... sedap ke nama tu? cuba baca full name plak... Nur Maysyda Mujahidah binti Ady Syam pergghh!!!! sabar.. sabar.. my wife pun baru mengandung 13 minggu tak tau lagik lelaki ker pompuan... untukmu sayang... sabar ek... sekarang dah nak bulan 4... pejam celik pejam celik... Insyallah baby kita akan selamat dan sihat dilahirkan. Huhuhuhu nervous nak jadik Abah ni :P... Rasa cam percaya tak plak... apapun syukur alhamdulillah... tak sabar nak tunggu baby keluar, rasa macam baru seminggu jer habis nikah ngeee :P... aku tepek gambar aksi superman yang aku cilok dari blog my wife kat sebelah ni, jangan terkezut huehuehue....

Minggu ni aku bz buat tutorial blogger request dari kawan²... aku tak lah pro sangat tapi Insyallah aku akan buat yang terbaik, kepada kawan² yang ada masalah tentang blog boleh refer kat aku Insyallah aku akan tolong setakat yang aku mampu. Oh ya malam ni adalah Hari Bumi (Earth Hour) dah ready bergelapan untuk sejam? ngeee... best! best! ok laaa hujung minggu ni tersangat laa free... aku try buat tutorial background plak lepas ni... sebab ada kawan² nak belajar letak gambar kat belakang background blog... oklah... see yaa!!!

Tutorial BACKGROUND

Request dari kawan² nak letak gambar kat belakang background, so kat sini aku terangkan Tutorial BACKGROUND dengan gambar preview sekalik, so apa yang perlu korang buat ikut langkah² seperti kat bawah ni tapi sebelum memulakan penukaran sila save template blog korang (Backup) untuk keselamatan.

1. Log masuk ke ID Blogger korang atau terus ke "Dashboard"
2. Pegi "Layout" dan terus klik pada "Edit HTML"
3. Kemudian pada bahagian "Edit HTML" carik code seperi kat bawah ni (gunakan Ctrl+F kalau nak senang carik) kemudian letakkan code merah seperti gambar di bawah ni

*copy code warna merah kat bawah ni dan paste seperti dalam gambar di bawah, ingat kena carik yang ada body { lepas tu baru paste kat bawah macam gambar kat bawah ni

background-image: url('masukan url gambar korang');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Nota : biasanya background-color mengikut code tertentu, bagi sesetengah default blog, code warna ada yang seperti $bgcolor dan #FFFFFF, so kalau $bgcolor tu korang leh padam dan gantikan dengan code warna yang menggunakan code #FFFFFF so kalau korang nak tau warna code kaler tu boleh rujuk kat sini.

Tambahan
background-posisiton adalah code kedudukan gambar backround pada blog korang, kalau nak letak tengah² so code dia adeh... payah nak terangkan ni ok rujuk kat bawah ni

background-posistion:center center;
Gambar berada di tengah² pada blog blog

background-posistion:center left;
Gambar berada dibahagian tengah di sebelah kiri blog

background-posistion:center right;
Gambar berada dibahagian tengah di sebelah kanan blog

background-posistion:bottom center;
Gambar berada di bahagian bawah tengah blog

background-posistion:bottom left;
Gambar berada dibahagian bawah sebelah kiri blog

background-posistion:botoom right;
Gambar berada dibahagian bawah sebelah kanan blog

background-posistion:top center;
Gambar berada dibahagian atas di tengah² blog

background-posistion:top left;
Gambar berada dibahagian atas di sebelah kiri blog

background-posistion:top right;
Gambar berada dibahagian atas di sebelah kanan blog

Contoh Code background-posistion:center center; seperti kat bawah ni

pergghh... cantik jer blog kat atas tu kan heuheuheu (promosi) susah jugakkan... tapi itu jerlah cara² nak letak BACKGROUND pada blog, dah habis :P... kalau ada apa² masalah korang boleh kontek aku :D settle!!

Eric Santos - It Might Be You

Sederhana Itu Indah

<center><a href="http://ady.via.my/2009/07/lagu-dan-lirik.html" target="_blank"><img src="http://i278.photobucket.com/albums/kk115/jiwangzz/siimuzik.gif" /><br /><img src="http://i278.photobucket.com/albums/kk115/jiwangzz/siimuzik2.gif" /><br /><embed src="http://www.hugedrive.com/published/WG/show.php?q=U0lJTVVaSUs=-7102e07f&mode=preview&file=NDc1" AUTOSTART="TRUE" LOOP="TRUE" width="0" align="center" height="0"></embed><font size="1"><b>Sederhana Itu Indah</a></b></font></center>

Lirik Lagu : Eric Santos - It Might Be You

Time...
Ive been passing time wathing trains go by,
All of my life...
Lying on the sand, watching seabirds fly
Wishing there would be
Someone waiting home for me...

(Chorus)
Somethings telling me it might be you
Its telling me it migt be you...
All of my life...

Looking backas lovers go walking past...
All of my life...
Wondering how they met and what makes it last
If I found the place
Would I recognize the face?

(Chorus)
Somethings telling me it might be you
Its telling me it migt be you...
All of my life...

(Bridge)
So many quiet walks to take
So many dreams to wake
And weve so much love to make
I think were gonna need some time
Maybe all we need is time...
And its telling me it might be you
All of my life...

Ive been saving love songs and lullabies
And theres so much more
No ones ever heard before...

(Chorus)
Somethings telling me it might be you
Its telling me it migt be you...
All of my life...

(x3)
Maybe its you...
Maybe its you...
Ive been waiting for all of my life

Tutorial HEADER

Kali ni aku nak buat Tutorial HEADER sebab ada kawan² request camana nak letak HEADER pada blog. Korang boleh design header ikut citarasa korang dengan menggunakan photoshop , photoscap dan lain² software lagik kalau nak aku designkan.. boleh... janji ada pengeras :P. Terdapat 2 langkah bagaimana nak letakkan HEADER pada Blog yang mana langkah pertama adalah langkah asas kepada new blogger dan kalau nak try langkah kedua pun boleh, panduannya seperti kat bawah ni.

Nota Penting : save template korang (backup) untuk keselamatan sebelum memulakan penukaran bagi mengelakkan sebarang perkara yang tidak di ingini. Karang apa² jadi korang boleh upload balek.


Langkah Pertama

1. Log masuk ke ID Blogger korang atau terus pegi "Dashboard"
2. klik pada "Layout" dan terus ke "Page Element"

3. Lepas tu klik edit pada bahagian "(Header)" seperti contoh kat bawah ni

4. Bila dah Keluar "Configure Header" korang klik kat "Browse" dan carik HEADER atau gambar yang korang nak letak dan pastikan kat "Placement" korang tandakan betul².*Behind title and description - Gambar yang korang upload akan berada di belakang dan tulisan akan keluar kedepan, maksudnya tajuk blog korang boleh nampak .

*Instead of title and description - HEADER atau Gambar korang akan keluar dengan gambar yang korang upload tanpa sebarang tajuk blog keluar, maksudnya Tajuk pada blog korang akan tersorok.

*Shrink to fit - kalau tandakan yang ini HEADER korang akan mengikut kesesuaian lebar dan panjang pada gambar yang korang upload. biasanya orang akan gunakan kecuali terdapat masalah pada template dan perlu diubah.

5. Bila dah settle semua.. apa lagik.. "Save" Laa... :P


Langkah Kedua

Langkah kedua ni adalah melalui "Edit HTML". Bagi mereka yang mempunyai HEADER yang di upload melalui internet seperti kat web hosting atau image hosting (Photobucket, ImageShack DLL) sesuai menggunakan langkah ini. Rata² template yang di download @ upload mempunyai Header yang terletak di bahagian ini.

1. Log masuk ke ID Blogger korang atau terus ke "Dashboard"
2. Pegi "Layout" dan terus klik pada "Edit HTML"
3. Kemudian bila dah keluar carik code seperi kat bawah ni, bila dah jumpa tambahkan code yang seperti di bawah yang dalam kotak merah seperti dibawah. (Gunakan Ctrl+F kalau nak senang carik) Bagi yang dah tersedia ada just padam URL Header tersebut dan letakkan URL HEADER Korang atau biarkan jer kosong dan korang boleh letak header dengan menggunakan Langkah Pertama tadi. (Kadang² URL tu takde kat #header so carik kat #header-wraper)

Copy dan Paste code bawah ni kat blog korang bila dah jumpa #header tu
background: url('Masukkan URL Header Disni') background-repeat: norepeat; background-position: center;
4. Ok Settle! itu jer :P

Nota : Jika Header korang senget ker, keluar dari sasaran ker, dan lain² masalah, korang kena adjust kat template, rata² blog asas tidak ada masalah begini selepas menggunakan langkah pertama, tapi langkah yang kedua kadang² akan terjadi kes begini so korang kena edit pada template dengan berhati² dan dinasihatkat agar membuat backup sebelum memulakan penukaran.

Pet Society

Siapa ada facebook? add me!!!! mari kita main Pet Society, after tengok my wife main, aku pun teringin lah nak main sama.. tup² aku dah melekat heuheuheu... tiap² pagi musti layan, game ni lebih kurang game² digimon dulu² yang budak² selalu bawak lepas tu cantumkan untuk berlawan, tapi yang ni takde lawan², aku suka main game ni sebab utama "Free Online Game" dan 2nd It Very Very Cute!!!! bagi dia mandi.. bagi dia makan... pegi stadium lumba lari... ziarah rumah kawan²... dapat duit pulak tu... lepas tu dia bagi umah.. dalam umah tu pulak boleh design sendiri, beli perabot, barang dapur, baju, kasut, topi.. huahuahuahua!!! sounds like memang game budak² tapi korang nak tau? more then 80 thousand player daripada facebook adalah orang yang dah boleh jadi bapak budak :P. Kalau korang layan add aku yaa! adysyam2001@yahoo.com

Home Sweet Home.. Kat Dinding siap tepek blog url lagik :P

Tido.... cute jer dia tido... ah tengok piala² yang aku dah collect... ada berani?

Kemesraan berziarah... lawat mana² kawan buleh dpt coins

shopping time!!! erks!!! coins aku tinggal 69... huhuhuhu

dalam stadium... buleh, ikut pertandingan.. nak practice... dan BET pun buleh :P

Jangan usha profile aku memang takde ape² pun, myspace ngan friendster pun dah jarang aku bukak... ni kan pulak facebook... tapi layan facebook sebab nak layan Pet Society jer, aku tepek sikit² gambar pet aku.. nama dia Jessica Alba... :P huheuhuehue "gatal" Beliau berwarna hijau lite... cute memang cute macam tuan dia jugak :P huahuahauhaua!!

Tutorial NUFFNANG

Apa Itu NUFFNANG? nak tahu bukak laa http://www.nuffang.com.my ngeee... :P Ok aku cuba terangkan serba sedikit apa yang aku tahu mengenai NUFFNANG ni. NUFFNANG adalah syarikat pengiklanan berbayar dalam web, syarikat NUFFNANG ni banyak mengiklankan produk² antarabangsa daripada syarikat gergasi Citibank, Honda, Walls, AirAsia, Nokia, Nike, Nescafe, Twisties dan lain-lain. Oleh Itu NUFFNANG menganjurkan kepada blogger untuk ikut serta mengiklankan produk² pengiklanan mereka, kepada para blogger yang berminat nak buat side income atau pun saja² sebab nak amek poll dia yang menarik bolehlah register NUFFNANG ni kat http://www.nuffnang.com.my/blogger-registration.

Bila dah register, kat sini aku terangkan cara-cara masukan iklan nuffnang ke dalam blog korang.

Terdapat 2 bahagian nak masukkan iklan NUFFNANG ke dalam blog korang

1. Daftar (Register Nuffnang)
2. Copy & Paste Code Kedalam Blog

Bahagian 1 : Daftar (Register Nuffnang)

Bila dah daftar korang akan nampak website seperti di bawah ni, klik gambar kalau nak lebih besar. Eh dah 30 hengget NUFFNANGku :P

Langkah Pertama

masukkan nama dan blog url korang dulu, seperti gambar kat bawah ni dan klik! "Click here for more menu items"

Langkah Kedua

Kemudian Klik "BLOG MANAGER" untuk memasukkan nama dan blog url korang

Langkah Ketiga

Kat "BLOG MANAGER" scroll ke bawah sekali dan masukkan nama dan blog url korang dan klik button Add New Blog seperti di bawah ini.

Bila dah Add korang kena buat survay. bila survay dan settle? Tahniah pada diri korang kerana telah menjadi keluarga NUFFNANG, bahagian 1 dah settle ok kita masuk bahagian 2 pulak, macam mana masukkan iklan nuffnang ke dalam blog korang.

Bahagian 2 : Copy & Paste Code Kedalam Blog

Sebelum memulakan acara copy & paste, anda dinasihatkan supaya tick "Expand Widget Templates" dan melakukan "Ctrl + F" untuk memudahkan copy & paste

Langkah Pertama

Mula² pegi "ADD AD" dan scroll kebawah anda akan nampak code² yang perlu di copy paste ke dalam blog korang

Langkah Kedua

"To put on header" code ini untuk iklan pada bahagian atas header di dalam blog, korang kena copy code tersebut dan paste kedalam Dashboard > Layout > Edit HTML seperti dibawah

Tulisan merah adalah code yang di copy & paste, untuk mencarik kedudukan ini anda dinasihati menggunakan "Ctrl + F" "Find" @ Memudahkan mencari kedudukan sebelum copy & paste.

Langkah Ketiga

"To put on side bar" ini code paling kacang ngee :P... Add a Gadget > HTML/Javascript kemudian paste jer nak gambar rajah jugak ker? code ni untuk iklan bahagian tepi blog.

Langkah Keempat

"To put on between contents" code ni mencabar sikit, korang takkan jumpa code ni kalau korang tak tanda pada "Expand Widget Templates" seperti kat bawah ni, fungsi code ni adalah iklan antara posting korang.. so setiap kali korang buat posting baru, kat bawah post tersebut akan keluar iklan ni.

Kemudian cari code seperti dibawah ni pulak dan paste code seperti tulisan merah

Langkah KeLapan Belas

18 Tue!!! ader lagik ker? ini nasihat aku, korang kena buat semua copy paste tu betul² supaya iklan² tersebut boleh berfungsi dengan baik, 3 jenis iklan tersebut mustilah di pasang dengan betul dan kalau korang pasang 1 atau 2 jer bermaksud lambat laa ke"masyuk"kan yang korang terima. Iklan² terpampang secara rawak, so kadang² muncul kadang² tak, so kalau tak keluar paham² jer laaa. Untuk beginner korang dapat keahlian biasa (non ekslusif) tapi bila korang buat betul² dan TIDAK meletakkan mana² advertise yang lain anda berpeluang menjadi membership Glitterati yang mana kadar ke"masyuk"kan korang menjadi tinggi bila ramai pengunjung dan ramai yang klik! klik!.

Ok habis... Enjoy!!! kalau ada apa² kemusykilan sila kontek aku :D...

Tutorial HTML

HTML bermaksud "HyperText Mark-up Language" nak tahu dalam bahasa melayu carik sendiri :P, kat sini aku nak terangkan kod asas html yang selalu digunakan dalam blogger. Kod² HTML ni boleh digunakan untuk highlight, amaran, mencantikan dll dalam posting atau gadget.

Nak guna kod HTML ni musti ada kata pembukak dan kata penutup seperti < > (kod pembuka) dan < / > kod penutup. So jangan lupa kod penutup bila dah guna, kalau tidak... try laa buat dan tengok sendiri :P

berikut adalah contoh² code HTML dalam tutorial yang aku nak share kat korang :-

BLINK
<blink>TESTING</blink>TESTING
blink! blink! :P kelip! kelip!


MARQUEE
<marquee>TESTING</marquee>TESTING
Code asas marquee.


<marquee direction="right" scrollamount="50" behavior="scroll" height="20">TESTING</marquee>
TESTING

code marquee dengan arah "direction" anda boleh pilih samada dari kiri, kanan, atas, atau bawah untuk permulaan pergerakan dan "scrollamount" untuk kelajuan.

<marquee direction="left" width="50%">TESTING</marquee><marquee direction="right" width="50%">TESTING</marquee>TESTINGTESTING
Pergerakan dua arah bertentangan dalam masa yang sama dengan membahagikan keleberan "width" kepada 50% dan arah "direction" kiri dan kanan.


<marquee direction="left" scrollamount="50" onmouseout="this.start()" onmouseover="this.stop()">TESTING</marquee>TESTING

"Onmouseout" dan "onmouseover" untuk memberhentikan pergerakan menggunakan mouse, sentuh arrow mouse anda untuk berhentikan pergerakan marquee.

<center><marquee direction="up" scrollamount="3" onmouseout="this.start()" onmouseover="this.stop()">TESTING</marquee></center>
TESTING

Center ditambah untuk meletakan TESTING di tengah² dan scrollamaount berfungsi sebagai kelajuan turun naik.

OK html setakat ni jer kalau ada apa² persoalan bolehlah tinggalkan komen di entry ini :)

Penambahan
Kalau nak tukar text kepada gambar pun boleh cuma gantikan TESTING kepada
<img src="masukkan URL gambar disini" />

Contoh :

OK html setakat ni jer kalau ada apa² persoalan bolehlah tinggalkan komen di entry ini :)

Mestica Ft. Munif Hijjaz - Puteriku Sayang

Sederhana Itu Indah

<center><a href="http://ady.via.my/2009/07/lagu-dan-lirik.html" target="_blank"><img src="http://www.buspowersystems.com/jiwangzz/siimuzik.gif" /><br /><img src="http://www.buspowersystems.com/jiwangzz/siimuzik2.gif" /><br /><embed src="http://www.hugedrive.com/published/WG/show.php?q=U0lJTVVaSUs=-6070d900&mode=preview&file=NzM3" AUTOSTART="TRUE" LOOP="TRUE" width="0" align="center" height="0"></embed><font size="1"><b>Sederhana Itu Indah</a></b></font></center>

Katy Perry - Thinking Of You

Sederhana Itu Indah

<center><a href="http://ady.via.my/2009/07/lagu-dan-lirik.html" target="_blank"><img src="http://i278.photobucket.com/albums/kk115/jiwangzz/siimuzik.gif" /><br /><img src="http://i278.photobucket.com/albums/kk115/jiwangzz/siimuzik2.gif" /><br /><embed src="http://www.hugedrive.com/published/WG/show.php?q=U0lJTVVaSUs=-6070d900&mode=preview&file=NzM2" AUTOSTART="TRUE" LOOP="TRUE" width="0" align="center" height="0"></embed><font size="1"><b>Sederhana Itu Indah</a></b></font></center>