Cara membuat Kotak Komentar ala wordprees di blog Versi 2

0

Share

Klk Image Untuk memperbesar gambar

 Sobat K.A setelah lama saya mencarinya akhirnya dapet juga.Ini adalah Merubah papan komentar asli dari blogger kita Menjadi full modif  jadi seperti Komentar ala wordprees hehehehe...Hasilnya adalah sama dengan papan komentar Blog K.A yang Pakai.

Fitur-fiturnya adalah sebagai berikut:

1. Styel Elegan dan Simpel
2. Image Avatar
3. Tombol Reply
4. Styel Reply WP
5. Highlight Blog Owners
6. Pesan Ucapan "Terimakasi"
7. Emoticon Onion (Kucing)

Tapi selama percobaan yang saya terapkan untuk beberapa template ada yang sebaian fitur Di atas yang tak berfungsi,tapi gak mempengaruhi tempale kita kok...kalau sobat tertarik caranya adalah sebagai berikut:

1. Masuk ke akun Blogger Anda.
2. Klik Rancangan.
3. Klik tab Edit HTML.
4. Klik Expand Template Widget
5. Tekan Ctrl+F cari ]]></b:skin>, Letakan kode di bawah ini , di atas ]]></b:skin>  

/* Comments<br /> ----------------------------------------------- */<br /> #comments h4 {<br /> font-size: 18px;<br /> font-weight: normal;<br /> margin: 20px 0;<br /> }<br /> .cm_wrap {<br /> clear: both;<br /> margin-bottom: 10px;<br /> float: right;<br /> width: 100%;<br /> }<br /> .cm_head {<br /> margin: 0;<br /> width:60px;<br /> float: left;<br /> }<br /> .cm_avatar {<br /> margin: 0;<br /> vertical-align: middle;<br /> border: 1px solid #DDD;<br /> padding: 3px;<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ZZpEeyxjoeLg9rzQgoy4VxdWc5mxGW_GSHGgHwjINaPraXyDgtkIsQqdqxoeo-poBYRCuVLyMGIMBTkRTjOJvHbKxA16Dg7bqFpEUTY9hi42sW4jadG33y4bvR6PG2RswNTu5djCg8E/s1600/takdikenal.jpg) center no-repeat;<br /> width: 35px;<br /> height: 35px;<br /> }<br /> .cm_avatar_a {<br /> margin: 0;<br /> vertical-align: middle;<br /> border: 1px solid #DDD;<br /> padding: 3px;<br /> background:#c6e5f7;<br /> background-position:center;<br /> background-repeat:no-repeat;<br /> width: 35px;<br /> height: 35px;<br /> }<br /> .cm_reply {<br /> padding-top: 5px;<br /> }<br /> .cm_reply a {<br /> display: inline-block;<br /> margin: 0;<br /> padding: 1px 6px;<br /> border: 1px solid #C4C4C4;<br /> border-top-color: #E4E4E4;<br /> border-left-color: #E4E4E4;<br /> color: #424242 !important;<br /> text-align: center;<br /> text-shadow: 0 -1px 0 white;<br /> text-decoration: none;<br /> -webkit-border-radius: 2px;<br /> -moz-border-radius: 2px;<br /> border-radius: 2px;<br /> background: #EDEDED;<br /> background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );<br /> background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );<br /> font: 11px/18px sans-serif;<br /> }<br /> .cm_reply a:hover {<br /> text-decoration: none !important;;<br /> background: #ccc;;<br /> background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;<br /> background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;<br /> }<br /> .cm_entry {<br /> padding: 16px;<br /> background: #fcfcfc;<br /> border: 1px solid #E4E4E4;<br /> overflow: hidden;<br /> }<br /> .cm_arrow {<br /> display: block;<br /> width: 9px;<br /> height: 18px;<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93Ezs_rrb7B6px310cK-PfS7s3ERoQkNQq3o6daFgnXQNvT6xfmVNPVBFX9jUs-FY25IaXU0yxWNY4ZBT-1aWXC8PAB9Vzg8FGaSKoqSOHYxn5HteGzAOre07RSFTHWeI07V_YUPT9As/s1600/comment-arrow.gif) no-repeat;<br /> position: absolute;<br /> margin-left: -25px;<br /> }<br /> .cm_info {<br /> margin-bottom: 5px;<br /> border: thin solid #E6E6E6;<br /> background-color: #F4F4F4;<br /> padding: 5px;<br /> }<br /> .cm_info_a {<br /> margin-bottom: 5px;<br /> border: thin solid #E6E6E6;<br /> background-color: #dff0fa;<br /> padding: 5px;<br /> }<br /> .cm_name {<br /> font-size: 14px;<br /> color: #666666 !important;<br /> text-decoration:none;<br /> float: left;<br /> }<br /> .cm_name_a {<br /> font-family:"Comic Sans MS", cursive;<br /> font-size: 14px;<br /> color: #666666 !important;<br /> text-decoration:none;<br /> font-weight: bold;<br /> float: left;<br /> }<br /> .cm_date {<br /> font-size: 10px;<br /> color: #999;<br /> text-decoration:none;<br /> float: right;<br /> }<br /> .cm_date_a {<br /> font-family:"Comic Sans MS", cursive;<br /> font-size: 10px;<br /> color: #2D5E7B;<br /> text-decoration:none;<br /> float: right;<br /> padding-top:5px;<br /> }<br /> .cm_entry p {<br /> padding: 5px;<br /> clear: both;<br /> border: thin solid #E6E6E6;<br /> background-color: #ffffff;<br /> font-size: 13px;<br /> color: #333;<br /> word-wrap:break-word;<br /> }<br /> .cm_entry_a p {<br /> padding: 5px;<br /> clear: both;<br /> border: thin solid #E6E6E6;<br /> background-color: #ffffff;<br /> font-size: 13px;<br /> color: #333;<br /> word-wrap:break-word;<br /> }<br /> .cm_pagenavi {<br /> font-size: 10px;<br /> text-transform: uppercase;<br /> color: #666;<br /> text-shadow: 1px 1px white;<br /> font-weight: bold;<br /> }<br /> .cm_pagenavi a {<br /> color: #666;<br /> text-decoration: none;<br /> padding:10px;<br /> }<br /> .cm_pagenavi a:hover {<br /> text-decoration: underline<br /> }<br /> .cm_pagenavi span {<br /> color: #888;<br /> background: white;<br /> padding: 4px;<br /> border: 1px solid #E0E0E0;<br /> }<br /> /* Comment Admin */<br /> .comment-body-author {<br /> font-family:"Comic Sans MS", cursive;<br /> font-weight: 300;<br /> }
      6. Terus cari </body>, Masukan kode di bawah ini , di atas kode </body>

