Kode HTML untuk Menulis di Postingan - Pdt. Gerry Atje

    Social Items

kode html untuk menulis di postingan
KODE HTML UNTUK MENULIS DI POSTINGAN — Beberapa kode HTML ini perlu diketahui dalam rangka penulisan di blog. Saya mengumpulkannya dari berbagai sumber, beberapa saya edit lagi.

HEADING

Kode Dasar:

<h1>Heading 1</h1> s/d <h6>Heading 6</h6>

Menambahkan Style:

<h6 style="font-size:60px; color:red;">Heading 6</h6>
<h6 style="font-size:300%;">Heading 6</h6>
<h6 style="text-align:center;">Centered Heading</h6>
<h6 style="background-color:DodgerBlue;">Heading 6</h6>

<h1 style="color:blue;margin-left:30px;">Heading dengan Margin Kiri</h1>

<h1 style="text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; color:white;">Heading 1</h1>
<h1 style="text-shadow: 2px 2px;">Heading 1</h1>
<h1 style="text-shadow: 2px 2px red;">Heading 1</h1>
<h1 style="text-shadow: 2px 2px 5px red;">Heading 1</h1>
<h1 style="color: white; text-shadow: 2px 2px 4px #000000;">Heading 1</h1>
<h1 style="text-shadow: 0 0 3px #FF0000;">Heading 1</h1>
<h1 style="text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;">Heading 1</h1>
<h1 style="color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">Heading 1</h1>
<h1 style="color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Heading 1</h1>

PARAGRAF

Kode Dasar: <p></p>

Variasi:
- Jika ingin mengutip ayat Alkitab, dll dalam suatu paragraf

<p>Ayat Alkitab</p>
<pre>
   Isteri yang cakap
   lebih dari permata
   Siapakah orang yang mendapatkannya?

   Amsal 31
</pre>

-- bisa juga menggunakan kode: <code></code>

Kode lainnya:

- Memberi Kotak dengan Judul Tulisan

<fieldset>
    <legend>Amsal 31</legend>
       Isteri yang cakap lebih dari permata.
  </fieldset>

PENTING:
Jika ingin menandai sebuah paragraf dengan baris menjorok ke dalam (contoh penggunaan CSS Inline dalam postingan):

<p style="text-indent: 50px; text-align:justify; font-family:verdana; font-size:100%; color:blue;">Isteri yang cakap siapakah akan mendapatkannya? Ia lebih berharga dari pada permata. Hati suaminya percaya kepadanya, suaminya tidak akan kekurangan keuntungan. Ia berbuat baik kepada suaminya dan tidak berbuat jahat sepanjang umurnya. ... Ia mengawasi segala perbuatan rumah tangganya, makanan kemalasan tidak dimakannya. Anak-anaknya bangun, dan menyebutnya berbahagia, pula suaminya memuji dia: Banyak wanita telah berbuat baik, tetapi kau melebihi mereka semua. Kemolekan adalah bohong dan kecantikan adalah sia-sia, tetapi isteri yang takut akan TUHAN dipuji-puji.
</p>

* Style bisa diubah sesuai kebutuhan


BERAGAM EFEK TEKS

Efek Tulisan Mengetik Sendiri

<script language="JavaScript">function type(){var t=document.getElementById(destination);t&&(t.innerHTML=text.substr(0,currentChar)+"<blink>_</blink>",currentChar++,currentChar>text.length?(currentChar=1,setTimeout("type()",5e3)):setTimeout("type()",delay))}function startTyping(t,e,n){text=t,delay=e,currentChar=1,destination=n,type()}var text="INI CONTOH TULISAN EFEK MENGETIK SENDIRI DARI MBA ARLINA",delay=20,currentChar=1,destination="[none]";</script><b><div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div></b><script language="JavaScript">javascript:startTyping(text,50,"textDestination");</script>

Efek Tulisan Berapi

<span style="color: darkred; text-shadow: 0 0 2px #DC143C, 0 -5px 4px #CD5C5C, 2px -6px 6px #CD5C5C, -2px -8px 9px #f40, 2px -10px 10px #DC143C; text-decoration: none;">INI CONTOH TULISAN TEKS TAMPAK BERAPI-BERAPI WARNA MERAH DARI BLOG BIARCOOL.INFO</span>

<span style="color: darkblue; text-shadow: 0 0 2px #0000D8, 0 -5px 4px #0000D8, 2px -6px 6px #fde, -2px -8px 9px #0000D8, 2px -10px 10px #0000D8; text-decoration: none;">INI CONTOH TULISAN TEKS TAMPAK BERAPI-BERAPI WARNA BIRU DARI BLOG BIARCOOL.INFO</span>


CARA MENGATUR FONT KALIMAT

<font size="5" color="red">Mengatur <sub>Kalimat Subscripted</sub> font</font>
<font face="verdana" color="green">Mengatur font</font>

