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 :

DI DALAM KOTAK INI POSTINGAN YANG MAU DITONJOLKAN

atau seperti ini

mari belajar ngeblog

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 copy code seperti dibawah ini

<div style="background:#666666; border:1px dotted #F5003D; padding:5px;"><br><br>DIDALAM KOTAK INI POSTINGAN YANG MAU DITONJOLKAN<br><br></div>

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;
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/AVvXsEgvqxrl4shD87rdUocQkci9SgnsOzeQc4z_ASWCVtE13-gCO5Cm2MjILipNe2Nqp3xx5DfHuGr-6bGj84PW7bHUnRFyB9u6MT1ytnquba3ugASkEGA4q8xK32f-xXeWyX0M7cuzZjtS9o8/); width:508px; height:362px; padding:5px;"><br><br><span style="color: rgb(255, 255, 255);">mari belajar ngeblog</span><br><br></div>

Text (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvqxrl4shD87rdUocQkci9SgnsOzeQc4z_ASWCVtE13-gCO5Cm2MjILipNe2Nqp3xx5DfHuGr-6bGj84PW7bHUnRFyB9u6MT1ytnquba3ugASkEGA4q8xK32f-xXeWyX0M7cuzZjtS9o8/) diatas adalah url gambarnya. width:508px; adalah lebar area dan height:362px; adalah tinggi area.

Gimana gampang kan?