Cara Membuat Kotak Script Di Postingan Blog - Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya.
Caranya cukup mudah tinggal copas script dibawah ini maka akan muncul kotak tersebut dipostingan anda. sebelum memposting script terlebih dahulu script yang akan diposting di parse dahulu
agar tidak terjadi error script, kemudian copy paste script hasil parse tersebut ke kotak script dibawah.
Contoh:
Script:
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>
Hasil
.Klik Disini.
Berikut beberapa script yang mungkin berguna untuk anda:
Kotak 1
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>
Kotak 2
<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>
Kotak 3
<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>
Kotak 4
<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>
Kotak 5
<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>
Kotak 6
<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>
Kotak 7
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Anda Disini</div>
Kotak 8
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>
Kotak 9
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>
Kotak 10
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>
Kotak 11
<div style="background-color: white; border: 3px #1780dd dotted; padding: 10px; text-align: left;">
Kode Script Anda Disin</div>
Kotak 12
<div style="border: 3px #1780dd Dashed; padding: 10px;background-color:#ffffff;
text-align: left;">
Kode Script Anda Disini</div>
Dengan cara :
- Copy script box code dari beberapa jenis tampilan di atas
- Paste pada Menu Tab HTML Artikel Entri
-Ganti kode yang berwarna (Merah) yang bertulisan (Kode Script Anda Disini) dengan script yang anda inginkan
Kreasi dengan beberapa bagian di bawah ini :
- Mengganti ukuran sudut lengkungan : border-radius: 10px ada 3 ganti semua
- Mengganti warna background : background-color: #codewarna
- Merubah ketebalan border / garis tepi kolom : border: 4px
Selamat mencoba ya jangan lupa dishare klo berhasil...
SEMOGA
BERMANFAAT,
