Jelas in Blog

Membuat iklan teks atau iklan baris tidaklah sulit, cukup membuat sebuah link biasa saja. Namun tentu tampilannyapun biasa saja alias kurang menarik. Padahal iklan haruslah menarik agar pengunjung mau membaca dan kemudian mengelik iklan tersebut.


Artikel ini menuntun Anda mempercantik iklan baris agar terlihat lebih menarik menggunakan CSS dan jQuery.

DEMO
Bagaimana membuatnya?

HTML
<div class='iklan-teks-sidebar' id='iklan-teks'> <!-- iklan ke 1 --> <div data-header='Yujikop'> <span class='isi-iklan'><a class='judul' href='http://yujikop.com' target='_blank'>Yujikop</a><a href='http://yujikop.com' target='_blank'>www.yujikop.com</a><span class='isi'>Windows and Full Version legal Software<a class='panah-besar' href='http://yujikop.com' target='_blank'><img alt='arrow' src='http://2.bp.blogspot.com/-oI…

Pernah melihat blog yang menggunakan tag pre? Salah satunya adalah blog  yang sedang Anda baca ini. Coba perhatikan tag pre-nya, terdapat judul dan warna latar berbeda sesuai kode. Bila kode CSS maka warna latar judulnya hijau, HTML warna latar judulnya merah, dst.


Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi Anda yang ingin menggunakan nya, silahkan simpan kode ini di atas ]]></b:skin> atau </style>

pre[data-codetype]:before { content:attr(data-codetype); display:block; margin:-11px -13px 10px -54px; padding:8px 12px; font-family:Arial,Sans-serif; font-size:14px; text-transform:uppercase; background-color:#41749f; color:white } pre[data-codetype=&quot;CSS&quot;]:before{background-color:#5fbbba} pre[data-codetype=&quot;HTML&quot;]:before{background-color:#4fc1eb} pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60} pre[data-codetype=&quot;JQuery&quot;]:before{backgrou…

Border sering digunakan untuk mempertegas batas antar elemen. Sebagai contoh perhatikan menu dropdown berikut.
Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu asing dengan teknik untuk membuat efek seperti ini.

Menggunakan CSS untuk menciptakan elemen kotak dengan efek bayangan saja tidak cukup untuk memberikan kesan sisi yang tajam dan dimensi yang tipis seperti gambar di atas:

/* Belum cukup! */ .box { background-color:white; border:1px solid #bbb; box-shadow:0 4px 15px -4px rgba(0,0,0,.6); }
Hasilnya.
Deklarasi di atas sudah cukup untuk menciptakan efek kotak bergaris batas dan berbayang, namun belum cukup memberikan efek tajam pada elemen tersebut. Coba perhatikan dengan seksama pada menu dropdown gambar di awal, garis batas pada menu tersebut ternyata tembus pandang:


Efek semacam ini tidak cukup dibuat hanya dengan warna solid dan bayangan, melain…

Anda tentu biasa melihat tag PRE memiliki nomor baris di sisi kiri. Tahukah Anda bahwa hal ini bisa juga diterapkan pada blockquote. Bagaimana caran Membuat Penomoran Otomatis Pada Blockquote? Ikuti langkah-langkah berikut.


DEMO
Simpan baris kode ini di atas ]]></b:skin> atau </style>

blockquote { background-color:#eee; font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important; color:#444; overflow:auto; margin:0 0 1em; padding:1em; } blockquote, blockquote .line-number { /* Ukuran line-height antara teks di dalam tag <blockquote> dan <span class="line-number"> harus sama! */ font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important; display:block; white-space:pre; } blockquote .line-number { float:left; margin:-1em 1em -1em -1em; text-align:right; background-c…