Cara Membuat Kotak Script di Posting 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. Cara membuatnya, 





Ikuti langkah-langkah dibawah ini:

1. Login ke blogger.

2. pilih entri baru.

3. Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script.

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

4. Sekarang Klik Compose, maka akan ada kotak script. 

5. Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan Klik Disini.

6. Terakhir, Masukan kode script yang ingin kamu masukan, didalam kotak itu. 


Selesai.

Keterangan

1. border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
2. Double; = Bentuk kotak, bisa diganti dengan, 

.dashed
dotted
Double
Groove
inset
outset
ridge

3. Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.

4. background-color:ffffff; = warna dalam kotak. 

5. Dan text-align:left; = posisi tulisan didalam kotak di kiri.

Kotak Script Dengan Scroll.

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

Membuat Kotak Teks (Text Area) Dalam Postingan Blog

Contoh 1 : ( otomatis )

• Teks rata tengah = text-align: center; center bisa diganti dengan left, right, justify
• Background warna = background-color: #cf32f3 bisa Anda ubah sesuai warna yang di inginkan
• Border = border: 1px solid, bisa Anda atur ketebalan garis luarnya

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

Hasilnya :

BLOG CEPI-WUNGKUL

Semoga Bermanfaat....

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 03.05 and have 0 komentar