Menonjolkan Teks Tertentu pada Postingan

Seringkali jika kita baca buku tutorial seperti misalnya tutorial HTML, tutorial Bahasa Pemrograman dan buku-buku tutorial yang lainya kita menjumpai seperti kode-kode atau script yang ditonjolkan dengan memberi background dan pembatas yang beda dengan teks-teks yang lainya yang ada di buku yang berguna untuk mempermudah para pembaca buku membedakan script-script dengan tulisan yang lainya. Begitu juga di blog jika Anda menulis tentang tutorial yang memungkinkan untuk menulis kode-kode HTML dan script-script yang lainya agar pembaca lebih mudah untuk membedakan

Contoh seperti dibawah ini :

HANYA CONTOH

POSTINGAN YANG DITONJOLKAN DISINI

HANYA CONTOH

Dan seperti ini :

Kesepian hati…

Adakah benar adalah lorong waktu kebahagiaan ?

Kesunyian hati…

Adakah sungguh adalah suara merdu saat usia senja ?

Aku takut, aku salah kira

Meski kusadari kini ku di tengah itu semua

Aku hanya dapat bertanya

Tanpa sedikitpun kepastian akan jawabnya

(http://www.anggrekbiru.com/)

Terlihat perbedaan dengan contoh pertama dan kedua : contoh pertama dengan background warna dan contoh kedua dengan background gambar.

Untuk membuatnya silahkan perhatikan cara berikut

cara pertama yaitu cukup mudah kita tinggal masuk ke posting editor dan tulis code seperti dibawah ini di posting editor bagian "Edit Html"

untuk background warna kita gunakan code seperti dibawah ini

<div style="background:#E5F3FF; border:1px ridge #000000; padding:5px;">

DISINI POSTINGAN YANG MAU DITONJOLKAN

</div>

background:#FFFFCC;
adalah warna background, codenya bisa Anda ganti menurut warna yang Anda sukai.

border:1px ridge #000000;
adalah garis tepinya 1px adalah ketebalan dari garis tepinya, bisa kamu ganti ketebalanya sesuai selera Anda, ridge adalah jenis bordernya bisa kamu ganti sesuai selera kamu. #000000 adalah kode warna dari border silahkan Anda ganti dengan 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

untuk background gambar seperti dibawah ini

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0tm4jOxqJPiANGjt9pUQ2RsuSCr_TSIbKb6Hw8lBGUypQbJngSDILbJBDLK0rmEELdQoT3KIUKNv7EYwK-n92bvJaptb66ueSHItaolhX3hx4QqJSuSqwjKs-AOenVso4u266M89eqrk/); width:508px; height:362px; padding:5px;">

DISINI TEXT

DISINI TEXT

</div>

Text yang tercetak merah diatas adalah url gambarnya. width:508px; adalah lebar area dan height:362px; adalah tinggi area.