Membuat Kotak Script Blog

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/AVvXsEjflyPZKybnYe8_7PVUcTmnPgwRBnQPyChaT-Q0PzlB82s_J9fr7JEH2QWMANJUL-OdoaHQ47BpCpwDMnKGf_Z-rSyCR7aIMmflzBwrbWN6MQgQI2pMY5ePOLj1sh_gZF8b0Fd3MYez6Z9j/) 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:

Kode Bisa Kamu ketik Disini