Cara Buat Komentar Thread Blogger Default Thread

Berbagi-Kreativitas.blogspot.com - بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم Salam Blogger! Pada kesempatan kali ini Saya ingin berbagi tips desain sekaligus optimasi Cara Buat Komentar Thread Blog Default Thread. Saya katakan default thread karenanya Saya akan memberitahukan cara untuk mengembalikan fungsi komentar kebentuk semula, mengingat sekarang blogger semakin peka terhadap apa yang diminati para member-Nya alias Bloggers, melihat tips satu ini banyak peminatnya blogger langsung update setting default template yang ada pada template standart blog sudah menggunakan Fungsi Thread yang sebelumnya tidak ada sampai-sampai Saya juga pernah buat yakni Buat Thread Balas Komentar Blogger tapi fungsi tidak berjalan dengan baik.
Komentar-Thread-SEO-Friendly

Cara Buat Komentar Thread Blog Default Thread

Satu hal yang sering dilupakan atau disengaja Saya tidak tahu, bagi teman-teman yang hobi ganti template dari situs-situs yang menyediakan Template Blog SEO Friendly hati-hati,hehe (Nanti Suhendri Mr bakal buat yang bener-bener Fresh) tidak jarang sipembuat/ designer menimpa fungsi lama ke fungsi baru alhasil yang dibilang SEO Friendly tidak sepenuhnya dirasakan. Suka bingung ketika ada yang ingin dikembalikan salah satu fungsi ke bentuk default template blog seperti komentar. Kasus ini pernah juga Saya rasakan, setelah berjalannya waktu akhirnya Saya dapat bongkar permasalahan terkait ketika Tes Rich Snippet pada Webmaster Tools pernah Saya baca Fungsi Thread yang salah akan menyebabkan warning pada webmaster tools menjadikan Saya berpikir lebih ektra alhasil clear tidak ada warning satupun, miliki Komentar Thread SEO Friendly ya dengan tips ini.

Sekarang tanpa sobat cape dan pusing-pusing mikir untuk desain komentar agar memiliki fungsi replay li (Thread) yang belum tentu hasilnya adalah SEO Friendly, kesalahan fatal terjadi disini ketika Sobat ingin melakukan optimasi melalui Webmaster Tools. Agar menjadikan Komentar Blog SEO Friendly Dengan Thread Default Blog dengarkan Saya dan ikuti langkah-langkahnya dibawah ini.

1. Masuk Blogger.com/ Draft.blogger.com
2. Pada halaman Edit  HTML backup template blog Anda
3. Centang "Expand Template Widget" sebelum Edit template
4. Tekan Ctrl+F untuk mencari kode berikut
<b:include data='post' name='comments'/>
<b:include data='post' name='threaded_comments'/> dan id
threaded_comment_js

Pastikan kode tersebut ada ditemplate blog sobat, dan peletakannya benar. Kode pada template blog default sendiri detail kode-Nya seperti berikut
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>


<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</div>

Diatas adalah contoh script terkait komentar thread default blog, disini Saya tidak mau bikin Anda pusing. Sekali lagi hanya untuk memastikan.

5. Sekarang fokus pada Id komentar thread saja yaitu threaded_comment_js pastikan Id ini tersimpan dan belum diubah ada 2 kategori atau fungsi pada template blog Anda yakni Id yang tersimpan sebagai variable JavaScript dan HTML komentar
6. Abaikan Id tersebut jika sudah ditemukan Ctrl+F berikut kode lengkapnya.
    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

7. Pastikan Id variable seperti berikut (teks tebal) berada diatas kode JavaScript komentar thread (tes biru) pada template blog Anda
<b:includable id='threaded_comment_js' var='post'>
  <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;
      }

bla...bla...bla...,      }
    })();
// ]]>
  </script>
</b:includable>

8.Ubah full kode JavaScript berwarna biru seperti diatas template blog Anda menjadi JavaScript seperti dibawah.

  <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;
      }

      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) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          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 == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.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 hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        '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>

9. Ubah semua kode CSS terkait komentar (comments) pada blog sobat sebelumnya, jika default seperti berikut.
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
}

.comments .continue {
  border-top: 2px solid $(tabs.border.color);
}

.post-outer .comments {
  margin-top: 2em;
} 

jika ingin ada sedikit variasi bisa gunakan CSS desain seperti yang Saya gunakan, lihat kode berikut
/* ------ comment ------------- */
.small-comment{background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) no-repeat;padding-left:8px;height:20px;line-height:14px;float:right;color:#FFF;font-weight:700;font-size:11px}
.small-comment div{background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) top right no-repeat;padding-right:0;height:20px}

.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
  font: normal .8em Packard Antique;
}

.comments .continue {
  border-top: 2px solid $(tabs.border.color);
}

#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#ffffff;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #f1f1f1;
border-left:5px solid #f1f1f1;
border-bottom:1px solid #f1f1f1;
border-right:1px solid #f1f1f1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #fff inset, 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #fff;
}
.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
.avatar-image-container {
-webkit-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
box-shadow:
1px 1px   0 rgba(0,   0,   0,   0.100),
3px 3px   0 rgba(255, 255, 255, 1.0),
4px 4px   0 rgba(0,   0,   0,   0.125),
6px 6px   0 rgba(255, 255, 255, 1.0),
7px 7px   0 rgba(0,   0,   0,   0.150),
9px 9px   0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}

/* ------ end comment ------------- */

10. Tekan Ctrl+F untuk mencari kode <b:if cond='data:post.title'> letakkan kode berikut tepat dibawah kode tersebut
<h1 class='post-title entry-title'> <div class='small-comment'><a expr:href='data:post.addCommentUrl'><data:post.numComments/></a><div class='small-comment div'/></div>

11. Simpan template. Selesai ini baiknya lanjutkan dengan menggunakan tips desain Cara Pasang Kode Emoticons Yahoo Komentar Thread Terbaru Blog

Rasakan perbedaannya, dan semoga sukses! Kalo ada yang ditanyakan jangan ragu, semaksimal mungkin Saya akan jawab dan bantu Anda sekian dan terima kasih Salam.

Catatan:
- Pada langkah no.4 fokus pada kode
<b:include data='post' name='threaded_comments'/> dan id saja, jika kode tersebut tidak ditemukan bisa lihat Buat Thread Balas Komentar Blogger
- Pada langkah no.9 perhatikan kode CSS yang bercetak tebal - tidak miring (wajib dipasang)
- Kode JavaScript yang Saya berikan diatas adalah default dari blogger, jadi jangan khawatir kalo itu bisa buat berat blog (tidak buat berat blog)
- Tips ini berlaku bagi Anda yang komentar-Nya belum thread dan sudah thread tapi masih mengalami warning! pada optimasi Rich Snippet di Webmaster Tools yang sudah atau ingin mengikuti tips perbaikan dan optimasi berikut

Mengatasi Missing Required Field "Update" Webmaster Tools. dan
Cara Buat Bintang Pada Blog Rating Rich Snippet Review


Berbagi Kreativitas Updated at: 13.18.00