тнɪɴκεʀʙεʟʟооɴ: Modifikasi: Comment Form

Ngoaaam nyam.. Ohayou, minna. Sebenarnya saya sedang malas saat menulis artikel ini, tapi daripada menyesal karena hal yang sama, ahirnya saya putuskan untuk menulis saja. Kali ini, saya ingin berbagi hasil modifikasi Comment Form atau Kotak Komentar.

"No bacot, Kakak."
"Oh, dengan senang hati, Kakek.."

* Seperti biasa, masuk Design, Edit HTML, lalu centang pada Expand Widget Template.
* Cari kode seperti berikut

#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, lalu ganti dengan kode berikut

#comments h4 {
background:#000;
border:1px outset #000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin:0 0px 0 0px;
padding:5px 10px 5px 10px;
font-size:15px;
font-weight:bold;
font-family: Century Gothic;
line-height:1.1em;
color:#ffffff;
}
#bg_commentblock {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiknKp84y5QT8ntzO06B-wz6Yj6M2I82dgAGJ6orpB9Ra4gcrqWWw_6jRLoOnlMMcc300sGKdHRXzjUkd2VT_dYVCdti8yIIw7f7L51XNKxGKUOpzlM2-S_OkaI6RmLy42UXotG0pJ1zg95/s1600/9BBCA6-70.png");
margin:0px 0px 5px 0px;
padding:5px 5px 5px 5px;
border:1px outset #9BBCA6;
color:#000;
}
#commentblock {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwO2diTyiGXpX_LhmC9AGYVmTuY2vLfCzNsSQ0hviB002AfwXy0PITxLN4ts7RcTUHvoPkAhv2TM9T_QJUqMk-xuLtbOkMg9Vwbf_aiHxGMNdFYMNmkvEIILLzdbnEbSnxLRN2BvbhzWIb/s1600/black-50.png");
text-align:left;
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 40px;
border: 1px outset #000;
color:#FFFACD;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}
.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}
.commentinfo{
clear: both;
}
.commenttext {
clear: both;
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 5px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwO2diTyiGXpX_LhmC9AGYVmTuY2vLfCzNsSQ0hviB002AfwXy0PITxLN4ts7RcTUHvoPkAhv2TM9T_QJUqMk-xuLtbOkMg9Vwbf_aiHxGMNdFYMNmkvEIILLzdbnEbSnxLRN2BvbhzWIb/s1600/black-50.png");
border: 1px inset #000;
color:#FFFACD;
}
.commenttext-author {
clear: both;
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 5px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwO2diTyiGXpX_LhmC9AGYVmTuY2vLfCzNsSQ0hviB002AfwXy0PITxLN4ts7RcTUHvoPkAhv2TM9T_QJUqMk-xuLtbOkMg9Vwbf_aiHxGMNdFYMNmkvEIILLzdbnEbSnxLRN2BvbhzWIb/s1600/black-50.png");
border: 1px inset #000;
color:#FFFACD;
}
.comment-form {
width: 700px;
margin: 0px 0px 0px 0px;
padding: 0;
}
.comment-editor {
margin: 0px 0px 10px 0px;
padding: 0px 5px 0px 5px;
font-size:13px;
font-family: Century Gothic;
line-height:1.1em;
color:#32f353;
}

* Cari lagi kode seperti 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>
           
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           
          <data:post.commentRangeText/>
           
          <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>
      <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='"comment-author " + 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>
           
          <data:post.commentRangeText/>
           
          <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>

* Hapus, lalu ganti dengan kode 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
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> at “<data:post.title/>”
</b:if>
   </h4>

   <b:loop values='data:post.comments' var='comment'>
     <div id='bg_commentblock'>
           <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
            </dt>
            <div id='commentblock'>
              <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/>
              <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>
              <span class='comment-timestamp'>on the 
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </div>
     </div>
   </b:loop>

      <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>
           
          <data:post.commentRangeText/>
           
          <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>

* Save, lihat hasilnya..

Omong - omong, kamu perlu mengatur ulang lebar yang ada pada kode di atas, karena pengaturan lebar tiap blog pasti berbeda satu sama lain [IMHO]. Tapi jika tidak bermasalah dengan hasilnya nanti, kamu boleh tidak menggantinya . Oyasuminasai..

Modifikasi: Comment Form

0 Komentar at “Modifikasi: Comment Form”

Posting Komentar

Obrolan

Teman Saya

Riwayat Komentar