Anyme Template Duo Anyme Template Duo

Membuat Material Design Threaded Comment di Blog

Material Design Threaded Comment


Halo sobat Blanter, kembali lagi blog ini membagikan tutorial tentang Material Design, karena akhir-akhir ini saya sedang mempelajari material design, maka dari itu saya membagikan bagian-bagian yang sudah saya buat.

Tutorial kali ini berupa threaded comment atau style komentar blog. Style komentar material design ini akan membuat tampilan komentar pada blog sobat menjadi lebih fresh dan clean karena pada style komentar ini saya menyembunyikan Tanggal komentar dan Hapus komentar, untuk menampilkannya sobat hanya perlu mengklik icon elipsis / icon 3 titik di samping kanan, lalu klik "More Settings".

Mini Menu in Comments


Untuk komentar admin berada pada samping kanan + icon author, sedangkan untuk komentator lainnya berada pada samping kiri.

UPDATE: Twitter Emoji diganti menjadi Google Emoji. 😄

Cara Membuat Material Design Threaded Comment di Blog


Masuk ke Blogger > Template > Edit HTML

Langkah pertama masukan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style> sobat juga bisa menggunakan Tag Kondisional di bawah ini :

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
KODE CSS DISINI
</style>
</b:if>

Tag Kondisional letakan di bawah kode ]]></b:skin>

Kode CSS

