Monday, June 8, 2020

Tutorial 2: Cara Buat Profile Sendiri di Blog



Assalamualaikum & Hi

Untuk bulan Jun punya tutorial, memandangkan ada kawan request untuk buat profile macam Nadia buat ni. Jadi kita kedapankan terus tutorial bahagian ini.Ceh. Buat profile macam ni Nadia hanya menggunakan HTML dan CSS. Eh apa tu ? Language untuk website . Jangan pening-pening, Nadia akan ajar step by step okay !


CARA DAPATKAN URL GAMBAR

Baiklah sebelum kita mulakan letak profile sendiri dalam blog kita, kita kena ada dulu url gambar, gambar tak boleh upload upload gitu je,

1. Pergi ke imgbb

2. Upload gambar dan pilih Don't Auto delete



3. Pilih HTML full linked dan copy semua code dan paste ke tempat lain dahulu.



4. Bila dah paste ke tempat lain tu, padam yang tak berkenaan. Simpan yang Nadia highlight kan ni.

<a href="https://ibb.co/2jQdccH">
<img src="https://i.ibb.co/BgxBTTF/b6c4ba8033ba50e9bfcc19958becdbdfba8d0172r1-1000-1250v2-hq.jpg"
alt="b6c4ba8033ba50e9bfcc19958becdbdfba8d0172r1-1000-1250v2-hq" border="0"></a>
Copy Code Warna Hijau SAHAJA, yang lain boleh padam

Sekian untuk part ini.


EDIT CODE


1. copy semua code bawah ini terlebih dahulu dan letak dekat mana mana (notepad, words dan apa apa sahaja platform sebab kita nak edit )

<!--Url Image : Bahagian letak gambar -->
    <center> <img  style="border: solid 2px #000000; border-radius:50%;" src="URL IMAGE"
height ="90" width="50" ></center>
    <!--Nama dan ayat ayat yang anda nak letak-->
<center><p><b>Nadia Jamhari</b><br>
Ayat anda<br>
Ayat Anda<br>
Ayat Anda<br></p></center>

<!--Contact ikut apa yang awak nak letak-->
<center><b>Contact me:</b></center><br />
<center><a href="url profile twitter"><img height="30"
            src="url image " width="30"></a> 
        <a href="url profile instagram"><img height="30"
            src="url image" width="30"></a>
        <a href="mailto: email address"><img  height="30"
            src="url image" width="30"></a></center><br>

2. Edit

a.  URL IMAGE : tukar dengan url yang dah belajar dekat atas tadi dan gambar icon social media comel macam Nadia boleh cari di flat icon.

b.  CODE WARNA : yang ni maksudnya warna border . Code warna boleh tengok di : HTML Color Code dan ambil yang kat kotak HEX.

c. URL SOCIAL MEDIA : yang ni tukar kepada link social media awak awak semua ye (ubah warna kuning sahaja).

d.  border-radius:50%;:untuk bahagian ini ialah menghasilkan border bentuk bulat macam Nadia punya. Bagi yang taknak bulat boleh padam je code ni. Bagi yang nak, boleh guna. Tetapi ada dua benda kena tahu.
  • Tak semua gambar sesuai dengan radius 50%. 
  • Kalau tak sesuai sila gantikan 50% dengan 1px dan ke atas (Maknanya korang boleh try sampai nombor mana sesuai okay, Sellalu start dengan 5px ke atas)           
e. okay ayat anda replace yang awak nak, kalau nak tambah pastikan ending dia <br> (maksud dia breakline - new line)

f. Bahagian height and width awak semua boleh tukar ikut kesesuai (Cuba sehingga berjaya)


Extra : sekiranya macam taknak lah letak icon untuk social media boleh padam code

<img height="30" src="url image" width="30">

dan gantikan dengan perkataan "Twitter, Instagram, Facebook dan sebagainya"


CARA LETAK KAN CODE DALAM BLOG




1. Buka blogger dan pergi ke layout.


2. Tekan Add a Gadget dan cari HTML/JavaScript 


3. Tulis tittle dan paste kan code yang telah diedit pada bahagian content


Selamat Mencuba!


Kalau anda cuba sila comment tau !
Kalau ada sebarang masalah pun boleh comment, InsyaAllah Nadia akan cuba tolong.
Sekiranya ada sebarang permintaan boleh bagitahu dekat comment! 


Pada siapa yang menggunakan tutorial blog dari Nadia, diminta untuk credit ya! Boleh lihat di Cara Untuk Letak Credit 

17 comments:

  1. great tutorial. it's like im refreshing a little bit of what i know.

    ReplyDelete
  2. Nice, simple and straight forward sharing!

    ReplyDelete
  3. suka belek2 coding nie..kalau ada laptop dh wt mcm2 dh..haha

    ReplyDelete
    Replies
    1. Tulah, Nadia tengah tunggu habiskan final ni memang nak godek lagi dan godek hehe

      Delete
  4. ok bab code lemah betul kaella nak buat. tapi nanti kena try. nak edit baru nanti hihi thankyou tutorial.

    ReplyDelete
    Replies
    1. Selamat mencuba, kalau ada apa apa problem boleh bagi tahu dekat sini :)

      Delete
  5. Thank you for the tutorial, baru tahu pasal igmbb tu! Senang laa nak dapat url image lepas ni.

    ReplyDelete
  6. Boleh slow2 cuba, dulu masa blogging zaman 10 tahun lepas, cekap nak buat embed2 coding2 ni, dah lama tinggal, terkial2 balik hahah

    follow you :)

    ReplyDelete
  7. Dah lama saya cari tutorial ni. Insyallah nnti bila2 free nak buat. Hehehe

    ReplyDelete
  8. Hello!! Sayalah kawan yang request tu xD Nadia!! Aku dah try tapi size gambar jadi kecik then aku tukar size tapi jadi tak cantik pulak tapi yang tu takpela nanti aku betulkan. Cuma... aku nak tambah satu lagi social media tapi dia jadi kat baris bawah, tak sebelah2. Help!! Thank you hehe. Yang lain semua jadi jee, tutorial yang sangat clear <3

    ReplyDelete
  9. thank you for the tutorial!!

    ReplyDelete
  10. Yayyy dah settle! thank you nadia, semua tunjuk ajar tu senang nak follow. untuk beginner yang taktau apape pun boleh belajar >< checkout my profile to see it hehe

    ReplyDelete
  11. Thanks for the info. Abe kie dah buat pun dulu cuma x secantik yg nadia buat ni. Jemput ke blog abe kie ye... www.zukidin.com

    ReplyDelete

Hi thank you for the comments, Don't forget to share your blog's URL. So I can visit, read and comment yours too !