<b:if cond='data:blog.pageType == "item"'><br /> <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>
       7.Selanjutnya cari kode <h4 id='comment-post-message'><data:postCommentMsg/></h4> Terus letakkan Kode dibawah ini tepat Di bawah Kode <h4 id='comment-post-message'><data:postCommentMsg/></h4>  


<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'/>:))<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/069.gif' width='30'/>;))<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif' width='30'/>;;)<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif' width='30'/>:D<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif' width='30'/>;)<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif' width='30'/>:p<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif' width='30'/>:((<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif' width='30'/>:)<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif' width='30'/>:(<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif' width='30'/>:X<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif' width='30'/>=((<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif' width='30'/>:-o<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif' width='30'/>:-/<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif' width='30'/>:-*<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/023.gif' width='30'/>:|<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif' width='30'/>8-}<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/037.gif' width='31'/>:)]<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/042.gif' width='30'/>~x(<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif' width='30'/>:-t<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif' width='30'/>b-(<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif' width='30'/>:-L<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif' width='30'/>x(<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif' width='30'/>:-p<br /> <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/071.gif' width='30'/>=))<br /> </b><br /> </div>
       8.Terakhir cari <b:includable id='comments' var='post'>, ganti kode yang yang berada diantara dua kode dari pembuka <<b:includable id='comments' var='post'> ................sampai penutup........................... </b:includable> 
Terus ganti dengan Kode di bawah ini:

<div class='comments' id='comments'> <a name='comments'/><br /> <b:if cond='data:post.allowComments'><br /> <h4> <b:if cond='data:post.numComments > 0'><br /><a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a><br /> <b:if cond='data:post.numComments == 1'><br /> <span id='cm_total'>1</span> <data:commentLabelPlural/> <br /> <b:else/><br /> <span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/><br /> </b:if><br /> </b:if><br /> </h4> <br /> <div id='cm_reply_css'/> <br /> <div class='cm_pagenavi' id='cm_page'/> <br /> <div id='cm_block'> <b:loop values='data:post.comments' var='comment'><br /> <b:if cond='data:comment.isDeleted'><br /> <b:else/><br /> <br /> <div expr:id='data:comment.anchorName'> <div class='cm_wrap'> <a expr:name='data:comment.anchorName'/> <br /> <div class='cm_head'> <div class='cm_avatar'> <b:if cond='data:blog.enabledCommentProfileImages'><br /> <data:comment.authorAvatarImage/><br /> </b:if> <br /> </div> <div class='cm_reply'> <a expr:href='"https://www.blogger.com/comment.g?blogID=0000000000000000000&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a><br /> </div> </div> <b:if cond='data:comment.author == data:post.author'><br /> <dd class='cm_entry'><br /> <span class='cm_arrow'/><br /> <div class='cm_info_a'> <div class='cm_name_a'> <b:if cond='data:comment.authorUrl'><br /> <img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgEipBUHStfxZJgGfHSke2jlkOAsojMfKS4me9xowr5WPhFjKNLEfquT73vE5XjdxCC3eFKe59DvhocOV9fRVge-F9jsVmYtBRe8V0dKJDG7YWD4a8XqrlDOKsinbYzhqbbLHAwWBtnw/s1600/adminstar.png' title='Admin' width='20px'/><br /> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><br /> <data:comment.author/><br /> </a><br /> <b:else/><br /> <b><data:comment.author/></b><br /> </b:if><br /> </div> <div class='cm_date_a'> <data:comment.timestamp/><br /> <b:include data='comment' name='commentDeleteIcon'/><br /> </div> <div class='clear'/> </div> <br /> <div class='comment-body-author'> <p><data:comment.body/></p> </div> </dd><br /> <b:else/><br /> <dd class='cm_entry'><br /> <span class='cm_arrow'/><br /> <div class='cm_info'> <div class='cm_name'> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><br /> <data:comment.author/><br /> </a><br /> <b:else/><br /> <b><data:comment.author/></b><br /> </b:if><br /> </div> <div class='cm_date'> <data:comment.timestamp/><br /> <b:include data='comment' name='commentDeleteIcon'/><br /> </div> <div class='clear'/> </div><br /> <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><br /> </dd><br /> </b:if><br /> </div> </div> </b:if> <br /> </b:loop><br /> </div> <div class='cm_pagenavi' id='cm_page_copy'/> <br /> <b:if cond='data:post.embedCommentForm'><br /> <b:if cond='data:post.allowNewComments'><br /> <b:include data='post' name='comment-form'/><br /> <b:else/><br /> <data:post.noNewCommentsText/><br /> </b:if><br /> <b:else/><br /> <b:if cond='data:post.allowComments'><br /> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /> </b:if><br /> </b:if><br /> </b:if><br /> </div>
Dalam kode di atasi anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.
     9. Klik Save/simpan Template.

Semoga berhasil sobat

Penting!! Sebelum save/simpan template!!!saran'kalau bisa di Pratinjau atau Unduh lengkap template dulu.Ini dilakukan  untuk mengantisipasi kalau ada kejadian yang tidak di inginkan terhadap template Sobat .

Terkait:

• Cara membuat kotak komentar ala Wordprees 1 
• Cara membuat papan komentar ala wordprees versi 3

 Post by.Kang Andikwin

 Referensi

 publise modif : andikwin.blogspot.com