Cara Memberikan Efek yang Menonjol pada Postingan

Sering kita menjumpai di blog2 para master yang menuliskan dengan menonjolkan variasi postingan 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 :

NE Hanya Contoh lho ...

DIDALAM KOTAK INI POSTINGAN YANG MAU DITONJOLKAN

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:#FFFFCC; border:1px dotted #F5003D; padding:5px;">

DIDALAM KOTAK INI POSTINGAN YANG MAU DITONJOLKAN

</div>

background:#FFFFCC;
adalah warna background, codenya bisa Anda ganti menurut warna yang Anda sukai. (lihat code warna disini)

border:1px dotted #F5003D;
adalah garis tepinya 1px adalah ketebalan dari garis tepinya, bisa kamu ganti ketebalanya sesuai selera Anda, dotted adalah jenis bordernya bisa kamu ganti sesuai selera kamu. #F5003D 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 dengan code seperti dibawah ini :

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

DISINI TEXT YANG MAU DITONJOLKAN

</div>

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

Gimana gampang kan?

Saya mendapat ide menulis trik ini dari tutorial jitu ... saya rasa cukup jelas panduan yang saya tuliskan dalam posting ini. Cara ini adalah sebagian trik untuk menonjolkan text tertentu, trik-trik berikutnya akan menyusul.

Semoga dapat membantu y ...Happy Blogging

Posted in: Tutorial Blog