CSS : HighLight Important Text on The Box

Terinspirasi tampilan di blognya Wicky dalam salah satu postingnya yang menampilkan teks penting yang terbungkus di dalam kotak laiknya tampilan di surat kabar, kali ini edittag coba membidiknya dari sisi CSS.

Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.

Kode berikut akan memasung tek yang kita anggap penting dimunculkan dalam sebuah kotak dengan harapan teks tersebuat akan mewakili isi postingan kita dengan penataan disebalah kanan posting.

Berikut kodenya :

<div style=”background-color:#00A2C6;color:#fff; width:200px;float: right;border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 5px;margin-left:15px;”>Isi teks yang kita anggap penting.</div>

Contoh dari penggunaan kode ini seperti terpampang di bagian atas posting ini.Dengan demikian isi dari posting kita akan lebih mudah dikenali oleh pengunjung.Tak sekedar judul posting yang bisa mewakili isi dari posting yang kita tulis, namun dengan cara ini kita bisa menyuguhkan pesan utama atau pesan yang ingin kita garis bawahi.

Catatan :
background-color akan mewakili warna bacground dalam kotak,
color mewakili warna teks dalam kotak,
width mewakili luas dari lebar kotak,
float mewakili letak penampilan (apakah di kanan atau kiri),

Sila dicoba.

Add to Technorati Favorites

6 pemikiran pada “CSS : HighLight Important Text on The Box

  1. ass wr wb… makasih ya kang infonya, dapet ilmu baru nih….sebenernya dari kemaren2 pengen di tanyakan hal ini cuman karena terlalu banyak pertanyaan yg mesti ditanyakan ke akang jd satu-satu deh, dan takutnya akang bosen hehehe, terus ttg bikin HTML banner itu kang kalau kotak HTMLnya sih muncul tapi bannernya ga muncul kenapa ya, ukurannya bukan ya yg salah, jd bingung dicoba terus juga tetep ga bisa, pengen dong kaya nuha jd ngiri juga dibikinin hehehe bayar ngggak kang, berapa?, mau dong buat tips dunia anak

    Suka

  2. Mas Agus,… utk pengkodean warna kan sprt ini: background-color:#00A2C6;color:#fff

    Bisa gak, ditulis langsung utk warna sprt: red, blue, green???

    Utk kode2 warna sprt mas Agus itu, dapatnya drmana sih????

    Suka

  3. gini kang, kan di blog akang tertulis cara untuk di cssnya, nah kalo untuk misahin antara yang penting dengan yang tidak (yg dikotakin dengan yang tidak) gimana?

    ada kode khusus ga (misalnya “span class=fullpost” dan “/span” untuk read more)

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s