Pos

Menampilkan postingan dari November, 2013

Cara Pasang Notifikasi Komentar Blog Seperti Google Plus

Gambar
Membuat notifikasi komentar akan menjadikan blog Anda lebih interaktif dan juga menarik. Sebagai latihan, kita akan membuatnya seperti notifikasi Google Plus oleh karena itu artikel-artikel ini serupa dengan artikel-artikel Notifikasi Komentar ala Google Plus.

Langkah 1 : Simpan jQuery di atas tag  </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.
Langkah 2 : Simpan CSS ini di atas ]]></b:skin> atau </style>

/* Notifikasi Komentar ----------------------------------------------- */ #cm-total { position:fixed; top:14px; right:0; width:188px; text-align:left; z-index:9999; cursor:pointer; } .total-counter { background-color:#d11919; color:white; padding:1px 4px; font-family:Arial,Sans-serif; font-size:11px; border-radius:5px; font-weight:bold; } #notif { position:fixed; top:20px; righ…

Membuat Iklan Baris Menggunakan jQuery

Gambar
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…

Membuat Judul pada Tag PRE

Gambar
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…

Ciptakan Efek Tajam dan Tipis pada Elemen

Gambar
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…

Membuat Penomoran Otomatis Pada Blockquote

Gambar
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…