Cara Buat Kotak Kode Script HTML dalam Postingan Blogger

Kotak Kode Script HTML

Cara Membuat Kotak Kode Script HTML di dalam Postingan Blogger – Tips Blogger-  Oke pada kesempatan kali ini saya akan berbagi cara membuat sebuah kotak kode script pada postingan blogger / blogspot , maklsud dari postingan kali yakni ketika kamu mau berbagi kode script kepada orang lain , maka tentunya kamu perlu kotak untuk menampilkan kode yang kamu bagikan kan ? dengan maksud agar kode script yang kamu bagikan lebih indah tampilannya . oke tidak usah panjang lebar pada kesempatan ini saya akan berbagi satu persatu caranya. 

Berikut beberapa Macam Kode Script

1. Yang pertama macam Kotak Kode Script/HTML di dalam Postingan Blogger yakni seperti pada gambar dibawah ini , kamu bisa copy paste script dibawah ini , keterangan :

• Border:1px > Ini merupakan tebal border/frame 
• #444 > Merupakan Warna dari border
• Padding : 10px > Jarak teks dengan border 
• Background-color: merupakan warna dari background. 
• text-align:left : Align dari text yang ada dalam border .

<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;“>
Kode Script Anda 
</div>

 

2. Untuk tipe Kotak Kode Script/HTML di dalam Postingan Blogger yang kedua yakni seperti pada tampilan dibawah. keterangan : 

• Left : merupakan algin texnya 
• 70 : merupakan besar colom border
• 6 merupakan besar baris colom

Berikut scriptnya :

<DIV ALIGN=”LEFT”><TEXTAREA COLS=”70″ NAME=”CODE” ROWS=”6″> KODE HTML ANDA DI SINI
</TEXTAREA>

3. Kode Kotak Kode Script/HTML di dalam Postingan Blogger yang ketiga seperti pada gambar dibawah ini . 

Berikut scriptnya :

<div>

<form name=”copy”>

<div align=”center”>

<input onclick=”javascript:this.form.txt.focus();this.form.txt.select();” type=”button” value=”Highlight All” /> </div>

<div align=”center”>

<textarea cols=”20″ name=”txt” rows=”4″ style=”height: 50px; width: 200px;” wrap=”VIRTUAL”>masukkan script anda disini</textarea></div>

4. Kode Kotak Script tipe keempat yakni seperti pada kotak dibawah ini .

Kode Script Anda (Dashed)

Kode Script Anda (Dotted).

Kode Script Anda (Groove).

Kode Script Anda (Inset).

Kode Script Anda (Outset).

Kode Script Anda (Ridge).

Kode Script Anda (Solid).

Berikut Kode Scriptnya : 

<div style=”border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;

text-align: left;“>

.blogoooblok (ganti tulisan ini).</div>

Keterangan : 
Untuk kata Double disana bisa di ganti dengan Kode Contoh yang diatas. 

5. Berikut macam kode script untuk yang kelima 

SOLID BOLDER

 

<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

RIDGE BORDER

 

<div style=”border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

INSET BORDER

 

<div style=”border: 2px #006400 inset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

OUTSET BORDER

 

<div style=”border: 2px #006400 outset; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

DOUBLE BORDER

 

<div style=”border: 2px #006400 double; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

DOTTED BORDER

 

<div style=”border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI</div>

DASHED BORDER

 

<div style=”border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;”> TULIS KODE/SCRIPTNYA DISINI </div>

BORDER DENGAN LEBAR, PANJANG, DAN SCROLL

 

<div style=”border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 50px; width: 300px; text-align: left;”>TULIS KODE/SCRIPTNYA DISINI </div>

6. Script Tipe Kelima 

<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;”>
Kode Script Anda Di Sini
</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;”>Kode Script Anda Disini</div>

<div style=”border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;”>Kode Script Anda Disini</div>

<div style=”border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;”> Kode Script Anda Disini</div>

<div style=”border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;”> Kode Script Anda Disini</div>

<div style=”border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;”> Kode Script Anda Disini</div>

Cukup sekian postingan pada kseampatan kali ini , semoga artikel Cara Membuat Kotak Kode Script / HTML di dalam Postingan Blogger – Tips Blogger menjadi pedoman darn bahan referensi kamu semua .

Kotak Kode Script HTML

Semoga bermanfaat