Cara Membuat Kotak/Box Script pada Postingan - Hallo sahabat Alice Blogger, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Kotak/Box Script pada Postingan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel BLOGER, Artikel CSS, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Kotak/Box Script pada Postingan
link : Cara Membuat Kotak/Box Script pada Postingan

Cara Membuat Kotak/Box Script pada Postingan

Cara Membuat Kotak/Box Script pada Postingan

Membuat Kotak/Box Script pada Postingan

Cara Membuat Kotak/Box Script pada Postingan: Kotak script, biasanya digunakan untuk memasukan kode-kode 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. Selai itu dapat pula diberi warna pada bagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya.

Berikut ini Cara Membuat Kotak/Box Script pada Postingan blog

Login ke blogger. Dan pilih entri baru.
Selanjutnya buatlah Judul Postingan

image-1: Cara Membuat Kotak/Box Script pada Postingan

Kemudian  Klik HTML dan masukan kode berikut

image-2 Cara Membuat Kotak/Box Script pada Postingan

1 2 3

<div style="border: 3px #000000 Double; padding: 10px;background-color:crimson; text-align: left;"> .Klik Disini.</div>

Kemudian klik Compose, maka akan ada kotak script, seperti gambar di bawah

image-3 Cara Membuat Kotak/Box Script pada Postingan

Hasilnya

.Klik Disini.

Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan Klik Disini.
Terakhir, Masukan kode script yang ingin kamu masukan, didalam kotak tersebut
 Penjelasan:
border: 3px = ketebalan kotak script.
Double; = bentuk kotak, bisa diganti dengan,
dashed dotted Double Groove inset outset ridge
#000000  Untuk pemberian warna pada border  kotak
crimson (#FF7F50) untuk pemberian warna pada background  kotak
Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
text-align:left; = posisi tulisan didalam kotak di kiri

Jika dalam memasukan script(script belum tampak) maka Anda perlu memparse script Anda Disini

<div style="border: 3px #1780dd Double; padding: 10px;background-color:crimson;
text-align: left;">
.Klik Disini.</div>

<div style="border: 3px #228B22 solid; padding: 10px;background-color:crimson;
overflow: auto; height: 50px; width: 630px;
text-align: left;">
.kode script disini.</div>

<div style="border: 3px #228B22 solid; padding: 10px;background-color:crimson;
overflow: auto; height: 50px; width: 630px;
text-align: left;">
.kode script disini.</div>

<div style="border: 3px #228B22 solid; float: right; padding: 10px;background-color:crimson;
overflow: auto; height: 50px; width: 430px;text-align: left;">.kode script disini.</div>

<div style="border: 3px #228B22 solid; padding: float: left; 10px;background-color:crimson;
overflow: auto; height: 50px; width: 430px;
text-align: left;">
.kode script disini.</div>

<div>
<center>
<div style="background-color: crimson; border: 3px #228B22 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 400px;">
dftdyt</div>
</center>
</div>

overflow:auto; = fungsi scrollnya. height (50px) (tinggi kotak) dan width (400px) (lebar kotak)

<div style="border: 3px #00FFFF Double; padding: 10px;background-color:Coral;
text-align: left;">
.Klik Disini.</div>

<div style="border: 3px #00FFFF solid; padding: 10px;background-color:coral;
overflow: auto; height: 50px; width: 630px;
text-align: left;">
.kode script disini.</div>

<div style="border: 3px #000000 Double; padding: 10px;background-color:Deeppink;
text-align: left;">
.Klik Disini.</div>

<div style="border: 3px #000000 solid; padding: 10px;background-color:deeppink;
overflow: auto; height: 50px; width: 630px;
text-align: left;">
.kode script disini.</div>

<div style="border: 0; padding: 10px; background-color: lightskyblue; text-align: left;"> Kode Script Anda Disini…….</div>

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

<div style="border: 3px #FF0000  outset; padding: 10px; background-color: mediumturquoise; text-align: left;"> Kode Script Anda Disini…….</div>

Anda baru saja membaca artikel Cara Membuat Kotak/Box Script pada Postingan , Semoga bermanfaat

Demikianlah Artikel Cara Membuat Kotak/Box Script pada Postingan

Sekianlah artikel Cara Membuat Kotak/Box Script pada Postingan kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Kotak/Box Script pada Postingan dengan alamat link https://www.alicewinklers-blogku.eu.org/2015/08/cara-membuat-kotakbox-script-pada.html