Bani Cyber Blog – Sebelumnya kita telah membahas cara modifikasi template blog agar menjadi keren, silahkan baca dulu kalau kamu belum tahu. Dalam memodifikasi template, kamu harus memiliki kesabaran untuk modifikasi satu persatu bagian template. Apalagi blogger pemula, pasti akan tambah sulit lagi.


Karena ada bagian bagian tertentu yang sulit untuk dimodifikasi. Salah satu bagian yang lumayan sulit untuk dimodifikasi yaitu pada bagian kotak komentar. Dalam modifikasi tampilan kotak komentar, kamu hanya perlu mengubah/memodifikasi bagian CSS nya saja.





Apabila kamu tidak mau susah susah redesign atau modifikasi tampilan [kotak komentar] pada template blog kamu, kamu bisa download template bani cyber yang telah seo, responsive dan fast loading + valid html 5. Dan di desain untuk blogger personal.


PENTING!
Apabila cara dibawah tidak berhasil, silahkan download template yang berasal dari internet bukan berasal dari bawaan blogger.com, misalnya template mas sugeng atau kamu bisa download template bani cyber yang sudah teruji struktur nya.


OK, inilah cara memodifikasi tampilan kotak komentar dengan css di template blog.


1.Modifikasi Background Kotak Komentar

Pada Template yang belum dimodifikasi, tampilan kotak komentar nya pasti polos banget alias tanpa gaya/style. Maka dari itu pilihlah template yang udah tersedia css nya seperti template bani cyber, lalu kamu bisa mengganti tampilan background kotak komentar dengan mudah melalui kode CSS menurut keinginanmu. Berikut caranya:

1. Buka Blogger.com
2. Buka Template » Edit HTML
3. Cari Kode Berikut
.comments {
4. Tambahkan CSS Berikut Sesudahnya
background:#666;color:#333;padding:0 18px;margin:8px;

Penjelasan Kode:
#666 : kode warna latar
#333 : warna teks
0 18px : jarak antara teks dan border
8px : jarak antara border dan dinding luar

5. Hasil Kodenya
.comments {background:#666;color:#333;padding:0 18px;margin:8px;}
6. Save Template



2.Modifikasi Pesan Komentar

Pada bagian ini berisi pesan penulis kepada pengunjung postingan blog yang ingin berkomentar, pesan penulis biasanya syarat dan ketentuan dalam berkomentar, sapaan, dll. Dan tahukah kamu, rupanya pada bagian ini juga bisa dimodifikasi tampilannya.


Jadi gimana cara memodifikasi tampilan pesan komentar yang benar? Selengkapnya! ikuti lah cara berikut:

1. Buka Blogger.com
2. Buka Template » Edit HTML
3. Cari Kode Berikut [CTRL+F]
.pesan-komentar {
4. Tambahkan kode berikut
background:#f0ffff;padding:10px 20px;margin:0 8px;color:#008080
5. Hasil kodenya
.pesan-template {background:#f0ffff;padding:10px 20px;margin:0 8px;color:#333}

Penjelasan Kode
#F0FFFF : Warna Latar Pesan Template
#333 : Warna Teks Pesan Template

6. Save Template


3. Cara Modifikasi Isi/Konten Komentar

Dan yang terakhir yaitu konten komentar, bagian ini berisi teks/tulisan komentar yang ditulis sang komentator. Kali ini, kita juga bisa mengubah warna background dan warna teks. Jadi gimana cara memodifikasi bagian isi/konten komentar? Berikut selengkapnya:

1. Buka Blogger.com
2. Buka Template » Edit HTML
3. Cari Kode Berikut
.comments .comments-content
atau
.comments-content
4. Tambahkan Kode Berikut Sesudahnya
background:#fff;color:#333

Pengaturan Kode
#FFF : Warna Latar Konten Komentar
#333 : Warna Teks Konten Komentar

5. Hasil kodenya
.comments .comments-content {background:#fff;color:#333}
6. Save Template


4.TAMBAHAN

Fungsi kode dibawah ini adalah agar meload konten komentar.

1. Buka Blogger.com
2. Buka Template » Edit HTML
3. Cari Kode Berikut
<b:includable id='threaded_comments' var='post'>
4. Tambahkan Kode berikut, Sebelum kode tadi

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

      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 = {};
            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) {
          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.parentNode, 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);
      }
      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);
        }
      };
      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>

5. Save Template

INFO!
Jika di template kamu sudah ada javascript yang diatas, gak usah ditambah lagi.


Nah, itulah tips tips dalam modifikasi tampilan kotak komentar di blog. Apabila kamu memiliki masalah dalam modifikasi template kamu jangan segan segan untuk bertanya via komentar.

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.


0 Tanggapan Untuk "Cara Modifikasi Tampilan Kotak Komentar Pada Blog"

Post a Comment