Penggunaan jQuery pada Blogger Comment
June 16, 2008 by Adam Pahlevi
Filed under Google Blogger
Asal tau aja ya (ih galak banget sih bahasanya), jQuery adalah top JavaScript untuk mempercantik permainan halaman seperti halnya Lighbox. jQuery sebenernya udah lama naik daun, tapi gak ada yang tahu, ya, kali ini saya akan memberi tahu–sekaligus tempenya tentang bagaimana menggunakan dan mengkolaborasikan dengan apik antara jQuery dengan Comment di Blogger.
Pertama-tama, kita harus menggunakan kode ini untuk mengimport berbagai librari unik milik jQuery (sapa sih yang buat jQuery? hebat bener!):
<script src=’http://code.jquery.com/jquery-latest.min.js’ type=’text/javascript’/>
Kode diatas diapain? tentu saja taruh (biasanya dibawah tag <head>) di jejeran kode script. Masak nggak tahu sih gimana caranya? pasti tau kan! (jangan menyerah dan jangan lelah untuk mencari tahu kalau ingin berhasil dan bisa!)
Setelah itu, cari kode ini: <b:widget id=’Profile1′ locked=’false’ title=’xxx’ type=’Profile’>. Dalam kode tersebut, kita akan bisa menemukan kode ini: <b:else/> <!– normal blog profile –>. Lha, segera saja, sesudah kode tersebut, dibawah kode tersebut, masukkan saja kode ini:
<script type=’text/javascript’>
$().ready(function() {
$(’dl#comments-block dt a’).each(function(i) {
if($(this).attr(’href’) == ‘<data:userUrl/>’) {
$(this).parent(’dt’).addClass(’author-comment’).next(’dd.comment-body’).addClass(’author-comment’).next(’dd.comment-footer’).addClass(’author-comment’);
}
});
});
</script>
Bagaimana? apakah ada pertanyaan? yang terakhir tetapi tidak kalah pentingnya adalah memasukkan kode-kode CSS berikut agar tampilan kolaborasi jQuery seperti apa yang kita inginkan. kopikan kode berikut dalam seksi CSS:
dl#comments-block dt.author-comment {
background-image: none;
background-color: #EDE5BE;
margin-bottom: 0px;
padding: 6px 0 6px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid #FFF7CF;
}
dl#comments-block dd.comment-body.author-comment {
color: #593622;
background-color: #EDE5BE;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px;
border: 1px solid#ccc;
border-top: 1px solid #CBC4AC;
}
dl#comments-block dd.comment-footer.author-comment {
font-size: .8em;
background-color: #CBC39C;
padding: 3px;
margin-top: 0px;
float: right;
border: 1px solid #ccc;
border-top: none;
}
Fitriansyah on Tue, 17th Jun 2008 6:26 am
waah,ap lg tu css gmn cara masukiny?Maklum br 2 mggu blogging,tp artikel ini bagus mas adam..