Cara Membuat Kotak Script Keren Berwarna Dalam 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, juga bisa diatur bentuknya. 

Cara membuatnya, Ikuti langkah-langkah dibawah ini :

1. Login ke Akun Blogger. Dan pilih entri baru.
2. Buatlah tulisan pada blog Anda pada mode Compose

Untuk memasukkan kotak Script silahkan pilih mode HTML dan masukkan kode berikut, untuk membuat kotak script.

Silahkan pilih tampilan kotak script yang Anda inginkan :

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

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #e0aeae; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px;">
Pastekan Kode Script Anda disini 
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #b7ff68; border-radius: 10px; border: 4px solid #999; padding: 10px;">
Pastekan 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;">
Pastekan 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;">
Pastekan Kode Script Anda disini
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffbf7d; border-radius: 10px; border: 4px outset #fff; padding: 10px;">
Pastekan Kode Script Anda disini
</div>

<div style="background-color: #36e4fd; border: 2px #610b38 dashed; padding: 10px;">
Pastekan Kode Script Anda disini
</div>

<div style="background-color: #c2c2c2; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Pastekan Kode Script Anda disini
</div>

<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;">
Pastekan Kode Script Anda disini
</div>

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

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #00b8ff; border-radius: 10px; border: 7px outset #fff; padding: 10px; t-align: left;">
Pastekan Kode Script Anda disini
</div>

Anda bisa modifikasi kotak script sesuai kreasi dan kemauan sendiri dengan cara :

• Mengganti ukuran sudut lengkungan contohnya : border-radius: 10px ada 3 ganti semua 
• Mengganti warna background contohnya : background-color: #00B8FF (Kode Warna) 
• Merubah ketebalan border / garis tepi kolom contohnya : border: 4px

Anda yang ingin menambahkan scroll pada kotak script bisa menggunakan kode dibawah ini :

<div style="background: #f1f1f1; border: 1px solid #999; height: 100px; overflow: auto; padding: 10px;">

Pastekan Kode Script Anda disini

</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #e6ff15; border-left: 5px solid #2288dd; border-radius: 10px; height: 100px; overflow: auto; padding: 10px; padding: 10px;">

Pastekan Kode Script Anda disini

</div>

<div style="background: #000000; height: 100px; overflow: auto; padding: 10px;">
<span style="color: white;">

Pastekan Kode script Anda disini

</span>
</div>

Share this

Author : Aridjaya

Related Posts