Membuat Kotak Script Bagus Ditengah Postingan Blog

britazone.blogspot.com - Kali ini britazone.blogspot.com memberikan trik sederhana  tentang cara membuat kotak script bagus dan profesional.

Kotak script adalah kotak khusus script yang digunakan apabila kita ingin menampilkan script code pada postingan blog kita. Disamping lebih bagus dilihat, kotak script juga membuat pembaca blog kita lebih gampang ketika membaca kode tersebut karena sudah ada highlight-nya. Untuk Demo kodenya persis pada postingan yang sedang kamu baca ini.

Kotak script ditengah postingan kelihatan mudah dibuat, namun untuk menjadikan agar kotak tersebut tampil lebih bagus, keren, profesional serta tidak terlalu berat loadingnya ternyata butuh sedikit trik. Pada trik tersebut kita hanya perlu memasang kode CSS dan HTML saja. Untuk step-stepnya ikuti langkah-langkah berikut ini:

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

.code{
color: black;
font-family:Courier New;
font-size:9pt;
width:90%px;
overflow:auto;
repeat-y;
max-height:200px;
margin:5px 10px;
padding: 4px 10px 0px 40px;
/*--Background of lined paper--*/
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqLKQCJt8Zb4JVNKybbNKIgzyC2NiivirYkkVHoraAlkI_oA_r-ydWSaWj3HXRfowS8N-O2uLy2PVCiDBcrYVBsSwhHWfhZZBLqOqmWjn6BrtRVQYBvx6zrIiR_7Z8FHLmN7bmqAJapn_n/) repeat-y left top;
white-space: no-wrap;
display: block; /* -- this make the background wraps the text correctly */
}
.code:hover{
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}

Jangan lupa klik Save Template

Kemudian setiap kali kamu ingin membuat kotak script pada postingan blog kamu, kamu tinggal meletakkan scriptnya dengan diapit kode <div class="code"> dan diakhiri kode </div>
Contoh:

<div class="code">Kode Bisa Kamu ketik Disini</div>