Cute comments display ( Blogskin )

Assalamualaikum w.b.t dan hai semua...^^,  disebabkan ramai yang belum tahu cara nak tambah dan cantikkan comment box untuk blogskin jadi, saya buatlah tutorialnya...

Don't RE-POST this tutorial !! it's really hard to tweak the code... :'(

Want to have a comment box exactly like above? follow below instructions...

The instruction :

1. Sign in www.blogger.com
2. Choose Template
3. Search </style> using CTRL+F or F3
4. Copy below code and paste it above / before </style>

/* Comment Start
----------------------------------------------- */
#comments h4 {

margin:10px;text-align:center; color: #444444; text-shadow: 1px 1px 1px #B2D5FF; border: 2px dashed #FFFFFF;font-weight:normal;font:20px short stack;

-webkit-border-radius: 15px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;border-radius: 15px;

box-shadow:0px 0px 4px 4px #DFEEFF;background:#F5FAFF;

}

#comments-block {

width:460px;

margin:1.5em;

background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3853/3853878.png);

color:#555555;
font:11px short stack;

padding:5px;box-shadow:0px 0px 4px 4px #FFF7DD;

border:2px dashed #FFFFFF;border-radius:20px;

}

#comments-block .comment-author {margin:.5em 0;}

#comments-block .comment-body {margin:.25em 0 0; background: #FFFFFF;}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

letter-spacing:.1em;

}

#comments-block {

background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3853/3853878.png);

border-radius:30px;

}

.comment-body p {

margin:0 0 .60em;

padding: 5px 5px 5px 5px;

background: url(http://i.imgur.com/tDtge.png) repeat top left;

border-radius: 25px;

box-shadow:0px 0px 4px 4px #EBF6FF;

border:2px dashed #FFFFFF;

}

.comment-timestamp {

margin:1em;

padding:5px;margin-bottom:2em;

color:#666666;width:200px;

box-shadow:0px 0px 4px 4px #DFEEFF;background:#F5FAFF;

border:2px dashed #FFFFFF;border-radius: 25px;

}

.comment-data {

background:#FFFFFF;

box-shadow:0px 0px 4px 4px #F9EBFF;

border:2px dashed #FFFFFF;border-radius: 25px;

margin-top:5px !important;margin-bottom:10px !important;

padding:3px;width:170px;

color:#666666;text-align:center;

}

.comment-date {

background:#FFFFFF;

box-shadow:0px 0px 4px 4px #FFF2F2;width:170px;float:right;

border:2px dashed #FFFFFF;border-radius: 25px;

margin-top:5px !important;margin-bottom:10px !important;

padding:3px;color:#666666;

text-align:center;

}

.deleted-comment {

font-style:italic;

color:#B2B2B2;

}
/* Comment Ends
----------------------------------------------- */ 

Let's edit the code !

Color code here...

Background can be find in my freebies page or google...

Blue text : Color code of the text...

Red text : Color code of the border...

Purple highlighted : Color code of the shadow...

Orange text : Background color code...

Fuchsia text : Background image URL...

Search  </head>  using F3 or ctrl+F

Then, copy below code and paste it above / before  </head>

<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'/>

Then search for </Blogger> and paste the codes below before / above it.
If there is two </Blogger> code paste it on both codes

<br /><br />
<itempage>
  <div id="comments" style="margin-top:5px;">
 <blogitemcommentsenabled><a name="comments"></a><h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<div style="width:445px;padding:5px;">
      <$CommentPager$>
      <blogitemcomments>
<dt class="comment-date" id="<$I18NAtCommentTimeWithPermalink$></dt>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
        <p>
<$BlogCommentBody$></p>
      </dd>
   </BlogItemComments>
    <$CommentPager$>
    </dl>
</div>
<center><p class="comment-timestamp">
<$BlogItemCreate$>
    </p>
    </div>
</ItemPage></center>

Don't edit the code to avoid messing the code...

Next,you can save it...preview on single post page with comments...

Example : http://tetingblo.blogspot.com/2012/12/vintage-flower-picture.html instead of http://tetingblo.blogspot.com

Penatnya buat tutorial nie... u,u" kalau dah jadi tuw rajin-rajinlah comment yer...^^, kalau tak faham tanyalah...

...sekian terima kasih...