Cara Membuat Kotak Script Blogspot

Ingin posting tutorial blogspot yang di potingan bisa menampilkan kotak script untuk kode html. Tapi bagaimana caranya ya? aha... ternyata seperti ini caranya .

Login dulu ke blogger
Pilih Design/Rancangan
Klik Edit HTML
Cari Kode ]]></b:skin>
Kemudian letakkan kode dibawah ini persis diatas nya

.dwistroi {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Ganti warna biru sesuai dengan background blog anda atau selera anda.
Kemudian simpan tamplate.

Untuk pilihan garis border yang ada pada tulisan berwarna pink bisa anda ganti sesuai keinginan yaitu dengan mengganti tulisan dashed dengan salah satu pilihan yaitu: none, dotted, double, groove, inset, outset, ridge, solid, dsb. Lebih jelasnya lihat gambar berikut.

Css Border Style

Agar kode tersebut berfungsi,  maka script atau kode yang akan kita posting harus kita apit dengan kode <p class="dwistroi"> dan </p>
Sehingga nanti contohnya seperti ini

Setelah itu Terbitkan posting anda dan liat hasilnya

<p class="dwistroi"> ISI/SCRIPT KODE DALAM KOTAK </p> 

Variasi dari kode diatas juga ada nih bos.

.dwistroi {
     width: 500px; /* sesuaikan lebar dg kebutuhan atau pakailah auto - width:auto */
     background: #66CCFF url();/* Untuk background color atau image */
     border: 2px solid #555; /*tebal, jenis dan warna */
     overflow: scroll; overflow:auto;
     font-size: 12px; /* ukuran font */
     font-family: Verdana; /*atau jenis font lain */
     font-weight: 500; /* font-weight bisa juga normal atau bold */
     padding: 15px 8px; /* atas/bawah=20px, kanan/kiri=6px */
     margin:15px 5px; /silahkan atur margin bila di kehendaki */
     }

Gunakan KODE berikut saat melakukan posting :

<div class="dwistroi" style="height:300px;">

Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan

</div>

Tetapi dari kedua cara diatas, ada satu cara lagi yang lebih mudah. Kode ini diterapkan saat kita akan membuat kotak script blogspot di tiap postingan.

<div style="height:200px; width:500px; background: #66CCFF; border:2px solid #0000FF; padding: 20px 6px; overflow:scroll;overflow:auto;">
Letakkan Teks/Image/KODE HTML atau materi posting yang lain di sini
</div>