<b>Kalimat Tebal</b> atau <strong>Kalimat Tebal</strong>
<em>Kalimat Miring</em> atau <i>Kalimat Miring</i>
<ins>Kalimat Garis Bawah</ins>

<small>Kalimat Lebih Kecil</small>

<sub>Kalimat Subscripted</sub>
     Contoh: <font size="5" color="red">Mengatur <sub>Kalimat Subscripted</sub> font</font>
<sup>Kalimat Superscripted</sup>
      Contoh: <font size="5" color="red">Mengatur <sup>Kalimat Subscripted</sup> font</font>

<del>Kalimat Coret</del>

<mark>Kalimat Stabillo</mark>

CARA MEMBUAT LINK

Kode Dasar: <a href="url">Teks Link</a>

Variasi:

<a href="http://gerryindrapratamaatje.blogspot.co.id/" target="_blank" title="Pdt. Gerry Atje: The Story of Us"><button>KLIK DI SINI</button></a>


CARA MEMBUAT TOMBOL (BUTTON)

Kode Dasar: <button></button> atau <kbd></kbd>

Variasi:
<button style="background-color: #f24a4a;" onclick="alert('TULISAN DI SINI')" type="button">Apa itu HTML</button>
<a href="http://gerryindrapratamaatje.blogspot.co.id/" target="_blank" title="Pdt. Gerry Atje: The Story of Us"><button>KLIK DI SINI</button></a>

CARA MENYISIPKAN DAN MENGATUR GAMBAR

Kode Dasar:
<img src="linkgambar.jpg"/>

Variasi Tambahan:

<img alt="keterangan link gambar" src="linkgambar.jpg"/>
<img alt="keterangan link gambar" src="linkgambar.jpg" height="200" width="100"/>
<img style="margin: 10px; float: left;" alt="keterangan link gambar" src="linkgambar.jpg" width="400" height="350" />

Optimasi Gambar Fast Loading
<div class="separator" style="clear: both; text-align: center;"> <a href="URL-GAMBAR" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" height="281" src="URL-GAMBAR" width="640" /></a></div>

KODE LAINNYA YANG BISA DIGUNAKAN

<!--...--> Menandai halaman html yang tidak muncul di halaman bacaan (compose)
...

Kode HTML untuk Menulis di Postingan

kode html untuk menulis di postingan
KODE HTML UNTUK MENULIS DI POSTINGAN — Beberapa kode HTML ini perlu diketahui dalam rangka penulisan di blog. Saya mengumpulkannya dari berbagai sumber, beberapa saya edit lagi.

HEADING

Kode Dasar:

<h1>Heading 1</h1> s/d <h6>Heading 6</h6>

Menambahkan Style:

<h6 style="font-size:60px; color:red;">Heading 6</h6>
<h6 style="font-size:300%;">Heading 6</h6>
<h6 style="text-align:center;">Centered Heading</h6>
<h6 style="background-color:DodgerBlue;">Heading 6</h6>

<h1 style="color:blue;margin-left:30px;">Heading dengan Margin Kiri</h1>

<h1 style="text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; color:white;">Heading 1</h1>
<h1 style="text-shadow: 2px 2px;">Heading 1</h1>
<h1 style="text-shadow: 2px 2px red;">Heading 1</h1>
<h1 style="text-shadow: 2px 2px 5px red;">Heading 1</h1>
<h1 style="color: white; text-shadow: 2px 2px 4px #000000;">Heading 1</h1>
<h1 style="text-shadow: 0 0 3px #FF0000;">Heading 1</h1>
<h1 style="text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;">Heading 1</h1>
<h1 style="color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">Heading 1</h1>
<h1 style="color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Heading 1</h1>

PARAGRAF

Kode Dasar: <p></p>

Variasi:
- Jika ingin mengutip ayat Alkitab, dll dalam suatu paragraf

<p>Ayat Alkitab</p>
<pre>
   Isteri yang cakap
   lebih dari permata
   Siapakah orang yang mendapatkannya?

   Amsal 31
</pre>

-- bisa juga menggunakan kode: <code></code>

Kode lainnya:

- Memberi Kotak dengan Judul Tulisan

<fieldset>
    <legend>Amsal 31</legend>
       Isteri yang cakap lebih dari permata.
  </fieldset>

PENTING:
Jika ingin menandai sebuah paragraf dengan baris menjorok ke dalam (contoh penggunaan CSS Inline dalam postingan):

