MEMBUAT KOTAK SCRIPT HTML DI BLOG

Kembali saya Menggoreskan Tutorial Blog, Dan yang di bahas disini adalah mengenai MEMBUAT KOTAK SCRIPT HTML DI BLOG.

Sering saya Menuliskan Tutoril blog, Dan memberikan Kode Sript. Nah .. supaya mudah pengunjung membedakan yang mana isi tulisan dan yang mana Kode Script nya,

maka perlulah kita membuat MEMBUAT KOTAK SCRIPT HTML.

Untuk membuat ini, sobat langsung saja buat Postingan baru, Dan pada menu HTML nya, langsung sobat letakkan aja kode berikut:
<div style="border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;"> TULISAN SOBAT DISINI </div>
Jadi akan Nampak Seperti Ini sob.

TULISAN SOBAT DISINI

Dan sobat Bisa ganti Bordernya 2px dengan kesukaan sobat
dan #006400 Dengan Warna kesukaan sobat


Jika sobat bingung cara meletakkan, Sobat perhatikan Gambar Dibawah Ini.

Nah.. sudah jelas kan sob? Dan dibawah Ini adalah Macam-macam Kode Script HTML nya.

Satu 1

<div style="border: 4px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
TULISAN SOBAT DISINI</div>

Dua 2

<div style="background-color: Darkred  border: 3px #DC143C solid; height: 70px; overflow: auto; padding: 25px; text-align: left; width: 400px;">
TULISAN SOBAT DISINI</div>

Tiga 3

<br />
<div style="background-color: #a9f5a9; border: 1px solid #000000; padding: 5px; width: 330px;">
Tulisan Sobat Disini</div>

empat 4

<div style="border: 2px #1E90FF  dashed; padding: 10px; background-color: Dodgerblue; text-align: left;"> TULISAN SOBAT DISINI </div>

lima 5

<br />
<div style="background-color: #bdbdbd; border: 4px double #000000; padding: 5px; width: 400px;">
TULISAN SOBAT DISINI</div>

enam 6

<div style="border: 3px #5f200e  outset; padding: 10px; background-color: #d9da81; text-align: left;"> TULISAN SOBAT DISINI</div> 

Tujuh 7

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> TULISAN SOBAT DISINI</div>

Delapan 8

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> TULISAN SOBAT DISINI</div>

Sepuluh 10

<div style="border: 3px #5f200e  outset; padding: 10px; background-color: #d9da81; text-align: left;"> TULISAN SOBAT DISINI</div>

Sebelas 11

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
TULISAN SOBAT DISINI
</div>

Waduh sob Saking seriusnya sobat, Tidak memperhatikan No 9 Tidak Ada tuh.... Hahahaha :P

Ya sudah mari kita lanjut lagi...

<div style="background:#0000;color:#000;border: 9px dotted red; font-size: 30px; padding: 15px; width: 300px;">Tulisan sobat disini</div>

<div style="background: #0000; border-bottom: 6px dashed green; border-left: 6px groove red; border-right: 6px dotted blue; border-top: 6px outset pink; color: black; font-size: 30px; padding: 15px; width: 400px;">Tulisan sobat disini</div>

#Untuk yang melengkung

1

<center><div style="-moz-border-radius: 1em 0em 0em 0em; background-color: orange; border-radius: 1em 0em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">DIMARI TULISAN SAUDARA</div></Center>

2

<Center><div style="-moz-border-radius: 0em 0em 0em 1em; background-color: green; border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">DIMARI TULISAN SAUDARA</div></Center>

3

<Center><div style="-moz-border-radius: 0em 1em 0em 0em; background-color: red; border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">DIMARI TULISAN SAUDARA</div></Center>

4

<Center><div style="-moz-border-radius: 0em 0em 1em 0em; background-color: blue; border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Bawah Melengkung</div></Center>

5

<Center><div style="-moz-border-radius: 1em 0em 0em 1em; background-color: gold; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">DIMARI TULISAN SAUDARA</div></Center>

6

<Center><div style="-moz-border-radius: 1em 0em 0em 1em; background-color: royalblue; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">DIMARI TULISAN SAUDARA</div></Center>

Tapi, Lumayan Capek juga menulisnya, Semoga deh artikel ini MEMBUAT KOTAK SCRIPT HTML DI BLOG Bermanfaat bagi sobat yang membutuhkan. Supaya Capek ini Terobati.
hehehehe. Okelah sampai disini mengenai MEMBUAT KOTAK SCRIPT HTML DI BLOG.
Terimakasih.
Happy Blogging.