/* Material Design Comments */
#comments{line-height:1.4em;margin:20px 0 0;position:relative;background:#fff;border:1px solid #ddd;padding:0 20px 20px 20px;}
#comments h3{float:left;font-size:15px;line-height:50px;text-transform:capitalize;font-weight:normal;font-family:'Roboto',Josefin Sans, Arial;color:#fff}#comments h3 i{padding-right:10px}#comments li{padding:0}
a.click-comment{float:right;font-weight:bold;text-transform:uppercase;position:absolute;top:20px;right:20px;display:inline-block;background:#22A65A;border:2px solid #22A65A;padding:8px 10px;font-size:13px;color:#fff}
a.click-comment:hover{background:#fff;color:#22A65A}
.comment-body-author{background:#0b433f;color:#008000;border:1px dotted #008000;margin:0;padding:0 0 0 10px;}
.comment_share{color:#999;cursor: pointer;font-size:10px;line-height:1.5em;max-width:100%;font-weight:normal;padding-left:5px;}
#comment_rep a:hover {text-decoration:none;color:#464646!important;}
.comment_avatar{height:50px;width:50px;margin-top:15px;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtLc4-DKrfHDXVkUV5OYQGOoHBXSjJY7_8zPJtrnDsKNdbxAUDhwV0m50KI1HM-hs17NUWSYmfXKDwWJE769K8A-Dvwv1jPygbwJpFtbB5dmde_yYQJpO9lfQWJ6CsK1OtP7r9pIa0c0/w50-h50/noimage.png) no-repeat;float:left;margin-right:15px;overflow:hidden;padding:0;border-radius:99em}
.comment_admin .comment_name:after {content:"";width:0;height:0;position:absolute;top:5px;right:0;border-width:5px;border-style:solid;border-color:#fff transparent transparent transparent;display:block;}
.comment_name{color:#4a5764;font-size:11px;font-weight:normal;max-width:100%;text-decoration:none;margin:5px 0 0;text-transform:none; font-weight:normal;position:relative}.comment-menu {float: right;list-style:none;width:0;height:0} .comment_name a {font-size:11px;color:#666;text-decoration:none;font-family:'Roboto', Sans-Serif;font-weight:400}
.comment_name a:hover {text-decoration:underline}
.comment_body p{font-size:110%;line-height:1.4em;margin:0;padding:0 0 10px}
.comment_body{padding:20px 20px 10px;position:relative;resize:none;min-width:3rem;max-width:35rem;background:#fff;color:#444;font-size:13px;border:1px solid #ddd;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.07),0 1px 1px 0 rgba(0, 0, 0, 0.06);display:inline-block}
.comment_body:after {content:"";width:0;height:0;position:absolute;top:0;right:100%;border-width:7px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
.comment_body:before {content:"";width:0;height:0;position:absolute;top:-1px;left:-16px;border-width:8px;border-style:solid;border-color:#ddd #ddd transparent transparent;display:block}
.no-comment {color:#fff;background:#FF0000;padding:10px;margin-top:10px;text-align:center;}.comment_intime {float:left;margin:10px 0;position:absolute;color:#aaa;bottom:0;left:5px}
#comment_box{padding:0;background:none;position:relative;margin:20px 0}
.comment-delete img{float:right;padding:7px;margin-left:5px;width:10px;margin-top:1px}
.comment_date{color:#666;font-size:11px;line-height:25px;cursor:pointer;float:right} 
#comments .separate {color:#fff;font-size:15px;line-height:40px;padding-left:5px;padding-right:5px;}#comments .author-mark {background:#d2d2d2; color:white;border-radius:0;padding:2px 6px 2px 6px;font-size:15px;line-height:15px;}.comment-share{display:inline;}.comment-share li {display:inline;}.comment-share li.button a {background:#546472;color:white;padding:0 5px 2px 5px;border-radius:0;display:none;}.comment-share li.button:hover a {background:#272f37;}#comment_rep {margin-top:-27px;float:right;}.comment_child .comment_wrap {padding-left:40px}
.comment_reply a{cursor:pointer;font-size:11px;line-height: 1.5em;font-weight: 400;padding:2px 14px;float:left;list-style:none;margin-right:20px;color:#aaa}.comment_reply a:hover{color:#000}
.unneeded-paging-control{display:none}.comment-form {max-width:100%!important;margin-top:-15px !important}.comment_reply_form .comment-form {width:100%;}.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block; padding-top:10px;padding-bottom:10px;}#respond {overflow:hidden;padding-left:10px;clear:both;}.comment_avatar * {max-width:100%!important;display:block;max-height:100%!important;width:50px!important;height:50px!important;margin-right:15px}.comment_child .comment_avatar, .comment_child .comment_avatar * {float:left;margin-right:15px;border-radius:100%}.comment_form a{ color:#2f6986;text-decoration:none}.comment_form a:hover {color:#2f6986;text-decoration:underline}.comment_author_flag {display:none}
#showkomentarmenu{font-size:20px;padding:10px 20px;border-radius:3px;color:#fff;float:right;margin:-8px -15px 0 0}
#komentarmenu{font-family:'Roboto',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:35px;top:45px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#komentarmenu li{width:100%}
#komentarmenu li a{padding:9px 15px;display:inline-block;width:100%;font-weight:400;color:#666!important;font-size:14px!important}
#komentarmenu li a:hover{background:#e1e1e1}
#komentarmenu.shows{visibility:visible;width:200px;height:79px}
.bnm.shows{visibility:visible}
.comment_admin .comment_author_flag{display:inline;background:none;font-size:11px;padding:0;margin-left:4px;color:#555;text-transform:uppercase}
.menu-komentar{background:#22A65A;overflow:hidden;margin-left:-20px;padding:0 20px;height:50px;line-height:50px;margin-right:-20px;border-bottom:2px solid #168947;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 2px 2px 0 rgba(0,0,0,0.12)}.bnm{visibility:hidden}.comment_admin .comment_body:before{border-color:#ddd transparent transparent #ddd;right:-16px;left:initial!important}.comment_admin .comment_body:after{border-color:#fff transparent transparent #fff;left:100%}.comment_admin .comment_body{margin-left:0;margin-right:20px;float:right}.comment_admin .comment_avatar{float:right}.comment_admin .comment_date{float:left}.comment_admin .comment-delete img{float:left;margin:3px 0 0}.comment_admin .namamu{float:right;padding-right:15px}.comment_author_flag .fa{float:right;padding:4px}.comment_admin .comment_intime{float:right;right:5px;left:initial!important}
#comment-editor{width:100% !important;margin-bottom:20px;position:relative;border:none}
.comment-form{max-width:100%!important}
.comment_arrow{display:block;position:relative;margin:0;padding:0}
.comment_emo_list .item{float:left;width:40px;text-align:center;height:40px;margin:10px 10px 0 0}
.comment_emo_list span{display:block;font-weight:bold;font-size:11px;letter-spacing:1px}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important}
.deleted-comment {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCconBgC2_qRk7dXqAXuHOikfamc-op-LQtGzuxtXfrb0_yWKvD9GopkBgoZihfypdIjn_JDUuRZatAbQS4UiyrLZKtzoHFi71uEB7tMj002ZiYqVpc84aJoMcI6rXJzi1hadJTROBGyY/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#ccc;line-height: 22px;padding:8px 15px 8px 45px;margin:5px 0;display:block;border:1px solid #ddd;position:relative;font-size:13px}
.comment-form p{position:relative;background:#fff;color:#333;margin-top:50px;font-size:14px;font-family:'Open Sans',Helvetica,Arial,sans-serif;line-height:1.5em;margin-bottom:20px;padding:15px;border:1px solid #ddd;transition:all .3s ease-out;}
.comment-form p:after, .comment-form p:before{top:100%;left:9%;border:solid transparent;
content:" ";height:0;width:0;position:absolute;pointer-events:none}
.comment-form p:after{border-color:rgba(68,68,68,0);border-top-color:#fff;border-width:12px;margin-left:-12px}
.comment-form p:before{border-color:rgba(221,221,221,0);border-top-color:#ddd;border-width:13px;margin-left:-13px;transition:all .3s ease-out}
img.comment_emo{margin:0;padding:0;vertical-align:middle}
#comments .pencet{color:#fff;margin-right:10px;padding:8px 15px;background-color:#2DCC70;font-size:12px;border-radius:3px;font-weight:400;text-transform:none;text-decoration:none;outline:none;font-family:'Roboto', Arial;cursor:pointer;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}#comments .pencet:hover{text-decoration:none;background-color:#22A65A}.comment_emo_list{display:none;clear:both;width:100%}img.comment_emo{margin:0;padding:0;vertical-align:middle;width:28px;height:28px}#postCommentSubmit {padding:10px!important}#allHolder{border:none!important}.small-button {color:#fff;margin-right:10px;padding:0;background:none;font-size:12px;font-weight:400;text-transform:none;transition:all .3s ease-in}.small-button a{color:#fff;margin-right:10px;padding:4px 15px;background-color:#009a5d;font-size:12px;font-weight:400;text-transform:none;border-radius:4px;text-decoration:none;outline:none;box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #3d4852;text-shadow:0px -1px 0px rgba(0,0,0,0.3);transition:all .3s ease-in}.small-button:hover {background:none;color:#fff;text-decoration:none}.small-button a:hover {background-color:#990000;color:#fff;text-decoration:none}
@media screen and (max-width:684px){
.comment_child .comment_wrap{padding-left:0!important}.comment_body{width:70%!important}.comment_admin .comment_body{width:60%!important}}
@media screen and (max-width:480px){
.comment_body{width:55%!important}.comment_admin .comment_body{width:50%!important}}

Jangan lupa untuk menghapus CSS komentar lama yang terdapat pada blog sobat.

Selanjutnya Cari HTML berikut (gunakan Ctrl + F) : <b:includable id='comments' var='post'> atau seperti kode di bawah:

<b:includable id='comments' var='post'>...</b:includable>


Hapus lalu ganti dengan HTML di bawah ini :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<div class='menu-komentar'>
<h3>
  <i class='fa fa-comments'/> <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> <data:commentLabelPlural/>:
      </b:if>
    </h3>
<a class='ripple' href='javascript:;' id='showkomentarmenu'><i class='fa fa-ellipsis-v'/></a>
</div>
<div id='komentarmenu'>
  <li><a class='waves-effect' href='#comment-form' title='Add Comments'>Add Comments</a></li>
  <li><a class='showmore waves-effect' href='javascript:;' title='More Settings'>More Settings</a></li>
</div>
<b:if cond='data:post.allowComments'>           
         <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'> 
            <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>
 <b:if cond='data:comment.isDeleted'>
  <b:else/>
<div id='comment_box'>
             <div class='comment_header'>
             <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
                    
             </div> 
              <div class='comment_service'>
  <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a class='namamu' expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if> 
               <b:if cond='data:comment.author == data:post.author'>
                 <span class='comment_author_flag'><i class='fa fa-user'/></span>
               </b:if> 
</div>
 </div>
             <div class='comment_body'>
              <span class='comment_arrow'/>
               <p><data:comment.body/></p>
<span class='bnm'>
<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/AVvXsEicU7GDy12zO-2kqSRhqwkquVNbWF5PsojB6V0aLlz7aqlKBMZ4lcYvrSt1jkReWdltvZ0A6N9FRBZjQvZVCjFjjRnb61sOCltysl2v2rAbexyf_zklwENqUqJ1nl5VBO_aOUjQi65TEwY/s1600/delete4.png' title='Hapus Komentar'/>
</a>
<a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>
  </span> 
 <div class='comment_intime'>
<div class='comment_reply'>
  <a class='ripple' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a></div> 
               </div>
<div class='clear'/>                                                                                        
             </div>
<div class='clear'/>
</div>
</b:if>
<b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'>
    <data:comment.body/>
  </span>
</b:if>  
              <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'/>               
           </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'>
                                                           
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
             <span class='no-comment'><data:post.noNewCommentsText/></span>
           </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>
         </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[
       //Global setting
        Config.maxThreadDepth = 5;//How threaded level that you want
        Display_Emo = true;//Display emoticon or not? set "false" to no display
        Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
        Replace_Image_Link = true;//Auto replace an image link  choose "false" to disable.
                                Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
        
        //Config emoticons declare
Emo_List = [
':)'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGuRl76rMbOK57yD1tsGFszoFtFF03Jt8_uDiM8Eq-2fZ-tBi5M0kI790ze_5tRmgTKpcWAPlgy_nLLRhcDA9hr6GphF1_X6k0JKZZbF5fb4Cq5d4LrXyZ7QkfNYV44wwXPuST-Afe5Z-a/h120/1.png',
':('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnA7zhbT3nKhs5RM6d_O8m0wSiNljukvnnqTgvD8USY24MN34ggVigCSLjW334gZf79pCegWUS6nOW-zlGHJTnwCRNaDS8z-MJolx4O5Phj14YRBmYX97XR_b9mEyIGYSfdjzZS0rNt-sE/h120/2.png',
'hihi'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAImP2iTVkrBKeF8XECUaYe3O64Dkj68UG0bwgZ3_5zIU-EWi4m6T-o9xKs6m59lnZWwjUvY3pqVPBezGHxanemwHwayZvPjRfAMD71GzJqoFFOw5VIA_RgiqyMFS0pLYyfrxZC0gSuPW/h120/3.png',
':-)'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpG2ym3bDtxrRsCWQ3DfDCpHzz-gWH2zgm1nlg3CMq3hybcQGDdy8XLM2eMSl02VSTlkwMNs-UEvv5dIcF8A-t1PVQOG3zaf3pMw8OI6XIygX4wbUGARG-UDu3W7vvvArizfJAiCXUy9_/h120/4.png',
':D'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHpAcV04d2lExeq-vT_sNtEMGO_OaA3p1o4R1o2QyFaAkQjMC2XxVUHosMhtrPn2njNeFYtuIwiPmdJqehGmPpfdR-RK1wa4sYwbk29ap0ltWuo2t_1B7ouBTj_FFurUPcREaIA9q-5Ew/h120/5.png',
'=D'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHCYe1OiLH2pitWwJUItQJanGNFgsBe_yuy1VS3PYXg4G1aizL-84KQua8p2viT6siSrfipwjUSoKI6TIsY11uApg2F3GDxfTIZmGFbI2W3itDrnL6xk2kZUwGIeePQzfnFo4GyUJ_T9eP/h120/6.png',
':-d'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3X2zzM5EeQMOb7VR32JuGsZ_S9xBgk9GFanjTxZEFahMIwQR01WGSjtLahGdBCo6MFQa3ejSbcq7JOos12WamYcqFh0Mjo-TlsEgaqd_d9OyzMzf2w_KIr8s9e1IYEXg-mIEkKQeCmpbE/h120/7.png',
';('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiJ9DkwpbEviRb4LU91EBwp3EKhKkDQ0PdyfGA7pJH5vQpe1tJzkp-Hi9QNTS41BeIxgbMvwdjrLhtas025l8eoe-vU7maEmDsbg0PnapLd0WF7Iwp52lAI6dvs9rI4tBm2KQ90OMmLZq/h120/8.png',
';-('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGwlND4bDdTvgCzJT6R9lsXTCo9eyX3GZh_H3UYekQpxh8bbfXsoXTu0T8MeqhaCQ4ECsqbSTb4-RbvDizFpDRYzu8CTLed6wQtyacBdafCJCaaS2pMR-wlpcPwERlzRoXmM-TPy5b6vcD/h120/9.png',
'@-)'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2s9tnSKCW1sY4Gwu3rwkzrcz5nqRS_FFC7lJtVGc8E6rrS-FbnzEAlV8EevMo9-0uuBO4sSLUkS8eFFAzgsrW_pSRxInnSI1jumWe-dFbS7bs6wZKR8yPtCeNNI1wCkAJv-ttkZONC0gs/h120/10.png',
':P'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5GMk3nWdXd5u2asuPkURFdu5Viop4PLxfDWHgcT1vgsb8CYLfj4goEdpTiXinlDEhDYsu2MGZ4pWZAwpcyEMmpwKkeoH1tjqr2BbC54_yPXSz39jOA34LO-yhFVUE54Df_cb3FArEsAlK/h120/11.png',
':o' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihqMXbV_DNIDcAqt-eRHHrcZ6VfWzObprdByQtoKm5Xr0BV_zvOf4sP_fu-wzfq4_lX89rFzZaxxkBBWelvWlW9xlB-HWp9aSx9vdwW-UYUZvfjgdUO9zmU0ur0qA2HCWPG9k9yA8L90h/h120/12.png',     
'-_-'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgayJaNGMAVB3wD2LTYtjQSWhyBNcTREveCgHN_UQmjaozo55YXzDYDIpkhcuHIJ2hly_rNE9ZnB9LJwv3HwzdfiFJ2ZpzCOED5TUoTewrbHjTG4ab2ZTOqOlPi-92N1zaPIr35mieVhBpv/h120/13.png',     
'(o)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMFfoZiW5T44Adl6ci9Bu09otIUnMGSQbnWSknCiGeIponwW-3h6cb0tMN3gKOXqFT4ohig5IEUPgn8LEAd74rQ0miU4MI2otlmra9tbZvSzUikVqILXNHZKivU6nceAmUSkNeuRbYk3O/h120/14.png',     
'[-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijK1JUE7PMYAY-Cb-Zsf7t4cdQ9Yxwpz1WrYOUT1J6rsqfmaZTXinuwsa_b3euvZWxK_jRcuqXimxwVcqeJo3krbWqWCB4jCfCa-Zq0HsJLkcwlrKQ1Ei9vregF9ihVV-JXk3pUSjqs2ti/h120/15.png',     
':-?' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHuHicp1NV0X4D5xD9rD6BgEA76VjdR78_JRPkGdevKmL2DthiOAoVqOyV5D2unIGKMriPk3syhuVV_MwNVrRR61232PpNeJOkJQlp3ULEjtYnCGJLi8UzqK7B256YtwQe567p8rRHwyc/h120/16.png', 
'(p)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvZ8lzNMfMlwbl1BiRN0geX2Op-Qn8nX5XAmOaIJAP_vXhsw3mtBrWn06y_v_H_bVKWz8iz72v8pbjZm8wgQ71hrtZJtl9BjfYk1BsukVV0NLWL7fKItbx_ylzMDjIzm5lhbQX1s5l6On/h120/17.png', 
':-s' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9to39i-pgW7wxKESeCoweeFM6l0XkM0qoqP1B2ca9ZdZM9USxcSqsJl2XJsXkuCDmkHW_y1pgKTWxWA2JyPAQBRzsE1xd2MiAo-yQUgrc4ZddsSQqbvqAck_O_RzraZ_xMPbB2GZiSUt/h120/18.png',
'(m)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOHJvlUKVb2AsN1vFkP0F_8g3C8y5PTped72K3JZEVaPZo_0KcoogiH7SADPEB8VxDXrVDqVo4VG3ALDNrSUlBP_e1_1a59hNbFhgxmniS6JloQ2nLeKqZq10pxHUAYAhZtBYEY4HmH4Nz/h120/19.png',
'8-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUETTeXtAf-ABWuqmqybRat4hJjB1JvPD_GZCHCqBceAGrDp_xJwV5byN9mcSwxbY9Xt6q5HwE_D72V_UmGXwwDSe-Di9J2ilQFhKnVvsA6CIELR2GAafyUSj5JUxDd9HfzodxexSSQaYT/h120/20.png',
':-t' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQwGnjDOhwTGh6t0h7bYcaUnwzGuFW-PYXot8UnOPmB3OZVMEPeicIRTcCdX2RfcJDf9G8aswk0ja7kzqDa8YYe9lYyQ63FFQm5wJ5yy4g-6N85zk5D3_WoAKCRt7eNl1g8VGECwuf9PW/h120/21.png',
':-b' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XLjkWlfFZ2vbIktttMysasa3WGBS9nuzWYc_q9UlIrT7s-S6-YCF1F8LZuKyCyOK5LPeK38WnLP1Xd8MKDM5DFil8Ts1jG3ZlVwtNSGHCe0vavM8WSZA8XmqUQOiJk1bKYOgJmiQAGup/h120/22.png',
'b-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkJwih-gOhffpFVLhmhkQIIXlPdcXDu67aerlOOkGTLJYOEYZ0frmNqe7Lr8S9cItJU2beTM5zgswb5zIYKMiQMR2fTUIReMpWJ_c8ol79PAH3v5RSbjFkgUaE8kGfAfkhiecb0OdQ3mG/h120/23.png',
':-#' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFW6SDrZXOZ2SwM9Xp_9HJ_r1k0KqSH4m4c04bdTd5ZgKtMCrXj20fX592UnhPC_6yFTa_LLOO3o4QFSbIUp4qvvzAuWmyM-zSEPLNcTdN67xO2EH5OeTi1aqAIsiuifFbv_jg1ybXgTZ9/h120/24.png',
'=p~' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPh5QaPoG7z-PeL4er58LYllp-dI_9dLgltEXyKqS11MjYPK3utjLEi08XkmvzKoG3oz9Sb8wRBdtwihh4r7N1SeGhuTGutm4YfouzjfWBFz2GCJ2Zxfh94LgjSB4U0v9K0zdWseR-RKx/h120/25.png',
'$-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5am5oqv3ncQjZIGwypVAvLCP-eQTttgV7wWQBIcY9aTkJTfLpOj5nEVgPYcvd6qRHMy_BKzyi18N1oChfQt9m6hsATlFdxip5rcZKCs2xAP4LrwunNvrYPFghyMAZKQ5BYYP-Wh0AFTf8/h120/26.png',
'(y)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaszx-xFP7hcdebS57Gi04dOxLy_RHP7R_MDPizdzmrtNyGJOu_kmxl8f76hq1gq63l6EwHBiiiGPl6IaUjDXBmFQ0NX7WEV1RUsYyM0kHVMtyGN5MpVbGhal6W-U2R1Wt6f4BT3VQqk_i/h120/27.png',
'(f)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUmrB8RY5Nl4bN5vTGkyEwLZlq_ETj9sUBGdzCOrbEq6vMdzzGMrcv2DORsKsGnKHVSsofO8FLcjCxzAHJ5EA1UXkvl9gJFGhy2Wk0RLkbADE-plug6A8s2rJEEhL_2sCLph73Wk9wh1ZL/h120/28.png',
'x-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdUpMUwiKzDHHAAjZ5WKrz2r1GpLVALXGYYtts6NCSho-xdNu8tiGvhEGHqIlCKO62xOdDIij1tq4NarwedK0f9RFMMfBiQdGCwZtcxE6NvHz41uXBIGVU-GGy23vUmH4T-XV6Xq5as_g/h120/29.png',
'(k)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9pvhkL_Yxh82t9mGJdCX4ue_tFYGKDJ7sC8A7rqr7pkzfDYwjL-F4WpGPSZ0Zlm_rF2fxBLd459whH_LULybX_LVLwO9l-SDTbfAuMlyucPszVqpGiKJNg5_ysBx2uYUJecGmV9tUkxby/h120/30.png',
'(h)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wU0Eg9J_l61_o_Kw73En7sBtdWOZefCpvT8IGqH4YEzUmrfAwT3yqkPc2jBMvzz5L4ucBlNkYQoAQfA9BpvvfMDCuwkVCeOjaCkYxe4cewnwgRxRv4BhlXYPKs80mCMRMgeLvcfVoUpR/h120/31.png',
'(c)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_zmGn1mFAru9wOpU-wxR4rLZc_q2NRyJN1wvD8AU9cmcui4O6m4VINYkr8BNp-ad0LecyMD5YB6guDNTyXIydnSlStW6xTw51UyoVU8CSrc3cwKTGZWjP8wDkBSGEbKQwYWZ9JEs3NgWK/h120/32.png',
'cheer' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZj3Pd9KZesgn5hvtApOWFGpuEvAm2UqQHZUiH4GxZgPBHVlyCX0hhshMbvmtWszBTjdgJWQ0SapV1VXFhcwZYUsiINPs47len-LHbvb1Ml77r01HOq_5DZTb2rJmEMzD1dNBgkAQvY3cT/h120/33.png',
'(li)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41ZDhx1z8kriZ7k9zcSadz82wZcOuPWoNAujjVK13A1rX4DIQ8oEJIpi2bT7ubBjHDk3Q0dajlCIQcCyqy90T8nzA1jEMnXEMyYMeo4ITtmkTTqlC4TpddY1D91sVZlRZxnOXIYMPBtM0/h120/34.png',
'(pl)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0OuZK2zzkUBwEOY_72JuA-hiH7iCtWdO01tzwEY1p_R1v8YQF5NLqiH1FsaZ4k9XpIFQMlIV__HywhdwGEJb7fHUNvnTXSAjsOnmG1IgAA-QOG3Zo3tywJlf8-EyJB9p2kgGvvt_HAdTN/h120/35.png',
];
        
                               
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
      
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
       //]]>
         </script>
</b:includable>

Nah selanjutnya cara pasang Emoticon dan Pesan Formulir komentar di blog:

Cari HTML berikut (cara ini sama seperti cara pada langkah di atas) : <b:includable id='threaded-comment-form' var='post'>...</b:includable>

Hapus lalu ganti dengan kode berikut :

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form' id='comment-form'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/>
        <br/><br/><a class='tutup pencet' style='display:none'>Tutup Konverter!</a><a class='show_emo pencet waves-effect waves-light'><i class='fa fa-smile-o'/> Emoticon</a></p>
<script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.show_emo&#39;).click(function() {
        $(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;);
    });
});
</script>
<div class='comment_emo_list'/>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='display: none'/>
    <b:else/>    
      <p><data:blogCommentMessage/>
        <br/><br/><a class='tutup pencet' style='display:none'>Tutup Konverter!</a><a class='show_emo pencet waves-effect waves-light'><i class='fa fa-smile-o'/> Emoticon</a></p>
<script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.show_emo&#39;).click(function() {
        $(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;);
    });
});
</script>
<div class='comment_emo_list'/>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/> 
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
 <!--<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>-->
</b:includable>

Langkah terakhir masukan Javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
$(document).ready(function(){$(&quot;.showmore&quot;).click(function(){$(&quot;.bnm&quot;).toggleClass(&quot;shows&quot;);});});
$(document).ready(function(){$(&quot;#showkomentarmenu&quot;).click(function(){$(&quot;#komentarmenu&quot;).toggleClass(&quot;shows&quot;);});});
</script>

Simpan Template.


Jika langkah-langkah tersebut tidak berhasil (berantakan) silahkan ikuti tutorial langkah pertama pada link berikut.

Semoga Tutorial "Cara Membuat Material Design Threaded Comment di Blog" ini bermanfaat.

Sekian, Terimakasih.
https://www.idblanter.com/2016/06/membuat-material-design-threaded-comment-di-blog.html
27-5-2019 1 Adventure

© Copyright 2019 Anyme Template Duo

1 komentar

  1. Renz - Game
    Renz - Game 18 Februari 2018 pukul 01.04

    test

    Reply
Posting Komentar
Adam's profile cover
Author

Irfan Follow

Irfan as riedayme which is focus for learning how to created apps.

Sering Dilihat

Koala Animals

Koala Animals