Antara tahun 2007-2008 para blogger dihebohkan dengan layanan yang mirip dengan DisQus, tetapi sayang layanan tersebut bersifat sepihak, hanya menguntungkan pemilik layanan dan tidak ada timbal balik kepada pemilik blog. Ini membuat para blogger dengan segera membuang layanan itu, karena jelas merugikan. Dalam arsip artikel lama Blogger Tune-Up pernah dibahas hal tersebut. Tapi kini DisQus benar-benar berbeda dengan layanan yang pernah booming tersebut. Preview DisQus lihat di blog Kotretan Hendriono.
Beberapa kelebihan DisQus :- Lebih terbuka untuk dikembangkan oleh siapapun
- Mendukung API, OpenID, Gravatar
- Memberikan trackback dan linkback kepada blog
- Pengelolaan komentar lebih mudah
- Mendukung layanan lain, misal FeedBurner, Facebook, Twitter dan lainnya
- Mampu meningkatkan SERP blog dalam rangka mendukung SEO (layanan ini masih terus dikembangkan)
- Tidak terlalu memberatkan loading blog
- Tampilan yang mudah di modifikasi (Support CSS)
- Membuat tampilan blog terlihat lebih professional
- Mudah dalam proses integrasi dengan Template Blogger
Integrasi DisQus pada Blogger
Perhatian! Backup terlebih dahulu Template sebelum melakukan modifikasi kode, dan lebih baik lakukan proses modifikasi blogger hack dibawah ini melalui file backup template (tidak langsung secara online).
Langkah 1Siapkan script code dari DisQus (Baca: Memanfaatkan Layanan DisQus)
Langkah 2
Login ke Blogger
Langkah 3
Masuk ke "Tata Letak - Edit HTML"
Langkah 4
Checklist "Expand Template Widget"
Langkah 5
Cari kode dibawah ini:
]]></b:skin>Langkah 6
Masukan kode CSS dibawah ini diatas kode pada langkah 5:
#disqus_thread, #disqus_thread #dsq-content {width: 100%;}
Langkah 7Cari kode dibawah ini (utamakan yang diblok):
<p class='comment-footer'>Langkah 8
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if>
</b:if>
</p>
Non aktifkan layanan komentar bawaan blogger atau hapus dan tambahkan kode DisQus, sehingga kode menjadi seperti dibawah ini (perhatikan kode yang diblok):
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>Lihat Komentar »</a>
</b:if>
</b:if>
</p>
Perhatikan kode diatas! Kode yang terletak diantara tag <!-- kode -->, ini berarti dinonaktifkan atau anda bisa saja menghapusnya, namun demi keamanan seandainya suatu hari nanti kita ingin mengaktifkan kembali layanan komentar bawaan blogger maka kita tinggal mengembalikan ke posisi sebelumnya.
Langkah 9Cari kode dibawah ini(utamakan yang berwarna biru):
<h3>Langkah 10
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if>
</h3>
Modifikasi kode diatas sehingga menjadi seperti kode dibawah ini:
<h3>Langkah 11
<!-- <b:if cond='data:post.numComments == 1'> -->
<!-- 1 <data:commentLabel/>: -->
<!-- <b:else/> -->
<!-- <data:post.numComments/> <data:commentLabelPlural/>: -->
<!-- </b:if> -->
Daftar Komentar:
</h3>
Cari kode dibawah ini:
</b:if>Langkah 12
<div id='backlinks-container'>
Masukan kode DisQus dibawah ini diatas kode pada langkah 11:
<!-- begin code disqus -->Perhatikan!
<div id='disqus_thread'/>
<div id='disqus_post_title' style='display:none;'><data:post.title/></div>
<div id='disqus_post_message' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>
var disqus_url = '<data:post.url/>';
var disqus_title = document.getElementById('disqus_post_title').innerHTML;
var disqus_message = document.getElementById('disqus_post_message').innerHTML;
</script>
<script src='http://disqus.com/forums/DISQUS-SHORT-URL/embed.js' type='text/javascript'/>
<noscript><a expr:href='"http://DISQUS-SHORT-URL.disqus.com/?url=" + data:post.url'>View the entire comment thread.</a></noscript>
<a class='dsq-brlink' expr:href='"http://disqus.com"'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<!-- end code disqus -->
- Kode DisQus pada langkah 12 harus diletakan tepat diatas kode pada langkah 11
- Ubah DISQUS-SHORT-URL sesuai dengan yang anda dapatkan dari DisQus
Silahkan ambil napas dulu tapi jangan merokok atau ngemil (bulan puasa lho...) kecuali blogger hack ini dicoba malam hari. Jika sudah merasa lebih tenang, lanjutkan...!
Langkah 14Cari kode dibawah ini:
</body>Langkah 15
Masukan kode DisQus dibawah ini tepat diatas kode pada langkah 14:
<!-- begin code disqus -->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script type="text/javascript" src="http://disqus.com/forums/DISQUS-SHORT-URL/get_num_replies.js' + query + '"></' + 'script>');
})();
</script>
</b:if>
<!-- end code disqus -->
Perhatikan kode diatas! Ubahlah DISQUS-SHORT-URL dengan kode yang anda peroleh dari DisQus
Langkah 16Simpan template dan preview blog
Keterangan:
- Jika form komentar (bagi template yang sudah menyertakan form komentar dibawah artikel) bawaan sistem blogger masih tetap muncul, nonaktifkan form komentar dengan salah satu teknik dibawah ini:
Non aktifkan form komentar melalui "Pengaturan - Komentar" dan ubah option "Penempatan Formulir Komentar" menjadi "" atau "", lihat gambar dibawah ini:
Cara IILihat kembali langkah 8 diatas dan hapuslah kode yang diblok:
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>Lihat Komentar »</a>
</b:if>
</b:if>
</p>
Sehingga kode menjadi seperti dibawah ini:
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>Lihat Komentar »</a>
</b:if>
</p>
- Teknik ini adalah teknik paling aman karena komentar yang pernah dibuat melalui sistem komentar bawaan blogger akan tetap ada, bahkan pada mode tertentu komentar tetap ditampilkan tetapi link/form untuk menambahkan komentar baru dengan sistem komentar bawaan blogger sudah dinonaktifkan.
- Sambil hati berdebar-debar (apakah berhasil atau tidak berhasil) ambil napas panjang, lemaskan jari-jari terutama jari telunjuk kanan yang sudah lelah klak-klik tombol mouse, scroll atas bawah nyari kode yang memusingkan dan BOOOM! Berhasil!
Kode Blogger Hack secara keseluruhan setelah proses integrasi DisQus pada blogger secara manual:
<b:if cond='data:post.allowComments'>
<h3>
<!-- <b:if cond='data:post.numComments == 1'> -->
<!-- 1 <data:commentLabel/>: -->
<!-- <b:else/> -->
<!-- <data:post.numComments/> <data:commentLabelPlural/>: -->
<!-- </b:if> -->
Daftar Komentar:
</h3>
...
...
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>Lihat Komentar »</a>
</b:if>
</p>
<!-- begin code disqus -->
<div id='disqus_thread'/>
<div id='disqus_post_title' style='display:none;'><data:post.title/></div>
<div id='disqus_post_message' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>
var disqus_url = '<data:post.url/>';
var disqus_title = document.getElementById('disqus_post_title').innerHTML;
var disqus_message = document.getElementById('disqus_post_message').innerHTML;
</script>
<script src='http://disqus.com/forums/DISQUS-SHORT-URL/embed.js' type='text/javascript'/>
<noscript><a expr:href='"http://DISQUS-SHORT-URL.disqus.com/?url=" + data:post.url'>View the entire comment thread.</a></noscript>
<a class='dsq-brlink' expr:href='"http://disqus.com"'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<!-- end code disqus -->
</b:if>
<div id='backlinks-container'>
...
...
<!-- begin code disqus -->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script type="text/javascript" src="http://disqus.com/forums/DISQUS-SHORT-URL/get_num_replies.js' + query + '"></' + 'script>');
})();
</script>
</b:if>
<!-- end code disqus -->
</body>
Selamat mencoba, semoga berhasil... Tinggalkan pesan pada komentar jika mengalami kegagalan dan Happy Blogging walaupun lapar... :)
