Cara Membuat Kotak Script di Postingan Blog (Lengkap)

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Kotak Script Untuk Tempat Kode/Script Lengkap - Assalamualaikum sobat yang lagi belajar ngeblog.... Oke, disini saya akan menjelaskan cara membuat kotak script dengan menggunakan scroll. Caranya sangat mudah sekali untuk membuat kotak script ini. Kotak script biasanya digunakan untuk memasukkan kode-kode script di dalam postingan, agar terlihat rapi dan tidak memakan banyak tempat. Kotak script juga bisa diberi warna di bagian backgroundnya, dan juga border yang berbentuk kotak bisa diatur bentuknya.
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. Selain itu dapat pula diberi warna pada bagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya. Kali ini saya akan postingkan dengan lengkap :D
Simak Langkah - langkahnya berikut ini untuk membuat kotak script :

Oke sekarang saya kasih tau caranya :
1. Harus login terlebih dahulu ke Blogger
2. Setelah itu, klik Entri Baru
3. Lalu copy script di bawah ini dan pastekan di HTML

<div style="border: 3px #eeeeee solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 100px; width: 520px;
text-align: left;">
.Ganti Tulisan Ini Dengan Script Yang Akan DiShare.</div>

4. Lalu klik Compose

5. Ganti tulisan yang berwarna merah dengan kode yang di inginkan
6. Selesai sudah caranya untuk membuat kotak script. Mudah bukan? ^_^

Berikut ada beberapa macam bentuk kotak scriptnya ^_^

tidak scroll 

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

tidak scroll

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Anda Disini</div>

tidak scroll

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

tidak scroll

<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>

tidak scroll

<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>

tidak scroll

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

tidak scroll

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

tidak scroll

<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>

tidak scroll

<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>

tidak scroll

<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>

tidak scroll

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

tidak scroll

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

versi scroll

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

versi scroll

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

versi scroll

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

versi scroll

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px;
overflow: auto; height: 50px; width: 450px;
t-align: left;">Kode Script Anda Disini</div>

versi keren nih ^_^

<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Click To Block All" /> </div> <div align="center"> <textarea cols="20" name="txt" rows="4" style="height: 100px; width: 450px;" wrap="VIRTUAL">Kode script anda disini

Keterangan penting : 
1. Anda bisa mengatur tinggi dan lebar kolomnya ~>> height adalah tinggi kolom ~>> width adalah lebar kolom . , . , . ,
2. Anda bisa mengganti warna background kotak scriptnya ~>> background-color #000000 ~>> #000000 itu adalah kode warna,,,, anda bisa menggantinya kog ^_^ langsung klik saja Kode Warna

selesai sudah Cara Membuat Kotak Script
Mudah kan cara membuatnya ? semoga artikel kali ini sangat bermanfaat bagi sobat blogger dirumah ^_^ bila ada kesulitan silahkan anda berkometar di bawah ini . . . tidak usah malu - malu :D malu bertanya sesat di jalan lho :v
Terima Kasih Sudah Berkunjung di blog Dunia Mayaku