Highlight pada Script/Kode di Postingan(1)

Apakah anda pernah membaca sebuah buku,yang pada buku itu terdapat sebagian tulisan yang lebih ditonjolkan dari pada tulisan yang lainnya,seperti warnanya lain,atau ukuran nya yang berbeda dengan ukuran huruf lainnya atau jenis font nya yang berbeda, atau bisa juga tulisan/teks itu diberi background agar lebih memudahkan pembaca membedakan teks yang satu dengan teks yang lain.

Seperti yang terlihat pada blog KK ini, Script kode yang ditampilkan berbeda dengan Tulisan-tulisan yang ada, karna pada kode-kode terdapat background yang membedakannya dengan tulisan lain silahkan lihat contoh berikut ini:

INI HANYA CONTOH

TULIS TEKS YANG INGIN DITAMPILKAN DISINI
HANYA CONTOH
Ataupun seperti ini yang diberi background gambar:

kini kau pergi jauh
hingga tanganku tak mampu memelukmu
hingga kakiku tak mampu mengejarmu
hingga mataku tak mampu menatapmu
hingga teriak panggilku tak mampu kau dengar

ijinkan aku menangis ya
biarlah airmata ini jadi samudra
mengantarku berenang mencarimu
“tapi surga itu ada dilangit?”
(Sumber: http://www.puisi-indonesia.org/puisi/ijinkan- aku-menangis.html)
Gimana tertarik membuatnya,sebenarnya cara membuatnya ada 2 macam,tapi pada kali ini saya hanya menjelaskan versi pertamanya saja(tunggu aja cara keduanya)
Silahkan log in dengan ID Blogger anda dan masuk ke bagian Posting Editor dan tulis kode di bawah ini di bagian Edit HTML

<div style=”background: #DDE4FF; border:1px dotted #223344; padding:5px;”>

TULIS DISINI TEKS YANG INGIN DITONJOLKAN
</div>
background:#DDE4FF;
adalah warna background nya,bisa anda ubah sesuka anda lihat kode warnanya disini
border:1px dotted
adalah garis tepinya 1px yaitu ketebalan dari garis tepinya, kamu bisa ganti ketebalanya dengan yang lain sesuaikan dengan template anda,sedangkan dotted adalah jenis border pada kota highlight script kamu ganti sesuai selera kamu .
#223344 adalah kode warna border silahkan Anda ganti menuruk selera Anda.
padding:5px;
Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi.
tambahkan overflow:auto; jika ingin menambahkan fungsi scroll pada kotak Higlight
untuk background dengan gambar gunakan kode dibawah ini

<div style=”background:url(http://dryicons.com/files/graphics_previews/retro_blue_background.jpg); width:440px; height:400px; padding:5px;”>

TULIS DISINI TEKS
</div>
Text yang tercetak tebal diatas adalah url gambarnya.
width:440px; adalah lebar kotak Higlight
height:400px; adalah tinggi kotak Higlight.
sekian dulu penjelasan dari saya,cara keduanya segera menyusul,bye