Mempercantik Area Komentar Episode 2

Baiklah kita lanjutkan lagi tulisan yang tertunda seputar mempercantik area komentar. Dalam postingan sebelumnya, saya menulis  cara menambah background warna atau gambar pada form komentar ( kotak komentar ) intip sini.

Maka untuk episode lanjutan  ini,  tentang  cara  merubah atau mengutak-atik pada area komentarnya, atau istilah yang di pakai oleh blogspot “ comments-block “.

Oh ! Tentu saja tulisan ini hanya menjelaskan dan mengacu pada bagaimana proses membuat " comment block" yang saya miliki.

Dan tentu juga " commnets-block" yang saya percantik  merupakan " commnets-block" yang di miliki template " Minima", template standar yang di miliki Blosgpot.

Sebelum

Sesudah

 

Jika di ilustrasikan mungkin seperti inilah syntax Css template Minima untuk area Komentar.

Otre kita langsung saja.

Pertamaaxx :

seperti biasa buka tab Tata-Letak – Edit Html.

Kemudian tandai kotak kecil / centang di samping tulisan Expand Template Widget.

 

Keduaaaaxx :

cari syntax Css untuk komentar ini. ( ngga perlu sama yang penting tag  css untuk komentar )

/* Comments
----------------------------------------------- */
#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-author {
margin:.25em 0 0;
color:#EF2C2C;
}

#comments-block .comment-body p {
  margin:0 0 .75em;
  }

 

Kemudian ganti dengan kode ini.

/* Comments ----------------------------------------------- */ #comments { background: none; border: solid #cccccc 1px;/* border atau bingkai */ margin-bottom:10px; } #comments h4 { margin:1em 0 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; padding-left:20px; letter-spacing:.2em; color:#CE2A0F; } #comments-block { margin:1em 01 .5em 1em; line-height:1.6em; padding-bottom:25px; } #comments-block .comment-author { margin:.5em 0; padding: 0 20px 0 20px; color: #A6210B; background: #EBF3FB;/* warna background komentator */ } #comments-block .comment-body { margin:.25em 0 0; padding: 0 20px 0 20px; background: none; } #comments-block .comment-body-author { margin:.25em 0 0; padding: 0 20px 0 20px; color: #CF9118; } #comments-block .comment-footer { margin:2em 0 .5em 70px; line-height: 1.4em; text-transform:normal; padding: 0 20px 0 20px; font-size:10px; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em 70px; } .comment-form { background:#EFEFEF; border:5px solid #cccccc; margin:0 10px 20px 10px; padding:10px 0 0 15px; }

Ketigaaxx :

Setelah beres kemudian meluncur ke bawah . dan cari kode ini. – setelah itu hilangkan atau hapus kode tulisan yang di beri warna merah di bawah.

 

<b:loop values='data:post.comments' var='comment'>
        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

 

* untuk ke hati-hatian selalu ingat kode yang di buang atau di hilangkan.

 

Keempaxxx :

cari kode ini .- dan tambahkan kode seperti yang saya beri warna.

 

<dd class='comment-body'>

<div class='commentphoto' style='float:left;margin-top:.25em;'/>
            <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>

     <div style='clear:both;'/>
        </b:loop>
      </dl>

 

Kelimaxxx :

Scroll mouse ke atas dan temukan tag ini.

</head>

 

kemudian simpan  javascript ini di atasnya.

 

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif';
BloggerProfiles.imageWidth = 50;
BloggerProfiles.imageHeight = 60;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

UPDATE :

Jika link gambarnya Not Found, ganti url gambar di atas dgn url ini.

http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif

 

Setelah itu Simpan Template.

jika tidak ada masalah hasilnya harusnya seperti ini.

Oh ! tentu saja anda harus menyesuaikan dengan tampilan dan warna blog sendiri.