cara modikisa komentar blog

Nah di mana nama pengomentar dan isi komentarnya saling berdampingan, tentunya ini sangatlah menghemat tempat, selain itu kelihatan menarik dan simpel. nah mungkin anda juga tertarik untuk membuat nya, silahkan ikuti langkah-langkah yang tertera di bawah ini.

Berikut langkah-langkah cara membuat nama pengomentar dan isi komentar saling berdampingan.

• Login ke blogger
• Klik Rancangan
• Edit HTML
• Beri tanda centang pada "Expand Template Widget"
• Kemudian cari kode di bawah ini
  #comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
  
  #comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
  #comments-block .comment-author {
  margin:.5em 0;
  }
  #comments-block .comment-body {
  margin:.25em 0 0;
  }
  #comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
  #comments-block .comment-body p {
  margin:0 0 .75em;
  }
  .deleted-comment {
  font-style:italic;
  color:gray;
  }
• Hapus kode tersebut kemudian ganti dengan kode di bawah ini
  .commentlistdiv{margin-top:10px;background:#FFF;border:1px dotted #ddd;font-size:.75em;color:#666;padding:20px}
  .commentlistdiv h1{font-size:1.3em;color:#366799;border-bottom:1px solid #eee;line-height:1.5em}
  .commentlist li{background:#fff;border-bottom:1px dotted #ddd;padding:20px}
  .commentlist li.alt{background:#fff}
  .deleted-comment{font-style:italic;color:gray}
  .feed-links{clear:both;line-height:2.5em}
  .pane_l{float:left;display:inline;width:160px;min-width:160px;max-width:160px;border-right:1px dotted #ddd;padding-right:20px;margin-right:20px}
  .c_author{font-size:.9em;font-weight:700;margin:0 0 7px}
  .c_avatar{display:block;margin:0 0 7px}
  .c_date{color:#aaa;font-size:.9em;margin:0 0 7px}
  .c_approved{color:#aaa;font-size:.9em}
  .comment-form{background:#414141;border:5px solid #ccc;margin:0 10px 20px;padding:10px 0 0 20px}
  .owner-Body p{font-size:100%;color:red;text-decoration:bold;margin:0 0 .2em}
  .pane_r,.owner-Body{display:block;line-height:1.5em;margin-left:201px}
  .comment-link{margin-startside:.6em}
• Kemudian cari kode di bawah ini
  <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
  <h4>
  <b:if cond='data:post.numComments == 1'>
  1<data:commentLabel/>:
  <b:else/>
  <data:post.numComments/> <data:commentLabelPlural/>:
  </b:if>
  </h4>
  
  <b:if cond='data:post.commentPagingRequired'>
  <span class='paging-control-container'>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
  &#160;
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
  </span>
  </b:if>
  
  <dl id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
  <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
  <a expr:name='data:comment.anchorName'/>
  <b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
  <b:else/>
  <data:comment.author/>
  </b:if>
  <data:commentPostedByMsg/>
  </dt>
  <dd class='comment-body'>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
  <p><data:comment.body/></p>
  </b:if>
  </dd>
  <dd class='comment-footer'>
  <span class='comment-timestamp'>
  <a expr:href='data:comment.url' title='comment permalink'>
  <data:comment.timestamp/>
  </a>
  <b:include data='comment' name='commentDeleteIcon'/>
  </span>
  </dd>
  </b:loop>
  </dl>
  
  <b:if cond='data:post.commentPagingRequired'>
  <span class='paging-control-container'>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  <data:post.oldestLinkText/>
  </a>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  <data:post.olderLinkText/>
  </a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  <data:post.newerLinkText/>
  </a>
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  <data:post.newestLinkText/>
  </a>
  </span>
  </b:if>
  
  <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>
  </b:if>
  </b:if>
  
  </p>
  </b:if>
• Ganti kode tersebut dengan kode di bawah ini
  <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
  <h4>
  <b:if cond='data:post.numComments == 1'>
  1 <data:commentLabel/>:
  <b:else/>
  <data:post.numComments/> <data:commentLabelPlural/>:
  </b:if>
  </h4>
  <b:if cond='data:post.commentPagingRequired'>
  <span class='paging-control-container'>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
  &#160;
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
  </span>
  </b:if>
  <ul class='commentlist'>
  <b:loop values='data:post.comments' var='comment'>
  <li>
  <div class='pane_l'>
  <div class='c_author'>
  <b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
  <b:else/>
  <data:comment.author/>
  </b:if>
  <data:commentPostedByMsg/>
  </div>
  <div class='c_avatar'/>
  <div class='c_date'><span class='comment-timestamp'>
  <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
  <data:comment.timestamp/>
  </a>
  <b:include data='comment' name='commentDeleteIcon'/>
  </span></div>
  <div class='c_approved'/>
  </div>
  <b:if cond='data:comment.author == data:post.author'>
  <div class='owner-Body'>
  <p><data:comment.body/></p>
  </div>
  <b:else/>
  <div class='pane_r'>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
  <p><data:comment.body/></p>
  </b:if>
  </div>
  </b:if>
  <div class=' clear'/></li>
  </b:loop>
  </ul>
  <b:if cond='data:post.commentPagingRequired'>
  <span class='paging-control-container'>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  <data:post.oldestLinkText/>
  </a>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  <data:post.olderLinkText/>
  </a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  <data:post.newerLinkText/>
  </a>
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  <data:post.newestLinkText/>
  </a>
  </span>
  </b:if>
  <p class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
  <b:if cond='data:post.allowNewComments'>
  <b:include data='post' name='comment-form'/>
  <b:else/>
  <data:post.noNewCommentsText/>
  </b:if>
  <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>
  </b:if>
• Simpan tamplate anda...
• Sekarang silahkan lihat hasilnya di komentar blog anda