Blogger Komentar Style Fantastis

Komentar Fantastis

Bisa di bilang Sistem Komentar kali ini sungu Fantastis, Exotis dan Boombastis.

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

Baiklah kita mulai caranya 

1. Login di Blogger.com, Pergi ke Template > Edit HTML (Expand Template Widget)
2. Tekan Ctrl+F cari ]]></b:skin>, Letakan kode berikut di atas ]]></b:skin>
   /* Comments ----------------------------------------------- */ #comments h4 { font-size: 18px; font-weight: normal; margin: 20px 0; } .cm_wrap { clear: both; margin-bottom: 10px; float: right; width: 100%; } .cm_head { margin: 0; width:60px; float: left; } .cm_avatar { margin: 0; vertical-align: middle; border: 1px solid #DDD; padding: 3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIWve5INE9jCFddp6Ro28G9hlkXPJriYaGvOokhcAqxKUkfxRVnZVN3ugdUJrqehkHPjZwwL8T3T29XqWofFZe42o6_vxxfaGHwyVxckErwQLcWJEEN7j0HdvkcPo_69gKeb_DM-YtNg/s1600/takdikenal.jpg) center no-repeat; width: 35px; height: 35px; } .cm_avatar_a { margin: 0; vertical-align: middle; border: 1px solid #DDD; padding: 3px; background:#c6e5f7; background-position:center; background-repeat:no-repeat; width: 35px; height: 35px; } .cm_reply { padding-top: 5px; } .cm_reply a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; } .cm_reply a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; } .cm_entry { padding: 16px; background: #fcfcfc; border: 1px solid #E4E4E4; overflow: hidden; } .cm_arrow { display: block; width: 9px; height: 18px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuME2a7RsxsIpq7Jn51NKg8hPzHmTOmP-j4ndScOheRboEA4nri1MOToYm_t-UQ0Md9kcNUB-6Y19aQuioAU6neIXgpZcHLJaRTz0wHEwBdYB81MD0xSk3-_sZOZw_ACdj9qJTGbKU8DI/s1600/comment-arrow.gif) no-repeat; position: absolute; margin-left: -25px; } .cm_info { margin-bottom: 5px; border: thin solid #E6E6E6; background-color: #F4F4F4; padding: 5px; } .cm_info_a { margin-bottom: 5px; border: thin solid #E6E6E6; background-color: #dff0fa; padding: 5px; } .cm_name { font-size: 14px; color: #666666 !important; text-decoration:none; float: left; } .cm_name_a { font-family:"Comic Sans MS", cursive; font-size: 14px; color: #666666 !important; text-decoration:none; font-weight: bold; float: left; } .cm_date { font-size: 10px; color: #999; text-decoration:none; float: right; } .cm_date_a { font-family:"Comic Sans MS", cursive; font-size: 10px; color: #2D5E7B; text-decoration:none; float: right; padding-top:5px; } .cm_entry p { padding: 5px; clear: both; border: thin solid #E6E6E6; background-color: #ffffff; font-size: 13px; color: #333; word-wrap:break-word; } .cm_entry_a p { padding: 5px; clear: both; border: thin solid #E6E6E6; background-color:  #ffffff; font-size: 13px; color: #333; word-wrap:break-word; } .cm_pagenavi { font-size: 10px; text-transform: uppercase; color: #666; text-shadow: 1px 1px white; font-weight: bold; } .cm_pagenavi a { color: #666; text-decoration: none; padding:10px; } .cm_pagenavi a:hover { text-decoration: underline } .cm_pagenavi span { color: #888; background: white; padding: 4px; border: 1px solid #E0E0E0; } /* Comment Admin  */ .comment-body-author { font-family:"Comic Sans MS", cursive; font-weight: 300; }
   Untuk menganti background agar sesuai dengan template yang anda gunakan cari saja kode CSS .cm_entry
3. Berikutnya cari </body>, Masukan kode berikut di atas kode </body>

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

4. Selanjutnya cari kode
   <h4 id='comment-post-message'><data:postCommentMsg/></h4>
   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>
5. Terakhir cari <b:includable id='comments' var='post'>, ganti kode yang berada diantara dua kode dari pembuka <b:includable ...> sampai penutup </b:includable>
   

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

   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/AVvXsEjxYF6AMoro-6atyZ3HufATZDda_ISvMh8Kt31CWvGQD8Jp0P053W9yeshI1D-6LfB8JlcROdTBP-RLI4E1z8GLyVBM4PxBBbBIPMFIVOBZHH6CCWxh16E9qIMjwksMAbXAE1hWNFK6Jfk/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>
   Dalam kode di ini anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.
6. Langkah terakhir simpan template, Klik Save Template.

You might also like:

• Cara Membuat Menu Navigasi Slide Horizontal Blogspot
• Show/Hide pada Menu komentar dengan jquery
• Cara Membuat Artikel Terkait
• Membuat Buku Tamu Tersembunyi