GuruMalas.id – Kotak Script merupakan sebuah area berbentuk kotak yang sering digunakan para blogger untuk memasukkan kode-kode script ke dalam postingan Blog. Dengan Kotak Script kode-kode program, script HTML, java dan lainnya akan terlihat lebih menarik dan lebih. Sayangnya kotak script yang disematkan dalam postingan ini tidak disediakan secara default oleh blogspot. Untuk itu, jika kita ingin memasang kotak script di blog kita harus membuatnya sendiri.
Kotak Script memiliki banyak bentuk dan warna kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll dan lain sebagainya. Kotak script pun bisa diberi warna dibagian backgroundnya dan juga border yang berbentuk kotak, bisa diatur bentuknya.
Berikut Ini Adalah Contoh Kumpulan Kode Script Untuk Membuat Kotak Script
<div style=”border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 600px;
text-align: left;”>
Kotak Posisi Dari Kiri Kode Script Anda</div>
Keterangan Kode :
border: 3px = ketebalan kotak script
#1780dd = warna kotak script.
Solid; = Bentuk kotak, bisa diganti dengan,
dashed
dotted
Double
Groove
inset
outset
ridge
Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
Background-color:ffffff; = warna dalam kotak.
Overflow:auto; = fungsi scrollnya. height (tinggi kotak) dan width (lebar kotak)
Dan text-align:left; = posisi tulisan didalam kotak di kiri (bisa dirubah dengan right untuk posisi kanan)
#atau anda langsung bisa langsung pilih beberapa kode script di bawah ini yang sudah saya siapkan dan bisa langsung dipakai di blog anda
<div style=”border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 3px #1780dd Dashed; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 3px #1780dd Groove; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 3px #1780dd Inset; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 3px #1780dd Outset; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 3px #1780dd Ridge; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 3px #1780dd Solid; padding: 10px;background-color:#ffffff;
text-align: left;”>
Kode Script Anda</div>
<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;”>Kode Script Anda</div>
<div style=”border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;”> Kode Script Anda </div>
<div style=”border: 0; padding: 10px; background-color: #82CAFA; text-align: left;”> Kode Script Anda </div>
<div style=”border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;”> Kode Script Anda</div>
<div style=”border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;”> Kode Script Anda </div>
<div style=”border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;”> Kode Script Anda </div>
<div style=”border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;”> Kode Script Anda </div>
<div style=”background-color: #f3f3f3; border-left: 5px solid #2288dd; padding: 10px; t-align: left;”>Kode Script Anda</div>
<div style=”background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;”>Kode Script Anda</div>
<div style=”background-color: #ffe599; border: 2px dashed #aaa; padding: 10px; t-align: left;”>Kode Script Anda</div>
<div style=”background-color: #6fa8dc; border: 4px double #fff; padding: 10px; t-align: left;”>Kode Script Anda</div>
<div style=”background-color: #a2c4c9; border: 4px outset #fff; padding: 10px; t-align: left;”>Kode Script Anda</div>
<div style=”background-color: #008893; border: 2px #22486e dashed;color:#fff;padding: 10px; t-align: left;”>Kode Script Anda</div>
<div style=”background-color:#FFF8DC; border: 2px #22486e solid;border-radius:5px; padding: 10px; text-align: left;”>Kode Script Anda</div>
<div style=”background-color: #82cafa; border: 3px #22486e double; color: #222222; padding: 10px; text-align: left;”>Kode Script Anda</div>
<div style=”background-color:#8B0000;color:#fff; border: 2px #22486e inset; padding: 10px; text-align: left;”>Kode Script Anda</div>
<div style=”background-color: #c2c2c2; border: 2px #22486e ridge; padding: 10px; text-align: left;”>Kode Script Anda</div>
<div style=”background-color: #82cafa; border: 3px #22486e double; color: #222222; padding: 10px; text-align: left;”>Kode Script Anda</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</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</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</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</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</div>
Cara Memasang Kotak Script di Dalam Postingan Blog
1. Login Ke akun Blogger anda kemudian klik “Entri baru” untuk membuat postingan baru atau anda bisa edit postingan anda sebelumnya
2. Silahkan anda membuat artikel terlebih dahulu, jika sudah klik HTML sebagai contoh lihat gambar dibawah
3. Silahkan copy paste salah satu kode diatas untuk membuat kotak script
4. Untuk lebih jelasnya, lihat gambar dibawah
5. Sekarang kembali Ke Compose, maka hasilnya akan seperti ini
6. Silahkan ganti Teks ” Kode Script Anda” dengan kalimat yang anda inginkan
Demikian cara membuat kotak script di Blog, Semoga bermanfaat untuk anda.
