Memberi Highlight Pada Teks Tertentu

Menonjolkan Teks Tertentu Dalam Postingan : Sebenarnya Tips dan Trik Blog pernah mengetengahkan tips serupa di sini. Pada tips yang kedua ini, walaupun cara penggunaannya tidak sepraktis yang terdahulu namun kita dapat memperoleh efek/tampilan yang lebih fleksible. Dengan cara mengganti warna background, atau jenis/warna border, jika menginginkan, kita akan mendapatkan hasil tampilan/warna yang berbeda-beda antara satu dengan yang lainnya sesuka kita.

Fleksible??!!! Maksud saya begini,…

Kita dapat memberi efek/tonjolan yang berbeda antara suatu teks tertentu dengan teks lainnya atau bahkan kita dapat memberi background berupa image.

Contohnya begini.

Pada teks yang pertama, saya menginginkan warna backgroundnya hijau dan pada teks yang kedua saya ingin memberikan warna background biru, dan kemudian pada teks yang ketiga, saya ingin memberikan background image, masing-masing seperti di bawah ini.

Tampilan Pertama

NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/

Tampilan Kedua

NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/

Tampilan Ketiga

NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/

Bagaimana cara untuk membuatnya?? Berikut caranya.

Untuk membuat seperti Tampilan Pertama dan Tampilan Kedua, adalah dengan menggunakan kode html dengan format seperti di bawah ini.

<div style="background:#9AFE2E; border:1px dotted #0B3B0B; padding:10px;">
TEKS YANG INGIN DIBERI HIGHLIGHT
</div>

Keterangan

background: #9AFE2E
Adalah kode untuk warna background yang kita dapat ganti dengan warna lainnya sesuai selera masing, untuk kode warna dapat dilihat di sini.

border:1px dotted #0B3B0B
Adalah kode untuk border, di mana kita dapat merubahnya sesuai selera dan kebutuhan masing-masing,
1px menunjukkan ukuran border yaitu sebesar 1 pixel,
dotted menunjukkan style border,
dan #0B3B0B adalah kode warna border.

Padding:10px
Adalah kode yang digunakan untuk memberi jarak atau space dari antara garis dan content (isi), di mana kita juga dapat merubahnya sesuai kebutuhan.

Untuk membuat tampilan yang ketiga adalah dengan kode html dengan format seperti berikut ini.

<div style="background:url(URL_Image); width:400px; height:300px; padding:10px;">

TEKS YANG INGIN DIBERI HIGHLIGHT

</div>

Keterangan

background:url(URL_Image)
Adalah kode image untuk background, kita dapat mengganti URL_image masing-masing

width:400px; height:300px
Adalah kode lebar dan tinggi area yang dapat kita sesuaikan dengan kebutuhan masing-masing.

Selamat Mencoba

Baca juga yang ini.

Highlight Pada Postingan Bagian Pertama
Description: Memberi Highlight Pada Teks Tertentu Rating: 4.5 Reviewer: Unknown - ItemReviewed: Memberi Highlight Pada Teks Tertentu