OnFire

Untuk mempercantik sebuah postingan agar terlihat menarik oleh si pembaca, salah satunya ialah menambahkan warna pada setiap kata-kata yang terdapat pada postingan tersebut. 

Berikut contoh dari efek stabilo:


C O L O U R S

Red Yellow Green Blue Orange Pink Purple Brown Black

<span style="background-color: red;">Ini efek stabilo</span>

Terdapat beberapa tampilan border untuk mempercantik postingan kita, antara lain jenis dotted, dashed, solid, ridge, groove, inset, outset, double, dan scroll. Pemberian border itu sendiri biasanya digunakan untuk membatasi jarak pada postingan dalam penulisan kode HTML.

Berikut jenis-jenis border:

1. Border jenis dotted

<div style="border: 5px #FF6A00 dotted; padding:10px; background-color: #8aff70; text-align:left;">Masukkan teks disini</div>

<div style="border: 5px #FF6A00 dashed; padding:10px; background-color: #8aff70; text-align:left;">Masukkan teks disini</div>

<div style="border: 5px #FF6A00 solid; padding:10px; background-color: #8aff70; text-align:left;">Masukkan teks disini</div>

<div style="border: 5px #FF6A00 ridge; padding:10px; background-color: #8aff70; text-align:left;">Masukkan teks disini</div>

<div style="border: 5px #FF6A00 inset; padding:10px; background-color: #8aff70; text-align:left;">Masukkan teks disini</div>

<div style="border: 5px #FF6A00 outset; padding:10px; background-color: #8aff70; text-align:left;">Masukkan teks disini</div>

<div style="background-color: #8aff70; border: 4px #FF6A00 double; height: 60px; overflow: auto; padding: 10px; text-align: left; width: 300px;">Masukkan teks disini</div>

Tombol Show / hide pada blog berfungsi untuk menyembunyikan gambar atau teks yang terlalu panjang sehingga bisa menghemat tempat pada postingan.

Kode dibawah ini bisa diletakkan dimana saja anda suka pada postingan anda.

<div style="text-align: center;">
<div class="button-spoiler">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div>
<div class="spoiler">
<div style="display: none;">
<div style="border: 3px inset #333; font-size: small; padding: 10px; text-align: left;">
Isi tulisanmu atau gambar.


</div>
</div>
</div>
</div>

yang saya beri warna merah silahkan isi dengan teks atau gambar yang ingin anda sembunyikan.