Cara memodifikasi kotak komentar pada blog

Memodifikasi kotak komentar pada blog ini yang akan kita bahas. dimana salah satu teman yang meminta saya agar sudikiranya untuk membuat post modifikasi komentar seperti yang saya punya. silahkan lihat contoh di komentar artikel lain jika belum ada komentar di artike ini. atau bisa lihat contoh gambar di bawah ini.


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

Silahkan ubah suaikan jika belum pas lebar atau padding dan marginnya, karna setiap tamplate hasilnya akan berbeda. yang pastinya kode tersebut tidaklah mutlak seperti itu, anda bisa memodipikasinya sendiri agar sesuai dengan keinginan anda masing-masing. semoga artikel ini bermanfaat dan jangan lupa tunggu update terbaru ku selanjutnya. salam sukses....

JASA ARTIKEL: HUBUNGI Email kami di jptr273@gmail.com bagi bos yang membutuhkan JASA ARTIKEL BOLA yang berpengalaman di bidangnya. terimakasih

Berlangganan via RSS Feed

Anda Ingin artikel seperti ini langsung ke Email anda Silahkan masukkan alamat Email anda Untuk Berlangganan :

CHAT di halaman depan blog ini

Informasi Pemasangan Iklan:
Hubungi Kami: J_Putra
Email: jptr273@gmail.com