Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

---

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

---

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

---

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

---

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

---

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

---

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

---

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

---

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

---

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :
Belajar
Namanya juga hidden..ya..ga keliatan..

---

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar

---

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

---

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4₂</p>hasilnya seperti ini:
4₂

---

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4²</p> hasilnya seperti ini:
4²

---

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

---

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar

---

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

---

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1


• DOT 2


• DOT 3

---

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:

---

Membuat tabel border solid gunakan kode:
hasilnya seperti :

Text

---

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:

Text

---

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

---

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

---

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

↑ Grab this Headline Animator

Ikuti langkah-langkah berikut ini untuk membuatnya

1. Login di Blogger > pada Dasboard pilih Layout > Edit HTML
2. Centang / Check List dulu "expand widget templates"
3. Cari kode </head> kemudian copy - paste kode di bawah ini sebelum kode tersebut

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>

<script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>

kamu juga bisa mengubah kode tersebut sesuai selera

summary_noimg = 430; kode ini untuk memotong / mengatur tinggi tanpa gambar

summary_img = 340; kode ini untuk memotong / mengatur tinggi dengan gambar

img_thumb_height = 100; kode ini untuk tinggi gambar thumbnailnya

img_thumb_width = 120; kode ini untuk lebar gambar thumbnailnya

4. Sekarang cari kode


<data:post.body/> , hati-hati ya bagi yang sudah memakai read more yg tidak otomatis, biasanya ada dua kode yang seperti itu, jadi pilih yang pertama. Klo Udah ketemu copy - paste kode berikut lalu ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>


<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");

</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>


</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

tulisan read more disana bisa kamu ganti sesuai keinginan. gmn..? sudah blom.?? Hm..klo sudah di SAVE ya..!!!

Sekarang coba liat Blog kamu pasti jadi lebih menarik dan tidak repot lagi klo mo posting. ^_ ^

Trus Bagai mana dengan yang udah pakai read more yang lama?? gman cara ganti dengan read more otomatis ini??
Nah kode yang read more yang lama kan seperti ini (setiap template boleh jadi berbeda lho, jadi hati-hati ya)

<div class='post-header-line-1'/>

<div class='post-body entry-conten'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>

</b:if>

lalu hapus kode yang di tebalkan kemudian ikuti langkah 1 sampai 4.
smoga bermanfaat, jangan lupa kritik dan sarannya dengan mengisi kotak komentar hehehe...
sumber : http://hitsuke.blogspot.com/2009/08/membuat-read-more-otomatis.html

↑ Grab this Headline Animator

↑ Grab this Headline Animator