Cara Membuat Kotak Komentar Seperti pada Blog ini

Maksud judul diatas kotak komentar yang akan kita buat, sama dengan kotak komentar pada BLOG INI,
Untuk lebih jelasnya silakan anda perhatikan setelah anda membaca artikel ini (dibagian bawah), anda akan menjumpai kotak isian komentar, Sudah jelass ?,... Nah,.. Cara membuatnya silakan anda ikuti langkah langkahnya :

• Login ke Blog Anda, klik DISINI
• Pilih Tata Letak, Klik Edit HTML
• Agar aman, silakan anda Download dulu template anda (klik Download Template Lengkap)
• Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget (atas)
• (gunakan Ctrl + F) Cari kode atau yang mirip kode dibawah 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;
}

• Delete atau hapus kode di atas dan ganti dengan kode  :

#comments{background:#f7f7f7; float:left;width:429px;margin:0px 8px 10px 3px;padding: 2px;border:1px solid #e6e6e6;display:inline;}
#comments h4{margin:0;font-weight:bold;line-height: 1.4em;text-transform:uppercase;letter-spacing:.1em;color: #000000;padding-left:5px;font-size:13px;}
#commentblock{background:#e4e3e3;text-align:left;padding: 15px 10px 10px 20px;margin: 10px 5px 10px 5px;border-top: 2px solid #333333;border-bottom: 2px solid #333333;}
#commentblock ol{list-style-type: square;margin:0 0 10px 10px;padding:0 0 10px 0;}
.commentdate{font-size:12px;padding-left:0;}
#commentlist li p{margin-bottom:8px;line-height:2px;padding:0;}
.commentname{color: #333;margin:10px 0;padding:5px 5px 5px 0;}
.commentinfo{clear: both;}
.commenttext{background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh9oEgTehXg_FRqb1q5UagV1moKIA7vaZm3B9tSs4_Y7tauj1Axm7w9fm4__II6cm7uSDuCHPr9jnmeGVQt4tgtP6mNZUJEqn3XcNiUC2z7MU3o3x26bt1dCuNyXvpUC29BocxCHcf7hhZ/?imgmax=800) no-repeat bottom left;clear: both;margin:15px 0 0 0;padding:10px 10px 40px 9px;width: 359px;color:#000;}
.commenttext-admin{background: #aaa9a9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClp6GzOGaxl7O1Lv4N06zOnLVmmtC4_aAe-sBp6NyXpnCwLHQ4fhY5ZylXGTcqkDO8BLg3OsONND1P5sSl-R66_dBOZSPh63T4f_RJVMnJ5LCLyEVxsvtaIgdFC-MOlQEOlwEq7lDxauc/?imgmax=800) no-repeat bottom left;clear: both;margin:20px 0 0 0;padding:10px 10px 30px 10px;width: 359px;color:#000;}
div.comment-form-block{width:399px;margin:0 auto
;}

• Kemudian cari kode yang mirip dibawah 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/hapus kode diatas dan ganti dengan kode dibawah ini :

 <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
<div id='bg_commentblock'>
<h4>
Komentar :
   </h4>
   <div id='commentblock'><!--commentblock-->
<strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
        <b:else/>
           <strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
        </b:if>
      <dl class='commentlist'>
        <b:loop values='data:post.comments' var='comment'>
          <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
            <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>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
            <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></span>
          <dd class='commenttext'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </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>
</div><!--end commentblock-->
</div>
    </b:if>

• Terakhir Klik simpan Template (jangan lupa edit seperti lebar kotak, warna dan lain-lain sesuaikan dengan template anda )
• Silakan Mencoba, Semoga berhasil

Berlangganan via RSS Feed

Ingin Artikel seperti ini ?,... masukan alamat email anda untuk berlangganan.

Artikel Anyar Yang Berhubungan :