Cara Membuat Html Kode untuk Mepercantik Blog

Terkadang kita sebagai Blogger ingin menampilkan sesuatu yang beda di blog kita baik itu lewat postingan ataupun hiasan di website kita, untuk pengguna blogger atau website yang mendukung HTML disini saya akan berbagi sedikit cara penulisan kode Html untuk mempercantik blog / website kita.

Berikut Cara penulisan kode HTML di blog anda :

---

• Cara menampilkan gambar, caranya dengan mengetik seperti di bawah ini

<img src="http:// url gambar anda"></a>

---

• Cara untuk mengubah ukuran gambar

<img src="http:// url-gambar";; width="100" height="100">

---

• Cara membuat link dengan teks

<a href="http:// url tujuan">link teks anda</a>

---

• Kode membuat Link dengan Gambar

<a href="http:// url tujuan"><img src ="http:// url gambar anda"/></a>

---

• Kode untuk membuat Garis 

<hr/>

---

• Kode html membuat Tombol

<div style="text-align:center;"><a href="http:// URL anda"><input type="submit" value="teks link anda" /></a></div>

---

• Kode untuk membuat garis berwarna

<hr style="color:red">

---

• Untuk mengatur ukuran garis

<hr style="color:#00f" width="60%">

---

• Kode html untuk garis sebelah kanan

<hr style="color:#00f" width="60%" align="right">

---

• html code garis sebelah kiri

<hr style="color:#00f" width="60%" align="left">

---

• Garis dengan background berwarna

<hr style="height:3px;background:#00f;color:#f00;">

---

• Membuat garis titik-titik

<div style="border-bottom:3px dotted #00f;"></div>

---

• Kode untuk membuat garis putus-putus

<div style="border-bottom:3px dashed #00f;"></div> 

---

• Kode HTML membuat Teks Berbayang / Shadow

<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 3px red }</style><font color="yellow"><b class="drop-shadow"><b>teks anda</b></font></b>

---

---

• Kode html membuat Paragraf

<p/>

---

• Kode membuat Baris Baru

<br/>

---

• Kode untuk Membuat teks berwarna

<span style="color:#00ffff">teks anda</span>

---

• Menjadikan Teks di tengah

<center>teks anda</center>

---

• Untuk Teks di sebelah kanan

<div style="text-align: right;"> Teks Rata Kanan </div>

---

• Kode html untuk Teks sebelah kiri

<div style="text-align: left;"> Teks Rata Kiri </div>

---

• Code membuat Daftar /bullet

Contoh :

• list1
• list2
• list3

<ul> <li>list1</li> <li>list2</li> <li>list3</li> </ul>

---

• Kode nembuat list angka / number

Contoh :

1. Item 1
2. Item 2
3. Item 3

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

---

• Membuat Teks dicoret

<s>Teks anda</s>

---

• Untuk membuat Garis bawah pada teks (underline)

<u>teks anda</u>

---

• Membuat Teks miring (italic)

<i>teks anda</i>

---

• Membuat Teks tebal (bold)

<b>teks anda</b>

---

• Kode membuat Teks mesin ketik

<tt>teks anda</tt>

---

• Membuat Teks _dibawah (Subscript)

_{Teks anda}

---

• Untuk Teks ^diatas (Superscript)

^{teks anda}

---

• Teks dengan ukuran besar

<h1>teks</h1> ukuran kecil sampai h6

---

• Kode untuk Teks ukuran besar dan berwarna warna

<font color="orange" size="15px">Teks</font> 15+ makin besar

---

• Membuat teks dengan alinea baru / baris pertama agak menjorok kedalam

<p style="text-indent:30px;">teks</p>

---

• Kode membuat teks degan background warna

<span style="background-color: #ffc1e0;">Teks</span>

---

• Kode HTML untuk Teks area

<textarea cols="15" rows="2">isi teks area </textarea>

---

• Kode teks area, dengan huruf berwarna

<textarea name="code" cols="15" rows="1" style=";color:#ff00ff;">isi teks area</textarea>

---

• Bikin Teks area dengan bordir

<textarea name="code" cols="15" rows="1" style="border:5px inset #00ffff;">isi teks area</textarea>

---

• Membuat teks area, bordir dan hurufnya berwarna

<textarea name="code" cols="15" rows="1" style="color:#ff1493;border:5px inset #9932cc;">isi teks area</textarea>

---

• Kode teks area, dengan background color

<textarea name="code" cols="15" rows="1" style="background:#ff6347;">isi teks area</textarea>

---

• Membuat teks area, background color dan bordir

<textarea name="code" cols="15" rows="1" style="background:#fa8072;border:5px inset #ff7f50;">isi teks area</textarea>

---

• Membuat teks area, background color, bordir dan huruf berwarna

<textarea name="code" cols="15" rows="1" style="background:#9932cc;color:#ff6347;border:5px inset #ff1493;">isi teks area</textarea>

---

• Kode html teks area dashed

<textarea name="code" cols="15" rows="1" style="background:#0f0;color:#295F00;border:5px #295F00 dashed;line-height:1.5em;padding:5px;">isi teks area</textarea>

---

• Bikin Teks area menjadi dotted atau titik-titik

<textarea name="code" cols="15" rows="1" style="background:#ef0090;color:#FFEFF9;border:5px dotted #FFEFF9;line-height:1.5em;padding:5px;">isi teks area</textarea>

---

• Kode untuk membuat 1 kolom

<table width="100%" border="1"><tr><td width="100%" bgcolor="green" align="center">teks</td></tr></table>

---

• Html untuk membuat 2 kolom 

<table width="100%" border="1"><tr><td width="50%" bgcolor="green" align="center">teks 1</td><td width="50%" bgcolor="green" align="center">teks 2</td></tr></table>

---

• Html Code untuk 3 kolom 

<table width="100%" border="1"><tr><td width="33%" bgcolor="green" align="center">teks 1</td><td width="34%" bgcolor="green" align="center">teks 2</td><td width="33%" bgcolor="green" align="center">teks 3</td></tr></table>

---

Share this post