Merubah tampilan form Komentar Blog

Form Komentar yang akan dibuat kali ini cukup menarik, untuk blog Karena form komentar ini sudah diedit dengan baik dan sempurna, dengan berbagai fitur seperti. dibawah ini

• Style Elegan dan Simpel
• Image Avatar
• Tombol Reply
• Styel Reply WP
• Highlight Blog Owners
• Pesan Ucapan "Terimakasi"
• Emoticon Onion (Kucing)

blog ini juga memakai form Komentar ini? 

1. Login di Blogger.com, Pergi ke Template > Edit HTML (Expand Template Widget)
2. Tekan Ctrl+F cari ]]>, Letakan kode berikut di atas ]]> 

1. 
   
2. /*
3. Comments
4. ----------------------------------------------- */
5. #comments h4 {
6. font-size: 18px;
7. font-weight: normal;
8. margin: 20px 0;
9. }
10. .cm_wrap {
11. clear: both;
12. margin-bottom: 10px;
13. float: right;
14. width: 100%;
15. }
16. .cm_head {
17. margin: 0;
18. width:60px;
19. float: left;
20. }
21. .cm_avatar {
22. margin: 0;
23. vertical-align: middle;
24. border: 1px solid #DDD;
25. padding: 3px;
26. background:
27. url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwO_xhsGbc2DkwFxCxUpnMyKeycCRVIKSOWoO9uslKeBsGHu4slckv25iLmd0dD7selttvCUVNA9B_uUU1y9AYv42dl_5JMXTQsuyy3BQe0xYpBahyphenhyphen1F668YLD6gZfCq-ZSLrX3u3wu3s/s1600/takdikenal.jpg)
28. center no-repeat;
29. width: 35px;
30. height: 35px;
31. }
32. .cm_avatar_a {
33. margin: 0;
34. vertical-align: middle;
35. border: 1px solid #DDD;
36. padding: 3px;
37. background:#c6e5f7;
38. background-position:center;
39. background-repeat:no-repeat;
40. width: 35px;
41. height: 35px;
42. }
43. .cm_reply {
44. padding-top: 5px;
45. }
46. .cm_reply a {
47. display: inline-block;
48. margin: 0;
49. padding: 1px 6px;
50. border: 1px solid #C4C4C4;
51. border-top-color: #E4E4E4;
52. border-left-color: #E4E4E4;
53. color: #424242 !important;
54. text-align: center;
55. text-shadow: 0 -1px 0 white;
56. text-decoration: none;
57. -webkit-border-radius: 2px;
58. -moz-border-radius: 2px;
59. border-radius: 2px;
60. background: #EDEDED;
61. background: -webkit-gradient( linear, left top, left bottom,
62. color-stop(.2, white), color-stop(1, #E5E5E5) );
63. background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100%
64. );
65. font: 11px/18px sans-serif;
66. }
67. .cm_reply a:hover {
68. text-decoration: none !important;;
69. background: #ccc;;
70. background: -webkit-gradient(linear,left top,left bottom,color-stop(.2,
71. #eeeeee),color-stop(1, #cccccc));;
72. background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
73. }
74. .cm_entry {
75. padding: 16px;
76. background: #fcfcfc;
77. border: 1px solid #E4E4E4;
78. overflow: hidden;
79. }
80. .cm_arrow {
81. display: block;
82. width: 9px;
83. height: 18px;
84. background:
85. url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvol57Z4etpDP3iApmme67_zwYuuX5s-SGS3S8vCFXZ0DZDyiqiEmWOeZs7beTCVZZ_EkJz4i3_g3zWMurD7fnNl7-bYDH-76UAbGaqq8JNCqTtD0hE75l635t_7o_E4KlV6KmevmWsg/s1600/comment-arrow.gif)
86. no-repeat;
87. position: absolute;
88. margin-left: -25px;
89. }
90. .cm_info {
91. margin-bottom: 5px;
92. border: thin solid #E6E6E6;
93. background-color: #F4F4F4;
94. padding: 5px;
95. }
96. .cm_info_a {
97. margin-bottom: 5px;
98. border: thin solid #E6E6E6;
99. background-color: #dff0fa;
100. padding: 5px;
101. }
102. .cm_name {
103. font-size: 14px;
104. color: #666666 !important;
105. text-decoration:none;
106. float: left;
107. }
108. .cm_name_a {
109. font-family:"Comic Sans MS", cursive;
110. font-size: 14px;
111. color: #666666 !important;
112. text-decoration:none;
113. font-weight: bold;
114. float: left;
115. }
116. .cm_date {
117. font-size: 10px;
118. color: #999;
119. text-decoration:none;
120. float: right;
121. }
122. .cm_date_a {
123. font-family:"Comic Sans MS", cursive;
124. font-size: 10px;
125. color: #2D5E7B;
126. text-decoration:none;
127. float: right;
128. padding-top:5px;
129. }
130. .cm_entry p {
131. padding: 5px;
132. clear: both;
133. border: thin solid #E6E6E6;
134. background-color: #ffffff;
135. font-size: 13px;
136. color: #333;
137. word-wrap:break-word;
138. }
139. .cm_entry_a p {
140. padding: 5px;
141. clear: both;
142. border: thin solid #E6E6E6;
143. background-color:  #ffffff;
144. font-size: 13px;
145. color: #333;
146. word-wrap:break-word;
147. }
148. .cm_pagenavi {
149. font-size: 10px;
150. text-transform: uppercase;
151. color: #666;
152. text-shadow: 1px 1px white;
153. font-weight: bold;
154. }
155. .cm_pagenavi a {
156. color: #666;
157. text-decoration: none;
158. padding:10px;
159. }
160. .cm_pagenavi a:hover {
161. text-decoration: underline
162. }
163. .cm_pagenavi span {
164. color: #888;
165. background: white;
166. padding: 4px;
167. border: 1px solid #E0E0E0;
168. }
169. /* Comment Admin  */
170. .comment-body-author {
171. font-family:"Comic Sans MS", cursive;
172. font-weight: 300;
173. }

• Untuk menganti background agar sesuai dengan template yang anda gunakan cari saja kode CSS .cm_entry
• Berikutnya cari , Masukan kode berikut di atas kode 
  

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script src='http://donor-ilmu.googlecode.com/files/comment.js' type='text/javascript'/> <script src='http://donor-ilmu.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/> </b:if>

1. Selanjutnya cari kode
   
   
   Kalau suda ketemu letakan kode berikut tepat dibawah kode yang anda temukan. 

• <div
• style='width:550px;text-align: center;border: 1px solid #ccc;padding:
• 2px 2px;margin-top:
• 15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'>
• <b><img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif'
• width='30'/>:)) <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/069.gif'
• width='30'/>;))
• <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif'
• width='30'/>;;) <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif'
• width='30'/>:D <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif'
• width='30'/>;) <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif'
• width='30'/>:p <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif'
• width='30'/>:(( <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif'
• width='30'/>:) <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif'
• width='30'/>:( <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif'
• width='30'/>:X <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif'
• width='30'/>=((
• <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif'
• width='30'/>:-o <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif'
• width='30'/>:-/ <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif'
• width='30'/>:-* <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/023.gif'
• width='30'/>:| <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif'
• width='30'/>8-} <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/037.gif'
• width='31'/>:)] <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/042.gif'
• width='30'/>~x( <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif'
• width='30'/>:-t <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif'
• width='30'/>b-(
• <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif'
• width='30'/>:-L <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif'
• width='30'/>x( <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif'
• width='30'/>:-p <img border='0' height='30'
• src='http://www.cute-factor.com/images/smilies/onion/071.gif'
• width='30'/>=)) </b> </div>

1. Terakhir cari , ganti kode yang berada diantara dua kode dari pembuka sampai penutup

<b:includable id='comments' var='post'> Kode yang harus di ganti </b:includable>

1. Ganti kode dia antara b:includable dengan kode di bawah ini

<div

class='comments' id='comments'> <a name='comments'/> <b:if

cond='data:post.allowComments'> <h4> <b:if

cond='data:post.numComments &gt; 0'>

<a href='#comment-form' style='float:right; margin-right:5px;'>+

<data:commentLabelPlural/> +</a> <b:if

cond='data:post.numComments == 1'> <span

id='cm_total'>1</span> <data:commentLabelPlural/>

<b:else/> <span

id='cm_total'><data:post.numComments/></span>

<data:commentLabelPlural/> </b:if> </b:if>

</h4> <div id='cm_reply_css'/> <div class='cm_pagenavi'

id='cm_page'/> <div id='cm_block'> <b:loop

values='data:post.comments' var='comment'> <b:if

cond='data:comment.isDeleted'> <b:else/> <div

expr:id='data:comment.anchorName'> <div class='cm_wrap'> <a

expr:name='data:comment.anchorName'/> <div class='cm_head'>

<div class='cm_avatar'> <b:if

cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/> </b:if> </div>

<div class='cm_reply'> <a

expr:href='&quot;https://www.blogger.com/comment.g?blogID=0000000000000000000&amp;postID=&quot;

+ data:post.id +

&quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot;

+ data:comment.anchorName + &quot;%22%3E&quot; +

data:comment.author + &quot;%3C%2F%61%3E#form&quot;'

onclick='javascript:window.open(this.href,

&quot;bloggerPopup&quot;,

&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;);

return false;'>Reply</a> </div> </div> <b:if

cond='data:comment.author == data:post.author'> <dd

class='cm_entry'> <span class='cm_arrow'/> <div

class='cm_info_a'> <div class='cm_name_a'> <b:if

cond='data:comment.authorUrl'> <img height='20px'

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaf5eSe6up0qvhbwRqxeut1X0EB_KUrMFr00NyE7ZtL5W1rI-Df_Vx1wR_s1_TzL_P9oC4UHMPd6RXulQqHAY1NDenwyA9chyphenhyphenwcezcSRvKsW9XEMCNql-fwfQTiBXFXb_e-PNP_b2aSUw/s1600/adminstar.png'

title='Admin' width='20px'/> <a

expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>

<data:comment.author/> </a> <b:else/>

<b><data:comment.author/></b> </b:if>

</div> <div class='cm_date_a'>

<data:comment.timestamp/> <b:include data='comment'

name='commentDeleteIcon'/> </div> <div class='clear'/>

</div> <div class='comment-body-author'>

<p><data:comment.body/></p> </div> </dd>

<b:else/> <dd class='cm_entry'> <span

class='cm_arrow'/> <div class='cm_info'> <div

class='cm_name'> <b:if cond='data:comment.authorUrl'> <a

expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>

<data:comment.author/> </a> <b:else/>

<b><data:comment.author/></b> </b:if>

</div> <div class='cm_date'>

<data:comment.timestamp/> <b:include data='comment'

name='commentDeleteIcon'/> </div> <div class='clear'/>

</div> <p><data:comment.body/></p> <span

style='text-align:center; font-size:9px;'>Terimakasih

<b><data:comment.author/></b> atas Komentarnya di

<b><data:post.title/></b></span> </dd>

</b:if> </div> </div> </b:if> </b:loop>

</div> <div class='cm_pagenavi' id='cm_page_copy'/>

<b:if cond='data:post.embedCommentForm'> <b:if

cond='data:post.allowNewComments'> <b:include data='post'

name='comment-form'/> <b:else/>

<data:post.noNewCommentsText/> </b:if> <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> </b:if> </div>

1. Dalam kode di ini anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.
2. Langkah terakhir simpan template, Klik Save Template.                                                                                                             sumber  donorilmuDotCom