Cara membuat kotak script di postingan blog

Anda pasti pernah lihat di postingan blog terdapat kotak yang isinya kode script, biasanya itu posting yang memuat tentang cara edit html atau widget di blog yang membutuhkan kode-kode script tambahan. Supaya kode script tersebut terlihat rapi dan enak dibaca oleh pengunjung blog. Berikut saya ambil beberapa contoh kotak script yang sering dipakai.

1. Contoh kotak script pertama:

Masukkan tulisan atau kode script di sini
Masukkan tulisan atau kode script di sini
Masukkan tulisan atau kode script di sini

Berikut langkah-langkahnya:

Login blogger anda
Buat posting baru
Ubah mode entri ke HTML yang sebelumnya Compose

Masukkan Kode Berikut

<div style="background-color: #a9fa61; border: 4px #0000CD dashed; padding: 10px; text-align: left;">
Masukkan tulisan atau kode script di sini
Masukkan tulisan atau kode script di sini
Masukkan tulisan atau kode script di sini
</div>

Keterangan:
Warna merah adalah kode warna background
Warna hijau adalah ukuran bordernya
Warna biru adalah warna border

Catatatan: masukkan kode scriptnya di mode Compose setelah dibuat border dari mode HTML, karena bila kode scripnya dimasukkan secara bersamaan di mode HTML nanti yang muncul akan berubah.

2. Contoh kotak script kedua

Masukkan tulisan atau kode script di sini
Masukkan tulisan atau kode script di sini
Masukkan tulisan atau kode script di sini

Berikut langkah-langkahnya:

Login blogger anda
Pada Template pilih Edit HTML
Cari kode ]]></b:skin> lalu taruh kode script dibawah ini persis di atas kode ]]></b:skin>

.code2 {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #d5def7;
border: 1px solid #000000;
border-left: 15px solid #f9b642}

Cara memasukkan ke posting pilih mode HTML dengan kode berikut

<div class="code2">
Masukkan kode script di sini
Masukkan kode script di sini
Masukkan kode script di sini
</div>

Kembali ke mode Compose ganti tulisan "Masukkan kode script di sini" dengan kode script yang anda inginkan.

3. Contoh Kotak Script ketiga

Masukkan kode script di sini
Masukkan kode script di sini
Masukkan kode script di sini

Beikut langkah-langkahnya:

Login blogger anda
Buat posting baru
Ubah mode entri Compose menjadi HTML
Masukkan kode berikut

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
Masukkan kode script di sini</div>

Kembali ke mode Compose ganti tulisan "Masukkan kode script di sini" dengan kode script yang anda inginkan.

4. Contoh kotak script yang ke empat

Masukkan kode script di sini
Masukkan kode script di sini
Masukkan kode script di sini

Beikut langkah-langkahnya:

Login blogger anda
Buat posting baru
Ubah mode entri Compose menjadi HTML
Masukkan kode berikut

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
Masukkan kode script di sini</div>

Kembali ke mode Compose ganti tulisan "Masukkan kode script di sini" dengan kode script yang anda inginkan.

5. Contoh Kotak script yang ke lima

Masukkan kode script di sini
Masukkan kode script di sini
Masukkan kode script di sini

Beikut langkah-langkahnya:

Login blogger anda
Pada Template pilih Edit HTML
Cari kode ]]></b:skin> lalu taruh kode script dibawah ini persis di atas kode ]]></b:skin>

.code1:before{-moz-transition: all 0.2s ease-in-out 0s;-moz-transform:rotate(-13deg); background:none repeat scroll 0 0 #FFC482; border:3px solid #F98704; border-radius:2px 2px 2px 2px; box-shadow:2px 2px 0 #000,7px 7px 3px #999,1px 1px 1px #FFF1C9 inset; color:#000; content:"Code"; font-weight:bold; height:37px; left:7px; max-width:34px; padding-top:5px; position:absolute; text-align:center; text-shadow:1px 1px 0 #FFF; top:-11px; width:100%}
.code1{ background:none repeat scroll 0 0 #FFF4E0; border:1px solid #FFAE00; border-radius:2px 2px 2px 2px; box-shadow:2px 2px 0; margin:9px 2px 15px 0; padding:3px 0 3px 64px; position:relative}.code1:hover::before{-moz-transform:rotate(-3deg);-webkit-transform:rotate(-3deg);}

Masuk ke posting pilih mode HTML dengan kode berikut

<div class="code1">
Masukkan kode script di sini
Masukkan kode script di sini
Masukkan kode script di sini
</div>

Kembali ke mode Compose ganti tulisan "Masukkan kode script di sini" dengan kode script yang anda inginkan.

Sekian terima kasih semoga bermanfaat....:)