Thursday 5 September 2013

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

29 comments:

  1. hmm . akak , knapa blog saya tak dpt nak post comment erk ?

    ReplyDelete
    Replies
    1. Guna jela tutorial nie...kan saya dah ajar caranya...atau awk tukar setting comment awk kpd pop-up window caranya :
      setting--> posts and comments --> comment location = popup window...

      Delete
  2. Assalamualaikum dan salam kenal dik...

    ReplyDelete
    Replies
    1. Waalaikummussalam dan salam kenal jugak kak...^^,

      Delete
  3. naper saya buat x der paper pun kak?
    n' trima kasih sbb saya ader guna blogskin akak yg sweet diaries

    ReplyDelete
  4. Kak, di kode template saya kok enggak ada kode ? Saya nak comment macam tu

    ReplyDelete
    Replies
    1. Kamu pake template apa? template designer? kalau template designer mmg nggak ada code tuw...tapi kalau awk pake blogskin tak de code lain... :)

      Delete
  5. thanks bebanyak akak.. punye la letih mencari tuto ni . akhirnya.. :D

    ReplyDelete
  6. kuk tak jadi, mengapa? Ku takada kode tu

    ReplyDelete
  7. salam.. nak tanya, mcm mane nak bagi " post a comment " tu duduk dalam kotak biru tu? sy da buat mcm kamu ajor tu tapi perkataan tu xduduk dalam kotak tu.. huhu

    ReplyDelete
  8. Alhamdulillah jadi ,,
    Thankyu = )

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Assalamualaikum. Menjadi. Thanks for sharing :)

    ReplyDelete
  11. Thanks! Menjadi! Visit my blog ^^

    http://diarisihazimah.blogspot.com/

    ReplyDelete
  12. salam.. nak tanya, mcm mane nak bagi " post a comment " tu duduk dalam kotak biru tu? sy da buat mcm kamu ajor tu tapi perkataan tu xduduk dalam kotak tu..

    ReplyDelete
    Replies
    1. Tak taula... nanti saya edit codenya semula...

      Delete
    2. Tak taula... nanti saya edit codenya semula...

      Delete
  13. Anyeong kawaii girl! Sinceramente eu estou amando esse lugar!

    ReplyDelete
  14. how can i change the background? to fit the theme of my blog [link: animusicjapan.blogspot.com ]

    ReplyDelete
    Replies
    1. Just replace the URL of background with your own or change the color code..

      Delete
  15. Thank you, Akak! Tuto nie dah berjaya lah!
    Singgah kat blog saya, http://seizzaviablog.blogspot.com/

    ReplyDelete
  16. yayy, dh jadi. Tp macam mne nk buat reply button yee?

    ReplyDelete
    Replies
    1. Reply button hanya untuk template designer sahaja.. blogskin tak bole rasanya.. Lama dah tak godek code blogskin

      Delete
  17. tak jadi :( backgroud tu lari dari kotak komen

    ReplyDelete
  18. hai jadi lah tutor ni.thankyou tau :)

    ReplyDelete