Variasi Kotak Untuk Teks di Postingan Blog, Mirip Teksbox Pada Aplikasi Office

Selain artikel yang bagus, bermanfaat untuk banyak orang, postingan blog terkadang memerlukan sentuhan khusus agar menarik. Sentuhan khusus yang saya maksud adalah tulisan dalam kotak. Layaknya textbox pada Ms.Word atau Ms. Office lainnya.
Variasi Kotak Untuk Teks di Postingan Blog, Mirip Teksbox Pada Aplikasi Office
Jika pada Ms. Office kita tinggal insert saja, pada postingan blog, tak demikian halnya. Kita mesti menuliskan scriptnya. Tentunya dengan merubah dari mode Compose ke mode  HTML terlebih dahulu. Tinggal copy kan script yang kita inginkan pada jenis-jenis berikut, ganti www.aansupriyanto.com dengan teks yang diinginkan.

Nah seperti apa jenis-jenis kotak nya, berikut beberapa contohnya.

1. Garis ganda berwarna hijau

<div style="border: 3px #04B45F Double; padding: 10px;background-color:#FFFFFF; text-align: left;">  www.aansupriyanto.com </div>


2. Background biru muda

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;"> www.aansupriyanto.com </p>

3. Background samar

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">www.aansupriyanto.com</div>

4. Background biru tua

<p style="border: solid 1px #eceff5; background: #29447E; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">www.aansupriyanto.com</p>

5. Background abu-abu sudut melengkung

<p style="border: solid 1px #aaa; background: #ccc; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">www.aansupriyanto.com</p>

6. Garis putih abu-abu

<p style="border: dashed 2px #eceff5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">www.aansupriyanto.com</p>

7. Garis orange putus-putus

<p style="border: dashed 2px #ee3f10; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">www.aansupriyanto.com</p>

8. Background kuning

<div style="border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;">www.aansupriyanto.com</div>

9. Background kuning garis putus pendek

<div style="border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;"> www.aansupriyanto.com </div>

10. Background kuning garis putus panjang

<div style="border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;"> www.aansupriyanto.com </div>

Nah demikian 10 variasi kotak yang saya dapatkan dari searching, catatan ini sebagai pengingat saya, jika suatu saat memerlukan variasi kotak untuk teks-teks yang perlu penekanan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel