Ads 728x90

» » Cara Membuat Kotak Komentar keren dan ringan di blog
Dede Ubed 09 Oktober 9 komentar Read
adscblog
Banyak cara blogger yang menghiasi template nya agar para pengunjung betah di blog salah satu nya yaitu dengan menghiasi kotak komentar,memudahkan para pengunjung dalam berkomentar serta biar kelihatan agak menarik dengan begitu para pengunjung betah di blog,banyak sekali parian kotak komentar di blog,
Selain para blogger mempercantik kotak komentar nya demi untuk membuat betah para pengunjung tidak sedikit para blogger menambahkan icon emoji di blog agar para pengunjung terhibur ketika para menulis seuatu yang di sertai dengan emoji tersebut.

Namun disini saya bukan untuk membahas tentang pemasangan emoji di blog melainkan cara mempercantik atau mengganti kotak komentar di blog agar kotak komentar di blog lebih menarik lagi ketimbang kotak komentar bawaan nya.

Disaat anda memasang template di blog.tidak semua template yag anda pasang tentu nya mempunyai kotak komentar yang menurut anda tidak bagus di lihat,sehingga berke inginan untuk mengganti nya dengan yang lain.

Cara Mengganti Kotak komentar di blog dengan yang keren

Bisa anda lihat pada gambar di atas,itu adalah salah satu contoh kotak komentar yang sedang kita bahas ini,jika kita lihat tampilan nya tidak begitu jelek tetapi kotak komentar ini dapat menghiasi blog anda dan kotak komentar ini juga ringan.

Jika anda tertarik dengan kotak komentar ini bisa anda lakukan atau bisa anda pasang di blog anda dengan mengikuti langkah-langkah di bawah ini agar tidak mengalamai kesalahan pada blog,tetapi saya saran kan agar tidak mengalamai kesalahan yang membuat error pada blog anda lebih baik template nya di salin dulu dan simpan di notepad,
  • Silahkan anda masuk ke blogger
  • Setelah itu klik template anda kemudian edit html
  • Di dalam edit template anda silahkan anda cari kode di bawah ini,agar lebih mudah dalam pencarian nya silahkan anda tekan Ctrl+F secara bersamaan
<b:include data='post' name='threaded_comments'/>
  • Setelah ketemu silahkan anda ganti dengan kode berikut
<b:include data='post' name='comments'/>
  • Langkah selanjutnya silahkan anda cari lagi kode berikut
<b:includable id='comments' var='post'>

--------kode--------

</b:includable>
  • Dan ganti dengan kode berikut
 <b:includable id='comments' var='post'>
     <div class='comments' id='comments' itemscope='itemscope' itemtype='http://schema.org/Comment'>
<meta expr:content='data:post.title' itemprop='about'/>
    <meta expr:content='data:post.canonicalUrl' itemprop='discussionUrl'/>
        <b:if cond='data:post.allowComments'>
          <h5> <b:if cond='data:post.numComments == 0'> <span itemprop='interactionCount'>0</span> Komentar untuk &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span> Komentar untuk &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <span itemprop='interactionCount'><data:post.numComments/></span> Komentar untuk &quot;<data:blog.pageName/>&quot; </b:if> </h5>
    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160; 
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160; 
        <data:post.commentRangeText/>
        &#160; 
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160; 
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div class='clear'/>
    <div id='comment_block'>
      <b:loop values='data:post.comments' var='comment'>
         <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/UserComments'>
          <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'>
              <data:comment.body/> - <a class='comment_hapus' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
                Hapus
              </a>
            </span>
            <b:else/>
            <b:if cond='data:post.adminClass == data:comment.adminClass'>
              &lt;div class=&#39;comment_inner comment_admin&#39;&gt; 
              <b:else/>
              &lt;div class=&#39;comment_inner&#39;&gt; 
            </b:if>
            <div class='comment_header'>
              <div class='comment_avatar'>
                <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
 <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' itemprop='replyToUrl' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>
            </div>
            <div class='comment_body'>
<div class='cm_head'>
<div class='cm_infonm'>
              <div class='comment_name'>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'>
                   <span itemprop='creator'><data:comment.author/></span>
                  </a>
                  <b:else/>
                 <span itemprop='creator'><data:comment.author/></span>
                </b:if>
                <b:if cond='data:comment.author == data:post.author'/>
              </div>
              <div class='comment_service'>
                <a expr:href='data:comment.url' rel='nofollow' title='Permalink'>
                   <span class='comment_date' itemprop='commentTime'>
                      <data:comment.timestamp/>
                    </span>
                </a>
              </div>
</div>
<a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6PY9PfKPaByhh4xWaFCUg67YHZgGs2sK9F8zSAcI6F_etxqqdSV4AD0AS6wZw2rZWt_aqKl3EsHY7qGOAyD4EOVBIE46Aqfs2ibM7IYL4UHEhdF7mxjl_KgQfa3ck6qJwNb9RJ4-Qu1M/s1600/delete4.png' title='Hapus Komentar'/>
</a>    
</div>
              <p itemprop='commentText'><data:comment.body/></p>
            </div>
            <div class='clear'/>
            &lt;/div&gt; 
            <div class='clear'/>
            <div class='comment_child'/>
            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>
          </b:if>
        </div>
      </b:loop>
    </div>
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160; 
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160; 
        <data:post.commentRangeText/>
        &#160; 
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160; 
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div class='clear'/>
    <div class='comment_form'>
      <b:if cond='data:post.embedCommentForm'>
        <b:if cond='data:post.allowNewComments'>
          <div class='comment_emo_list'/>
          <b:include data='post' name='threaded-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' expr:title='data:postCommentMsg'>
            <data:postCommentMsg/>
          </a>
        </b:if>
      </b:if>
    </div>
  </b:if>
</div>
  <script type='text/javascript'>
    //<![CDATA[
    if (typeof(jQuery) == 'undefined') {
      //output the script (load it from google api)
      document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
    }
    //]]>
  </script>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
  <script type='text/javascript'>   
    <b:if cond='data:post.numComments != 0'>
      var Items = <data:post.commentJso/>;
        var Msgs = <data:post.commentMsgs/>;
            var Config = <data:post.commentConfig/>;
                <b:else/>
                  var Items = {
                  };
    var Msgs = {
    };
    var Config = {
      &#39;
      maxThreadDepth&#39;
      :&#39;
      0&#39;
    };
  </b:if>
    //<![CDATA[
