Love and Life » Tips Blogger [2]

Apr '07

Tips Blogger [2]

Files under Blog | Posted by Amorita Kurnia Dewi

Tips kedua bagi pengguna Blogger, adalah tentang tooglecomment.

Kadang kita merasa kalau ingin membaca komentar ke blog teman terasa lama karena harus loading dulu. Dulu aku mengatasinya dengan menggunakan third-party dari Haloscan. Tapi ternyata hal ini mengakibatkan loading halaman awal menjadi lebih lama karena harus koneksi dulu ke Haloscan tiap kali kita membuka blog kita.

Ada cara lain untuk mengatasinya, yaitu menggunakan tooglecomment seperti pada blogku ini. Terinspirasi dari blognya Catuy, ditambah dengan browsing di internet, juga dari lihat source code HTML blognya Catuy (hehe,,, makasih Cat ^_^), aku menemukan cara untuk membuat komentar seperti ini.

Pertama, tambahkan code berikut di bagian CSS blog kita:

.commenthidden {display:none}
.commentshown {display:inline}

Kedua, tambahkan code berikut di dalam tag <head>:

<script type=”text/Javascript”>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className==”commentshown”) {
whichpost.className=”commenthidden”;
} else {
whichpost.className=”commentshown”;
}
}
</script>

Ketiga, ganti kode:

<BlogItemCommentsEnabled>
…
</BlogItemCommentsEnabled>

menjadi:

<BlogItemCommentsEnabled>
<a href=”javascript:togglecomments(’c<$BlogItemNumber$>’)”>
<script type=”text/javascript”>
var a = <$BlogItemCommentCount$>;
if(a == 0) {document.write(’Kasih komentar donk!’);}
else if(a == 1){document.write(’satu komentar’);}
else if(a == 2){document.write(’dua komentar’);}
else {document.write(a + ‘ komentar’);}
</script>
</a>
</BlogItemCommentsEnabled>

Keempat, ganti kode:

<BlogItemCommentsEnabled>
…
</BlogItemCommentsEnabled>

menjadi:

<span class=”commenthidden” id=”c<$BlogItemNumber$>”>
<BlogItemCommentsEnabled>
<br /><div class=”data-comments”><$BlogItemCreate$></div>
<BlogItemComments>
<div class=”author”>
<$BlogCommentDeleteIcon$>
At <a href=”#<$BlogCommentNumber$>”
title=”comment permalink”><$BlogCommentDateTime$></a>
<b><$BlogCommentAuthor$></b> berkomentar:
</div>
<div class=”comment-body”><$BlogCommentBody$></div>
</BlogItemComments>
<br /><br />
</BlogItemCommentsEnabled>
</span>

Mudah kan? Kalau masih bingung, bisa lihat kode HTML ku (klik kanan -> View Source).