Ads 728x90

» » Cara Membuat Threaded Comment menjadi Keren Tapi Ringan
Dede Ubed 26 Mei 0 komentar Read
adscblog
Threaded Comment merupakan suatu kotak omentar yang berada di blog tepat nya di bawah Postingan,dan Threaded Comment ini akan muncul ketika salah satu pengunjung yang mencoba berinteraksi dengan Artikel yang mereka cari,banyak sekali jenis Threaded Comment yang di modifikasi oleh para blogger,namun tetapi semakin bagus tampilan nya biasa nya akan membuat Loading page nya menjadi lambat dan tentu nya akan mengecewakan para pengunjung yang datang ke blog kita


Namun kali ini infotrens akan berbagi pengalaman cara membuat Threaded Comment yang keren akan tetapi tidak mempengaruhi terhadap loading blog,karena kode yang di pasang di template tidak terlalu banyak sehingga template anda akan aman aman saja ketika Threaded comment ini di terapkan.

Dan saya juga memakai Threaded Comment ini di blog yang lain nya yang sesuai dengan template buatan saya sendiri, jadi jika anda tertarik dengan pembuatan atau anda suka dengan mempercantik komentar blog anda,apa salah nya untuk mencoba cara ini,dan untuk contoh tampilan nya bisa anda lihat pada gambar di atas,tidak terlalu buruk juga tidak terlalu jelek,yang pasti nya anda akan menyukai Threaded Comment ini untuk di pasang di blog sobat

Cara Modifikasi Threaded Comment di blog

dan untuk penerapan Threaded Comment ini bisa anda ikuti langkah-langkah berikut
  • Masuk ke Blogger
  • Lalu klik Template yang berada di bagian kiri kemudian klik Edit Html
  • Setelah itu langkah pertama yang harus anda lakukan adalah mencari kode
<b:include data='post' name='threaded_comments'/> 
  • Biasa nya kode tersebut ada Dua ya
  • Setelah ketemu silahkan anda ganti kode di atas dua dua nya dengan kode berikut
<b:include data='post' name='comments'/>
  • Setelah anda mengganti kode di atas,langkah selanjut nya anda mencari kode berikut
<b:includable id='comments' var='post'>

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

</b:includable>
  • Setelah ketemu Silahkan anda ganti kode tersebut 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>
  • Setelah itu langkah terakhir anda letakan kode CSS di bawah ini
#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}
  • Kemudian Save template dan silahkan anda lihat hasil nya
Untuk memastikan apakah pergantian Threaded Comment ini berhasil apa tidak nya,sobat bisa melihat pada sebuah atikel yang sudah ada komentar nya,atau bisa juga membuat komentar sendiri hanya untuk memastikan apakah Threaded Comment tersebut sudah berubah apa belum

Nah itulah Cara Membuat Threaded Comment yang keren tapi ringan di blog,semoga artikel nya bisa membantu untuk sobat blogger,salam blogger
adscblog

Recommendation Apps
ads1
Posted by Dede Ubed, Published at 26 Mei and have 0 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

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

Ads 728x90