Config.maxThreadDepth = 2; 
var Cur_Cform_Hdr='.comment_form';var Cur_Cform_Url=$('#comment-editor').attr('src');function trim(a){var b=' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';for(var i=0;i<a.length;i++){if(b.indexOf(a.charAt(i))!=-1){a=a.substring(0,i);break}}return a}$('.comment_wrap .comment_body p').html(function(i,h){temp=h.toLowerCase();index=temp.indexOf('@<a href="#c');if(index!=-1){index_tail=temp.indexOf('</a>',index);if(index_tail!=-1){h=h.substring(0,index)+h.substring(index_tail+4)}}return h});function Valid_Par_Id(a){r=a.indexOf('c');if(r!=-1)a=a.substring(r+1);return a}function Cform_Ins_ParID(a){a='&parentID='+a+'#%7B';n_cform_url=Cur_Cform_Url.replace(/#%7B/,a);return n_cform_url}function Reset_Comment_Form(){html=$(Cur_Cform_Hdr).html();$(Cur_Cform_Hdr).html('');Cur_Cform_Hdr='.comment_form';$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cur_Cform_Url)}function Display_Reply_Form(e){par_id=$(e).attr('id');par_id=Valid_Par_Id(par_id);html=$(Cur_Cform_Hdr).html();if(Cur_Cform_Hdr=='.comment_form'){reset_html='<a href="#origin_cform" onclick="Reset_Comment_Form()">'+Msgs.addComment+'</a><a name="origin_cform"/>';$(Cur_Cform_Hdr).html(reset_html)}else{$(Cur_Cform_Hdr).html('')}Cur_Cform_Hdr='#r_f_c'+par_id;$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cform_Ins_ParID(par_id))}cur_url=window.location.href;search_formid='#comment-form_';search_index=cur_url.indexOf(search_formid);if(search_index!=-1){ret_id=cur_url.substring(search_index+search_formid.length);Display_Reply_Form('#rc'+ret_id)}for(var i=0;i<Items.length;i++){if('parentId'in Items[i]){var par_id=Items[i].parentId;var par_level=parseInt($('#c'+par_id+':first').attr('data-level'));$('#c'+par_id+' .comment_child:first').html(function(a,b){var c=Items[i].id;if(par_level>=Config.maxThreadDepth){$('#c'+c+':first .comment_reply').remove()}var d=$('#c'+c+':first').html();d='<div class="comment_wrap" id="c'+c+'" data-level="'+(par_level+1)+'">'+d+'</div>';$('#c'+c).remove();return(b+d)})}}var avatar=$("#comments");avatar.find('.comment_avatar img').each(function(){var a=$(this).attr('src');$(this).show().attr('src',a.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/"))});
//]]>
</script>
</b:includable>
  • Langkah selanjut nya silahkan adalah letakan kode css berikut
#comments{background:#fff;border:1px solid #ccc;margin:20px  0 0;padding:20px}
#comments h5{font:normal normal 18px Oswald,sans-serif;padding:0;margin:5px;color:#333;padding : 0 1px 5px 5px;line-height:1.em;margin:2px;display:block;}
.comment_inner{margin:20px 0;padding:0;overflow:hidden}
.comment_header{float:left;width:67px}
.cm_head{position:relative;background:#fff;border-bottom:1px solid #ccc;margin:-10px -10px 0;padding:5px 10px 8px;}
.comment_avatar{border:1px solid #ccc;margin:0;padding:5px 5px 0;}
.comment_avatar img{width:55px;height:55px;padding:0;text-align:center;margin:0;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUh-wi-6me8VXW-u0Y5OInvFwI3axE4B5421EGElRRp5SGB5NHtc5u8W-hvryeWyQvQumDI73HuS3wcEVONXjka1BqUyLYcvXRZ1xID4izNZmj25mh3PYmy0HhcVnzth4A0i8G0DM8C6a/s1600/anonymous.jpg) no-repeat}
div.comment_avatar img[src="http://img1.blogblog.com/img/openid16-rounded.gif"]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUh-wi-6me8VXW-u0Y5OInvFwI3axE4B5421EGElRRp5SGB5NHtc5u8W-hvryeWyQvQumDI73HuS3wcEVONXjka1BqUyLYcvXRZ1xID4izNZmj25mh3PYmy0HhcVnzth4A0i8G0DM8C6a/s1600/anonymous.jpg)}
.comment_name,.comment_name a{font-family:Oswald, Calibri, Sans-Serif;padding:0;margin:0 0 5px 0;font-size:18px;}
.comment_service{margin-top:0}
.comment_date{margin:0;color:#d6d5d5;font-size:14px;text-transform:uppercase}
.respond{float: right;margin:0;padding:0}
.comment_date:hover{color:#bbb;text-decoration:underline}
.comment_body{background:#fff;border:1px solid #ccc;margin-left:77px;padding:10px;}
.comment_body p{line-height:1.4;margin:15px 0 5px;color:#666;font-size:14px;word-wrap:break-word;padding:0;}
.comment_child .comment_wrap{padding-left:78px}
.comment-delete{position:absolute;float:right;top:10px;right:10px;margin:0;padding:0}
.infonm{float:left}
.comment_reply{display:block;font-weight:700;margin:10px 0 0;padding:7px 0;color:#fff!important;text-align:center;text-decoration:none!important;background:#3498db;}
.comment_reply:hover{text-decoration:none;background:#2980b9}
.comment_hapus{font-weight:700;margin:0;padding:0;color:#fff!important;text-decoration:none;}
.comment_hapus:hover{text-decoration:none;color:#000!important}
.unneeded-paging-control{display:none}
.comment-form{max-width:100%!important}
#comment-editor{width:100%!important;background:#fff url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 40%;margin-bottom:0;margin-top:5px}
.comment_form a{text-decoration:none;font-weight:bold;font-size:14px}
.comment-form p{background:#fff;padding:10px;margin:5px 0 5px 0;color:#000;font-size:14px;line-height:20px;position:relative}
.comment_reply_form{padding:0 0 0 70px}
.comment_reply_form .comment-form{width:100%}
iframe{border:none;overflow:hidden}
.deleted-comment{background:#e74c3c;color:#fff;padding:20px;margin:5px 0;display:block}
iframe{border:none;overflow:hidden}
.comment-form p{border:1px solid #ccc;color:#000;margin-bottom:20px;padding:20px}
  • Langkah terakhi r save template dan lihat hasil nya dengan cara membuat sebuah komentar percobaan di salah satu postingan atau bisa anda lihat ke salah satu postingan yang sudah ada komentar nya agar bisa anda lihat hasil kerja anda tadi
 Nah itulah cara membuat kotak komentar di blog semoga artikel nya bisa membantu dan semoga kotak komentar nya bisa bermanfaat,selamat mencoba dan salam blogger.
adscblog

Recommendation Apps
ads1
Posted by Dede Ubed, Published at 09 Oktober and have 9 komentar
Dede Ubed

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

9 komentar

avatar
Unknown 09/06/17, 15.15
✖

nice info gan. thanks

Balas
avatar
Dede Ubed 10/06/17, 08.10
✖

sama -sama Gan,terimakasih udah berkunjung..

Balas
avatar
Rintarou 20/01/18, 11.49
✖
Komentar ini telah dihapus oleh pengarang.
avatar
Rintarou 20/01/18, 11.51
✖

thanks gan kunjungi www.animenyus.com

Balas
avatar
Mantap 20/01/18, 11.52
✖

Masih reload ya kalau komen pakai blog.

Balas
avatar
Chapteria 14/12/18, 07.17
✖

Nice gan! thanks buat tutorialnya!

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi

Ads 728x90