Tutorial : Add comments display in blogskin (like me)

Assalamualaikum and Annyeong . Okay, tanpa buang masa, Fina nak ajar macam mana nak buat comment box macam ni , sesetengah blogskin akan guna macam ni kan ? nak buat jom.

1.dashboard -> template
2.first, korang kena delete segala comment yang pernah korang buat . mean, kalau korang pernah buat tuto
  - comment platform
  - comment box
  - Add comment.

  *tiga atas tu, nanti akan buat tuto korang tak menjadi . Yang 'add comment' tu pun korang kena delete . sabarsabar jangan tanya kenapa*

3.korang tekan ctrl + f , cari code </style> 
4. copy code bawah ni ..

.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}

.deleted-comment {
font-style:italic;
color:gray;
}

#comments {
margin:5;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
.comment-icon blogger-comment-icon{display:none}
#comments-block {
margin:2px ;
}

.comment-data {
background:url("urlICON") no-repeat 2px .3em;
margin-top:5px !important;background-size:10px;
padding:0 0 0 20px;
color:#666;
}

span.comment-icon{display:none}

.comment-poster {
font-weight:bold;
}

.comment-body {
margin:0px;
}

.comment-body p {
background:#FFFFFF;
border:3px solid #FCEBED;
margin:0em;
padding:5px;
color:#808080;
}

5.paste dekat atas or before code </stye> tu .

*oren : urlICON tu boleh ubah . boleh ambil dekat SINI .

6. tekan ctrl+f cari code </Blogger>
7.copy code bawah ni .

<itempage>
  <div id="comments" style="margin-top:5px;">
 <blogitemcommentsenabled><a name="comments"></a>
<dl id="comments-block">
<div style="width:470px; padding:5px;margin-top:20px;border:4px solid #fff;6px;background:url(http://pastelpatterns.com/small/smallpattern-9.png); box-shadow:0  0 3px #ddd;">
      <$CommentPager$>
      <blogitemcomments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
    <$I18NCommentAuthorSaid$></dt>
<dd class="comment-body">
        <p>
<$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
      </dd>
   </BlogItemComments>
    <$CommentPager$>
    </dl>
</div>
<p class="comment-timestamp">
<$BlogItemCreate$>
    </p>
</div>
</ItemPage>

8.paste kan atas or before </blogger> ...
 *okay, sometimes, ada tuto yang kata </blogger> ni, ada dua kali di dalam blogskin, dah harus di paste kan kedua duanya . tapi fina buat, fina just paste dekat </blogger> yang pertama . *

tak faham ?? *sorry fina cakap berbelit belit ehh * ..tak,macam ni ,

- </blogger> sometimes, bile korang cek ctrl+f , ada dua perkataan tu dekat blogskin korang kan ?
- just paste dekat </blogger> yang pertama . </blogger> yang kedua just abaikan .

(Fina buat macam tu, still jugak menjadi, kalau korang tak jadi, paste jugak code atas tu dekat </blogger> yang kedua :) )

okay then

9 ,preview and save :)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - -- - - - -
code dekat atas tu, just basic.dia still keluar macam gambar dekat atas tu, just takada decoration sangatlah . korang boleh pilih yang atas tu, or just follow step yg bawah ni .

bile korang dah tekan save .
1. cari code :

 .comment-body p {
background:#FFFFFF;
border:3px solid #FCEBED;
margin:0em;
padding:5px;
color:#808080;
}

(mungkin kalau guna ctrl + f tak akan ada, korang cari dekat basic code dekat atas tadi . yang kena paste dekat atas </style> . yang last kan ?)

korang TUKAR  yang background tu ..

dengan yang ini ..

background:url(URLBACKGROUND);

 macam yang fina ajar sebelum ni , nak nampak lebih kemas, nak yang matching dengan warna blog korang, tukar yang warna oren, and biru tu. ..

-- korang boleh jugak tukar apa yang patut dekat basic code yang atas tu --

-------------------------------------------------------------------------------------------------------------
lepas korang dah ubah apa yang patut tu, ikut step ni pulak .. nak buat comment box cara ni,payah sikit... :P
tak faham inform awal-awal .

1. Dashboard > Template > Edit HTML
2. Press ctrl+f dan cari code </Blogger>
3. Kemudian copy code kat bawah ni

<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;"><$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled>

4. Paste di atas code </Blogger> tadi
5. Preview & save

(</Blogger> just paste dekat atas dia walaupun dah ada code yang BASIC CODE tadi tu.) 

lepas tu,bukak

:) done ...

# penat buat tuto niii -,- 

1. comment, kalau tak berjaya or berjaya .
  -saya nak ubah code kalau tak berjaya .
2.re-tuto or ew-freebies boleh,, boleh , tapi , kena credit saya ye :)  kalau tak credit saya saman awak... hikhik .