Threaded Commenting, Fitur Baru Pada Sistem Komentar Blogger (Blogspot) Yang Memungkinkan Anda Membuat Reply Komentar Seperti Wordpress

Brrr!!! heran, tiap singgah di Bandung kok cuaca gak pernah bersahabat, opo yo gak ada jadwal panas, cerah atau berawan tah disini? *plak - seketika orang-orang Bandung langsung pada ngantri buat ng'gampar pipi gw

Hem... *dengan nada menyesal tau disini bakal dinginnya kaya gini mah gak bakalan saya mau disuruh ngecek kerjaan kesini :) apalagi Gaphe lagi ada di Jakarta, mending juga saya telanjang bareng, sambil berendem air panas ama dia hahaha... yo wes lah gak usah disesali, seenggaknya hari ini saya bisa ketemu sama temen-temen sekolah saya dulu *lol oh ya, saya lagi ama Nita yang dulu sering saya ceritain lho hahaha... sayang orangnya gak mau saya ajak foto bareng, kata dia sih takut saya-nya gak keliatan klo foto pas malem-malem mendung kaya gini *maksud lo Nit? sialan lu, sebenernya klo lu tau kulit gw tuh lebih putih dari pada kulit lu yang oriental itu, cuma yang jadi masalah, belum ada aja krim pemutih yang bisa bikin kulit asli gw waktu masih bayi dulu kembali lagi :D

Okeh, ditengah cuaca hujan deres yang juga sedikit nyebab'in koneksi paket internet saya mendadak kembali ke zaman TelkomNet Instant *lebay mode on malem ini saya mau ngasih kabar gembira untuk anda semua, yang selama ini masih dengan sangat setia menggunakan platform Blogger atau Blogspot sebagai Platform blog kesayangan anda :)

Tau apa kabar gembiranya? kabar gembiranya adalah terhitung 2 hari lalu, Blogger Indonesia sudah dapat menikmati fitur baru Blogger yang bertajuk "threaded commenting" alias sistem komentar yang disertai dengan Reply. So, jangan pernah lagi anda membanding-bandingkan sistem komentar Blogger dengan sistem komentar Wordpress, karena hari ini dengan bangga akan saya umumkan klo sistem komentar Blogger menurut saya jauh lebih baik dari pada sistem komentar Wordpress. Kenapa saya yang juga adalah pengguna Wordpress malah bilang klo sistem komentar Blogger jauh lebih baik? karena untuk bisa menikmati sistem komentar "threaded commenting" ini anda gak harus nginstall plugin apapun :) bahkan tanpa mengubah settingan apapun, anda dapat langsung menikmati sistem komentar "threaded commenting" ini.

Dan untuk anda yang mungkin pernah merasa menuliskan artikel tentang cara membuat "threaded commenting" yang klo saya gak salah mulai ramai digunakan oleh Blogger Indonesia sekitar bulan oktober atau november tahun lalu, menurut saya alangkah lebih bijak jika anda menambahkan dalam postingan tersebut bahwa tutorial "threaded commenting" itu adalah murni dibuat oleh Google, dan bukan milik anda. Kenapa? karena setelah saya tanya langsung di forum bantuan Google, ternyata sistem komentar ini memang sudah dibuat dari tahun lalu dan bahkan sudah dapat dinikmati secara terbatas oleh beberapa Blogger di beberapa negara. So, wajar klo akhirnya ada blogger yang udah duluan nikmatin fitur ini yang justru ngambil script default "threaded commenting" ini dan dibuatkan tutorial yang justru diakui sebagai tutorialnya :) Dan untuk perbandingan, diakhir postingan nanti akan saya lampirkan script default sistem komentar "threaded commenting" ini yang gak akan pernah bisa anda hapus dari template anda :)

But, sebelum masuk ke masalah script, saya ingin lebih dulu menceritakan kejadian awal yang akhirnya membuat saya menyadari keberadaan fitur baru ini. Karena diluar dugaan saya, ternyata kemaren ada salah satu sahabat blogger yang lumayan perhatian sama blog ini dan nanya via E-mail kesaya tentang, kenapa tiba-tiba template blog ini berubah? dan kenapa tiba-tiba bentuk komentar di blog ini jadi lumayan agak aneh untuk diliat *lol

Okeh saya jawab:

Kejadiannya bermula, ketika kamis pagi lalu, saya Isek ngecek sebuah postingan blog ini dan justru mendapati sebuah perubahan aneh yang sempat saya abadikan dalam Screenshoot berikut:

Klo gak keliatan silahkan di perbesar dengan mengklik gambar diatas. Udah keliatan? Okeh, klo udah tolong jangan perhatikan komentar SPAM yang mengatasnamakan payudara, karena yang mau saya bahas kali ini emank bukan tentang itu, melainkan tentang perubahan frontal pada sistem komentar blog ini, yang juga ikut menyebabkan beberapa hal terjadi, seperti warna komentar di blog ini yang berubah menjadi biru, hilangnya form komentar klasik yang sengaja saya tambahkan, serta hilangnya sistem reply yang saya buat secara manual.

