Memodifikasi Tampilan Kotak Komentar

Hmm.. karena ada yang nanya yah saya buatkan tutorialnya, Contoh kotak komentar bila sukses anda lakukan akan seperti ini:

Sebenarnya ini bukan asli buatan saya tapi saya mempelajari kode css template gratisan yang saya download,dan membandingkan dengan milik saya semula. Sehingga terciptalah tutorial dan tampilan komentar seperti ini di blog saya. Yah langsung saja lihat tutorial dibawah:

Login ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.
Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.
Cari kode pada bagian CSS yang seperti 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;
}

7. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini : Untuk yang berwarna merah bila template blog anda sudah ada kode seperti dibawah maka silahkan ditimpa saja.

.comments {
       background:#fff url(http://lh5.ggpht.com/_Kwwy9VyLMKw/SjC-eXU7d_I/AAAAAAAAA5o/wLC8_OtGe8k/s912/Post%20body.gif);
       background-repeat: repeat-x;
       float: left;
       width: 610px;
       margin: 0 6px 10px 0px;
       padding: 10px;
       border: 1px solid #e6e6e6; }

#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 {
   width: 570px;
   background: #e4e3e3;
   float: left;
   padding: 20px 20px 10px 20px;
   margin: 10px 0px 0px 0px;
   border-top: 2px solid #333333;
   border-bottom: 1px 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: 20px;
   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/AVvXsEj3xfyuOipjT2zKZs4hpWa3TaMfsMxyq0422BvUDD3sfe0IC92MkpWJ36cxIiOd5qlzhRixr64XU4YR_oshvps0_Src-O38ozPgsifK7wA19xVLi3VP_2_zyfKwkEblnQjQw9dSsVpQP8KJ/?imgmax=800) no-repeat bottom left;
   clear: both;
   margin: 20px 0 0 0;
   padding: 10px 10px 30px 10px;
   width: 555px;
   color: #000; }

.commenttext-admin {
   background: #aaa9a9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSSx2UF2WimHAfKOx_TmK8zKs_SLj5a4ZdPQZph0pOnTXZozFKg4rcyHnHHe8c0rEBZKZK2BA0YMrHBpqXpqfKNoUSSknZHRUVzFux3MVfeauZ9YISdwogcRcPyRrGZA8B8ePqVx-3B66/?imgmax=800) no-repeat bottom left;
   clear: both;
   margin: 20px 0 0 0;
   padding: 10px 10px 30px 10px;
   width: 555px;
   color: #000; }

8. Lihat Ke bagian bawah, dan cari kode yang seperti ini : Fokus pad text yang berwarna merah!!

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

9. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah 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>

COMMENTS :

   </h4>

   <div id='commentblock'>

<strong>Dimohon Komentar Yang Sopan dan Jangan Nyepam</strong> <b:if cond='data:post.numComments == 1'>1
        <b:else/>
         <p> <strong><data:post.numComments/> <data:commentLabelPlural/> to “<data:post.title/>”</strong></p>
        </b:if>

      <dl class='commentlist'>
        <b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.author == data:post.author'>
<dd class='commenttext-admin'>
<p><data:comment.body/></p>
</dd>
<b:else/>

          <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:if>

          <span><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='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
            <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>on <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>

        </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>
    </div>

</div>
    </b:if>

10. Simpan template
11. Lihat hasilnya

Semoga sukses!!

Bagaimana? tutorial diatas bisa dijadikan dasar untuk memodifikasi kotak komentar bukan! Bila anda menemukan kotak komentar dari template gratisan yang menarik anda bisa menaruhnya di blog anda dengan mencocokkan tutorial diatas.

Sumber: nurad1k.blogspot.com

NurAd1K

Labels

Tuesday 23 March 2010

Memodifikasi Tampilan Kotak Komentar

5 comments:

Statistik Blog

Blog Archive

Link Teman

Followers

Katagori