Tuesday, April 10, 2012

Solusi jitu ketika button reply comment tak berfungsi - Blogger New Threaded Comments

Kasus tidak berfunginya button reply comment di New Blogger Threaded Comment ternyata tak hanya dialami oleh satu atau dua blogger saja. Sangat banyak yang mengeluhkan permasalahan ini, termasuk satu diantaranya 'gubhugreyot sendiri". Salah satu blog yang aku gunakan selama hampir dua bulan aku biarkan tanpa fungsi reply comment yang normal fungsinya. Button teks reply comment memang tetap "nyanggong" di tempatnya, tapi ketika di klik tak ada reaksi apapun yang muncul. Button reply comment Blogger New Threaded Comments tersebut tetap diam membisu "sekalipun di embat pakai martil". He ... benar-benar bikin jengkel dan putus asa! Dus ... akhirnya setelah dua bulan satu solusi akhirnya aku temukan juga. Javascript Threaded Commentlah yang menjadi masalah mengapa si button reply tak dapat bekerja dan diam membisu sekalipun "di klik beribu kali".

Munculnya permasalahan gangguan atau disfungsi button reply comment pada New Blogger Threaded Comments sebenarnya terjadi karena proses editing, modifikasi atau penggantian template dengan template baru hasil download. Setelah disfungsi terjadi, sekalipun telah dilakukan pergantian template "default blogger", baik menggunakan template Tata Letak (Layout) ataupun Blogger Designer (Perancang Template) ternyata button reply tetap seperti sedia kala. Kerusakan ini menjadi bersifat permanen dan selalu mengikuti sekalipun template diganti berkali-kali. Mengganti template ternyata bukan mengatasi masalah atau menjadi sebuah solusi. Javascript Threaded Comments-lah yang harus diperbaiki atau diganti. Di bawah ini ada dua buah contoh potongan javascript Threaded Comment yang bermasalah dan membuat button reply comment tak dapat berfungi dan javascript yang seharusnya digunakan:
  1. Silahkan anda cermati kode yang berwarna orange, hijau dan merah:
    Javascript yang bermasalah-1:
    <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;;
    var maxThreadDepth = &#39;<data:post.commentMaxThreadDepth/>&#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;
    }

    ... etc

    //]]>
    </script>
  2. Kasus yang ini perlu di cermati benar! Sekalipun yang kita temukan bukan kode bertuliskan "defer" namun sudah seperti yang seharusnya digunakan bertuliskan "async", javascript tetap tidak akan berfungsi karena beberapa kode di bawahnya bermasalah (warna hijau dan warna merah).
    Javascript yang bermasalah-2:
    <script async='async' 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;;
    var maxThreadDepth = &#39;<data:post.commentMaxThreadDepth/>&#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;
    }

    ... etc

    //]]>
    </script>
  3. Lihat dan bandingkan dengan yang di bawah ini. Javascript yang seperti inilah yang seharusnya digunakan. Selain beberapa kode javascript pada bagian awal sudah tak sama dengan yang seharusnya digunakan, pada bagian selanjutnya, beberapa kode javascript juga tak sama.
    Javascript yang seharusnya digunakan:
    <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

    <script type='text/javascript'>
    (function() {
    var items = <data:post.commentJso/>;
    var msgs = <data:post.commentMsgs/>;
    var config = <data:post.commentConfig/>;

    // <![CDATA[
    var cursor = null;
    if (items && items.length > 0) {
    cursor = parseInt(items[items.length - 1].timestamp) + 1;
    }

    ... etc

    //]]>
    </script>

Cara mengganti javascript :

  1. Login ke Blogger.
  2. Dasbor (Dasboard).
  3. Design (Rancangan).
  4. Edit HTML.
  5. Backup Template.
  6. Cari Kode:
    <b:includable id='threaded_comment_js' var='post'>
    Di bawah ini terdapat javascript seperti yang terlihat dalam box di atas. Ganti javascript bermasalah (javascript-1 atau javascript-2) dengan javascript berikut ini:
    Blogger New Threaded Comment Script:
    <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
    <script type='text/javascript'>
    (function(){var l=<data:post.commentJso/>;var j=<data:post.commentMsgs/>;var r=<data:post.commentConfig/>;
    //<![CDATA[
    var e=null;if(l&&l.length>0){e=parseInt(l[l.length-1].timestamp)+1}var p=function(u){if(u.gd$extendedProperty){for(var t in u.gd$extendedProperty){if(u.gd$extendedProperty[t].name=="blogger.contentRemoved"){return'<span class="deleted-comment">'+u.content.$t+"</span>"}}}return u.content.$t};var m=function(w){e=null;var A=[];if(w&&w.feed&&w.feed.entry){for(var x=0,B;B=w.feed.entry[x];x++){var z={};var t=/blog-(\d+).post-(\d+)/.exec(B.id.$t);z.id=t?t[2]:null;z.body=p(B);z.timestamp=Date.parse(B.published.$t)+"";if(B.author&&B.author.constructor===Array){var u=B.author[0];if(u){z.author={name:(u.name?u.name.$t:undefined),profileUrl:(u.uri?u.uri.$t:undefined),avatarUrl:(u.gd$image?u.gd$image.src:undefined)}}}if(B.link){if(B.link[2]){z.link=z.permalink=B.link[2].href}if(B.link[3]){var y=/.*comments\/default\/(\d+)\?.*/.exec(B.link[3].href);if(y&&y[1]){z.parentId=y[1]}}}z.deleteclass="item-control blog-admin";if(B.gd$extendedProperty){for(var v in B.gd$extendedProperty){if(B.gd$extendedProperty[v].name=="blogger.itemClass"){z.deleteclass+=" "+B.gd$extendedProperty[v].value}}}A.push(z)}}return A};var h=function(v){if(c()){var u=r.feed+"?alt=json&v=2&orderby=published&reverse=false&max-results=50";if(e){u+="&published-min="+new Date(e).toISOString()}window.bloggercomments=function(x){var w=m(x);e=w.length<50?null:parseInt(w[w.length-1].timestamp)+1;v(w);window.bloggercomments=null};u+="&callback=bloggercomments";var t=document.createElement("script");t.type="text/javascript";t.src=u;document.getElementsByTagName("head")[0].appendChild(t)}};var c=function(){return !!e};var a=function(t,v){if("iswriter"==t){var u=!!v.author&&v.author.name==r.authorName&&v.author.profileUrl==r.authorUrl;return u?"true":""}else{if("deletelink"==t){return r.baseUri+"/delete-comment.g?blogID="+r.blogId+"&postID="+v.id}else{if("deleteclass"==t){return v.deleteclass}}}return""};var f=null;var o=null;var k=undefined;var d=function(t,u){if(f==null){f=document.getElementById("comment-editor");if(f!=null){f.height="250px";f.style.display="block";o=f.src.split("#")}}if(f&&(t!==k)){document.getElementById(u).insertBefore(f,null);f.src=o[0]+(t?"&parentID="+t:"")+"#"+o[1];k=t}};var b=(window.location.hash||"#").substring(1);var n,i;if(/^comment-form_/.test(b)){n=b.substring("comment-form_".length)}else{if(/^c[0-9]+$/.test(b)){i=b.substring(1)}}var g={maxDepth:r.maxThreadDepth};var q={id:r.postId,data:l,loadNext:h,hasMore:c,getMeta:a,onReply:d,rendered:true,initComment:i,initReplyThread:n,config:g,messages:j};var s=function(){if(window.goog&&window.goog.comments){var t=document.getElementById("comment-holder");window.goog.comments.render(t,q)}};if(window.goog&&window.goog.comments){s()}else{window.goog=window.goog||{};window.goog.comments=window.goog.comments||{};window.goog.comments.loadQueue=window.goog.comments.loadQueue||[];window.goog.comments.loadQueue.push(s)}})();
    //]]>
    </script>
  7. Simpan Template (Save Template).

Catatan/keterangan:

  1. Klik di sini untuk melihat hasil penggunaan javascript pada blog/template yang sebelumnya mengalami masalah pada fungsi button reply comment.
  2. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:




Posting » Ngahad PAHING, April, 08, 2012

» Happy Blogging - gubhugreyot «