Tampilan Kotak Script di Posting

Kotak Script merupakan sebuah modifikasi dari border untuk sebuah paragrap yang ditekankan/ paragaf pokok yang ditekankan oleh penulis. Dalam dunia blogger, dalam mepostingkan kode HTML terkadang menggunakan kotak script ini. Kotak script ini memudahkan kita untuk melihat kode HTML tersebut yang dapat membedakan dari kalimat-kalimat yang lain.
Untuk itu mari kita belajar bagaimana caranya untuk menampilkan pada postingan blog.

1. Login ke blogger.com dengan ID anda sendiri
2. Pilih Rancangan
3. Pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Letakkan kode berikut tepat di atasnya

/* Alert tampilan kotak script
----------------------------------------------- */
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #ffffff;
border: 1px solid #000000;
border-left: 15px solid #ff832f}

Yang berwarna hijau adalah kode warna background. silahkan ganti yang sesuai dengan background blog anda atau warna kesukaan anda
6. Kemudian simpan tamplate.

Supaya kode/scriptnya nanti bisa muncul kotak highlight-nya maka untuk mempostingnya anda harus menuliskan sebuah kode terlebih dahulu.
<p class="alert"> Isi / kode yang ingin di highlinght </p>

Berikut Pilihan jenis kotak scriptnya:

1. Solid Border

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS PARAGRAF/KODE HTML DI SINI </div>

2. Ridge Border

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 ridge; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS PARAGRAF/KODE HTML DI SINI </div>

3. Groove Border

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 groove; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS PARAGRAF/KODE HTML DI SINI </div>

4. Inset Border

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 inset; padding: 10px; background-color: #82CAFA; text-align: left;"> TULIS PARAGRAF/KODE HTML DI SINI </div>

5. Outset Border

  TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 outset; padding: 10px; background-color: #82CAFA; text-align: left;">  TULIS PARAGRAF/KODE HTML DI SINI </div>

6. Double Border

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 double; padding: 10px; background-color: #82CAFA; text-align: left;">TULIS PARAGRAF/KODE HTML DI SINI </div>

7. Dotted Border

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 dotted; padding: 10px; background-color: #82CAFA; text-align: left;">TULIS PARAGRAF/KODE HTML DI SINI </div>

8. Dashed Border

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 dashed; padding: 10px; background-color: #82CAFA; text-align: left;">TULIS PARAGRAF/KODE HTML DI SINI </div>

9. Border dengan scroll, lebar dan tinggi

TULIS PARAGRAF/KODE HTML DI SINI

Berikut kodenya:

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;">TULIS PARAGRAF/KODE HTML DI SINI </div>

Untuk backgraound colour, silahkan anda ganti dengan sesuka anda. untuk kode warna silahkan lihat di sini: kode warna.
Selamat mencoba, semoga bermanfaat.