Dan jujur aja, waktu ngeliat hal ini kamis pagi lalu, saya justru mikir klo lagi ada orang yang pengen macem-macem sama akun blog ini, itu kenapa hal pertama yang saya lakukan justru LogIn ke akun Gmail saya dan ngecek IP mana aja yang sempet LogIn ke akun email saya selama seminggu terakhir. Biarpun ujung-ujungnya, saya memang hanya mendapati daftar semua IP yang pernah saya gunakan untuk LogIn, dan emank gak ada IP lain yang berhasil masuk ke akun saya.

Dan mulai dari situ, akhirnya saya langsung ngirim sebuah pertanyaan ke forum bantuan Google yang isinya menanyakan kejadian tersebut, beserta penyebab serta cara mengembalikannya. Yang akhirnya dijawab sendiri oleh salah satu karyawan Google yang isinya kira-kira memberitahukan bahwa apa yang saya alami bukanlah sebuah masalah yang timbul karena apa yang saya lakukan sebelumnya, melainkan justru karena secara default pihak Blogger memang sedang mulai memperkenalkan fitur "threaded commenting" nya yang masih dalam tahap pengenalan terbatas yang baru bisa dinikmati oleh beberapa blog, dan dia justru ngucapin selamat karena saya termasuk yang bisa nikmatin fitur itu secara otomatis.

Dan denger jawaban itu seketika saya langsung ngerasa lega, bahkan lebih lega dari pada perasaan yang saya alamin ketika selesai pups *hayah Dan tanpa banyak nanya lagi, saya langsung ngakhirin pertanyaan saya itu dengan kata Thank you so much :)

Dan karena jujur aja saya masih lumayan penasaran sama script yang di inject pihak Blogger atau Blogspot ke dalam template blog ini, akhirnya saya coba cari keberadaan Script "threaded commenting" tersebut dan berhasil menemukannya dengan sempurnya, dan berikut script default dari sistem komentar "threaded commenting" ini:

CSS-nya:

<b:includable id='threaded_comment_css'>
<style>
.comments {clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;

}
.comments .comments-content {
font-size: 14px;
margin-bottom: 16px;
}

.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}

.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}

.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 0px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url(....) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url(....) no-repeat scroll 0 0 transparent;
}

.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;

}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

Javascriptnya:

<b:includable id='threaded_comment_js' var='post'>
<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var postId = &#39;<data:post.id/>&#39;;
var feed = &#39;<data:post.commentFeed/>&#39;;
var authorName = &#39;<data:post.author/>&#39;;
var authorUrl = &#39;<data:post.authorUrl/>&#39;;
var blogId = &#39;<data:top.id/>&#39;;
var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = feed;
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == authorName
&& comment.author.profileUrl == authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var tok = 'comment-form_';
var hash = window.location.hash || '';
var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

// Configure commenting API:
var configJso = {
'maxDepth': 2
};
var provider = {
'id': postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

Dan untuk bagian isi dari class dan variabel comment sendiri, bisa saya pastikan gak ada perubahan apapun :) yang klo anda perhatiin baik-baik sebenernya semua script diataslah yang anda pake klo anda ngikutin tutorial "threaded commenting" manual akhir tahun lalu itu, cuma penamaannya aja yang sedikit beda karena di tutorial-tutorial itu anda diminta mngganti semua CSS komentar anda, plus penambahan sedikit unsur CSS3 di beberapa tutorial yang saya liat ngajarin pembuatan "threaded commenting" ini. Selebihnya, bahkan dalam hal algoritma Javascriptnya menurut saya versi default dari Blogger justru jauh lebih baik :)

So, pesen saya dari pada susah-susah ngikutin tutorial "threaded commenting" yang segala nyuruh anda ngeganti CSS, nambahin JS serta ngeganti Class dan id komentar anda, mending anda biarin aja blog anda kaya biasanya, soalnya menurut jawaban pihak Google, fitur ini akan secara otomatis terpasang jika anda mengaktifkan fitur komentar untuk blog anda. Dan untuk ngerubah settingannya, anda bisa menuju Settings, pilih Other, terus tinggal pilih "Full" dari menu dropdown yang ada di field "Allow Blog Feed", untuk lebih jelasnya silahkan perhatikan gambar dibawah ini:


Dan untuk ngatur bentuknya, anda tinggal masuk ke menu Settings, pilih Posts and Comments, terus pilih "Embedded" dari menu dropdown yang ada di field "Comment Location", untuk lebih jelasnya silahkan perhatikan gambar dibawah ini:


Yupz, just pengaturan bentuk kotak koment yang bisa anda lakukan, karena anda emank gak harus nambahin script apapun :) dan gak akan pernah bisa ngapus script tersebut dari template blog anda, karena saya udah coba ngapus puluhan kali di beberapa PC berbeda dan hasilnya tetep gak bisa, tapi kabar baiknya anda masih di izinkan ngedit CSS-nya :) So, manfaatkan fitur baru ini sebaik mungkin...

Dan terakhir, sebelum pamit kaya biasa saya mau ngajak anda bersulang dulu.... Cheeerrrsss.... (Glek...glek...glek...).... Hah nikmatnya nenggek segelas cokelat panas di cuaca bersalju kaya gini *lebay hahaha

Buat Sahabat DJ Site Semua, Happy Blogging 'n Have a Nice Day :)


Credit: Forum Bantuan Google dan Blogger Buzz