<p style="text-indent: 50px; text-align:justify; font-family:verdana; font-size:100%; color:blue;">Isteri yang cakap siapakah akan mendapatkannya? Ia lebih berharga dari pada permata. Hati suaminya percaya kepadanya, suaminya tidak akan kekurangan keuntungan. Ia berbuat baik kepada suaminya dan tidak berbuat jahat sepanjang umurnya. ... Ia mengawasi segala perbuatan rumah tangganya, makanan kemalasan tidak dimakannya. Anak-anaknya bangun, dan menyebutnya berbahagia, pula suaminya memuji dia: Banyak wanita telah berbuat baik, tetapi kau melebihi mereka semua. Kemolekan adalah bohong dan kecantikan adalah sia-sia, tetapi isteri yang takut akan TUHAN dipuji-puji.
</p>

* Style bisa diubah sesuai kebutuhan


BERAGAM EFEK TEKS

Efek Tulisan Mengetik Sendiri

<script language="JavaScript">function type(){var t=document.getElementById(destination);t&&(t.innerHTML=text.substr(0,currentChar)+"<blink>_</blink>",currentChar++,currentChar>text.length?(currentChar=1,setTimeout("type()",5e3)):setTimeout("type()",delay))}function startTyping(t,e,n){text=t,delay=e,currentChar=1,destination=n,type()}var text="INI CONTOH TULISAN EFEK MENGETIK SENDIRI DARI MBA ARLINA",delay=20,currentChar=1,destination="[none]";</script><b><div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div></b><script language="JavaScript">javascript:startTyping(text,50,"textDestination");</script>

Efek Tulisan Berapi

<span style="color: darkred; text-shadow: 0 0 2px #DC143C, 0 -5px 4px #CD5C5C, 2px -6px 6px #CD5C5C, -2px -8px 9px #f40, 2px -10px 10px #DC143C; text-decoration: none;">INI CONTOH TULISAN TEKS TAMPAK BERAPI-BERAPI WARNA MERAH DARI BLOG BIARCOOL.INFO</span>

<span style="color: darkblue; text-shadow: 0 0 2px #0000D8, 0 -5px 4px #0000D8, 2px -6px 6px #fde, -2px -8px 9px #0000D8, 2px -10px 10px #0000D8; text-decoration: none;">INI CONTOH TULISAN TEKS TAMPAK BERAPI-BERAPI WARNA BIRU DARI BLOG BIARCOOL.INFO</span>


CARA MENGATUR FONT KALIMAT

<font size="5" color="red">Mengatur <sub>Kalimat Subscripted</sub> font</font>
<font face="verdana" color="green">Mengatur font</font>

<b>Kalimat Tebal</b> atau <strong>Kalimat Tebal</strong>
<em>Kalimat Miring</em> atau <i>Kalimat Miring</i>
<ins>Kalimat Garis Bawah</ins>

<small>Kalimat Lebih Kecil</small>

<sub>Kalimat Subscripted</sub>
     Contoh: <font size="5" color="red">Mengatur <sub>Kalimat Subscripted</sub> font</font>
<sup>Kalimat Superscripted</sup>
      Contoh: <font size="5" color="red">Mengatur <sup>Kalimat Subscripted</sup> font</font>

<del>Kalimat Coret</del>

<mark>Kalimat Stabillo</mark>

CARA MEMBUAT LINK

Kode Dasar: <a href="url">Teks Link</a>

Variasi:

<a href="http://gerryindrapratamaatje.blogspot.co.id/" target="_blank" title="Pdt. Gerry Atje: The Story of Us"><button>KLIK DI SINI</button></a>


CARA MEMBUAT TOMBOL (BUTTON)

Kode Dasar: <button></button> atau <kbd></kbd>

Variasi:
<button style="background-color: #f24a4a;" onclick="alert('TULISAN DI SINI')" type="button">Apa itu HTML</button>
<a href="http://gerryindrapratamaatje.blogspot.co.id/" target="_blank" title="Pdt. Gerry Atje: The Story of Us"><button>KLIK DI SINI</button></a>

CARA MENYISIPKAN DAN MENGATUR GAMBAR

Kode Dasar:
<img src="linkgambar.jpg"/>

Variasi Tambahan:

<img alt="keterangan link gambar" src="linkgambar.jpg"/>
<img alt="keterangan link gambar" src="linkgambar.jpg" height="200" width="100"/>
<img style="margin: 10px; float: left;" alt="keterangan link gambar" src="linkgambar.jpg" width="400" height="350" />

Optimasi Gambar Fast Loading
<div class="separator" style="clear: both; text-align: center;"> <a href="URL-GAMBAR" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" height="281" src="URL-GAMBAR" width="640" /></a></div>

KODE LAINNYA YANG BISA DIGUNAKAN

<!--...--> Menandai halaman html yang tidak muncul di halaman bacaan (compose)
...

Terimakasih sudah membaca artikel di blog ini. Sahabat dapat menerima artikel terbaru langsung melalui email dengan mendaftarkan email Sahabat di kotak subscribe. Tuhan memberkati selalu.


Load comments

Terima Renungan Terbaru Melalui Email