kita akan membuat kotak Script yang menjadi bagian dari teks content (teks artikel) blog atau website. Tujuan pembuatan kotak mengelilingi script code ini adalah agar dapat memperjelas dalam membaca code tersebut karena ada efek highlight. Tentu saja ini menjadi lebih menarik bila dibandingkan latar belakang tulisan script polos apa adanya.
Caranya mudah. Anda hanya perlu menambahkan code CSS dan HTML di bawah ini ke dalam template blog (website), maka setiap kali ada posting yang akan ada di dalamnya script, maka script tersebut akan berada di dalam kotak.
Letakkan kode dibawah ini persis diatas ]]></b:skin>
Anda dapat mengubah-ubah letter warna biru (dashed dan #e0ffff) dengan pilihan warna lain dan warna latar belakang website (blog). Untuk pilihan selain “dashed” Anda bisa memilih diantara alternatif-alternatif berikut (beserta contoh Border Style yang akan ditampilkan) :
Agar kode itu berfungsi, maka script atau kode yang akan Anda posting pada halaman Source atau Sumber harus diapit dengan code <p class="alert"> dan </p> atau seperti berikut :
<p class="alert"> ISI / SCRIPT KODE DALAM KOTAK</p>
ISI / SCRIPT KODE DALAM KOTAK misalnya ini :
Silahkan lihat hasilnya seperti Script pertama (diatas gambar Border Style) dengan pilihan “border-style: inset” Jika Script tidak diapit dengan <p class="alert"> dan </p>, maka hasil tampilan script akan sama seperti tampilan Script persis diatas, yaitu POLOS tanpa border style sama sekali.
Caranya mudah. Anda hanya perlu menambahkan code CSS dan HTML di bawah ini ke dalam template blog (website), maka setiap kali ada posting yang akan ada di dalamnya script, maka script tersebut akan berada di dalam kotak.
Membuat border style - arsip website design
- Login dulu ke blogger
- Pilih Design/Rancangan
- Klik Edit HTML
- Cari Kode ]]></b:skin> dengan cara sangat mudah, yaitu Klik CTRL – F dan ketik
]]></b:skin>
Letakkan kode dibawah ini persis diatas ]]></b:skin>
/* Alert */
.alert {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 }
.alert {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 }
Anda dapat mengubah-ubah letter warna biru (dashed dan #e0ffff) dengan pilihan warna lain dan warna latar belakang website (blog). Untuk pilihan selain “dashed” Anda bisa memilih diantara alternatif-alternatif berikut (beserta contoh Border Style yang akan ditampilkan) :
Agar kode itu berfungsi, maka script atau kode yang akan Anda posting pada halaman Source atau Sumber harus diapit dengan code <p class="alert"> dan </p> atau seperti berikut :
<p class="alert"> ISI / SCRIPT KODE DALAM KOTAK</p>
ISI / SCRIPT KODE DALAM KOTAK misalnya ini :
/* Alert */
.alert {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 }
.alert {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 }
Silahkan lihat hasilnya seperti Script pertama (diatas gambar Border Style) dengan pilihan “border-style: inset” Jika Script tidak diapit dengan <p class="alert"> dan </p>, maka hasil tampilan script akan sama seperti tampilan Script persis diatas, yaitu POLOS tanpa border style sama sekali.
Selesai - silahkan coba untuk blog Anda.
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
