Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Rabu, 28 September 2016

Cara Membuat Threaded Comments Valid HTML5 di Blogger

Diposting oleh
di
Tutorial Blogger
0 Komentar
Cara Membuat Threaded Comments Valid HTML5 di Blogger - Halo sobat Blogger, kali ini saya akan membagikan suatu artikel yang Insyaallah bermanfaat untuk sobat, yaitu cara membuat threaded Comment valid HTML5 di blog, tutorial ini saya dapat dari +Rio Us .

Threaded Comments

Sebelum mempraktekannya di blog sobat, alangkah baiknya jika kita melihat fitur pada Threaded Comments ini, fitur lihat dibawah ini.


Fitur :

  • Emoticon
  • Optimasi Avatar
  • jQuery Smoot Scrolling
  • Valid HTML5
Untuk demo, sudah ada Screen shot gambar diatas, atau sobat bisa lihat disini


Memasang Threaded Comments


Cari kode di bawah ini :


<b:include data='post' name='threaded_comments'/>

.
Lalu ganti script di atas dengan script dibawah ini :


<b:include data='post' name='comments'/>


Simpan CSS berikut, diatas ]]><b:skin>



/* Threaded Comments By all-trick-blogs.blogspot.com  */
.comment-form p {background-color: #393939;font-size: 12px;line-height: 16px;color: whitesmoke;margin-top: 45px;border-left: 6px solid #4D90F0;padding: 8px 10px;position: relative;}
#comments {margin-bottom:5px;padding:5px;background: #E4E4E4;}
#comments h4 {position: relative;font-size: 16px;margin: -5px -5px 5px -5px;padding: 7px 10px 7px;text-decoration: none;text-align: right;background: #F8F8F8;border: 1px solid #E2E2E2;}.comment_avatar {border:2px solid #fff; height:45px; width:45px; background:transparent url(http://img254.imageshack.us/img254/1986/anonymousavatar.gif) no-repeat center center; float:left; margin-right:10px; overflow:hidden }
.comment_avatar * { max-width:1000% !important; display:block; max-height:1000% !important; width:45px !important; height:45px !important; margin-right:10px }
.comment_name { color:#000; font-size:105%; font-weight:bold; padding:0 0 3px; text-decoration:none; margin:0; text-transform:uppercase; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.comment_name a { color:#000; text-overflow:ellipsis; overflow:hidden }
.comment_name a:hover { color:green }
.comment_body p { font-size:95% }
.comment_header { background-color:#F8F8F8; border:1px solid #ccc; padding:5px; }
.comment_body { background-color:#F8F8F8; border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc; margin-top:0; margin-bottom:17px; padding: 1px 10px 0px 10px; position:relative }
.comment_body p img { background-color:#EEE; max-width:100%; width:auto; margin:0 auto; margin-top:5px }
.comment_date { color:#000; cursor:pointer; font-weight:normal }
.comment_date:hover { color:green }
.comment_child .comment_wrap { padding-left:20px }
.comment-delete {border-radius: 2px;z-index:9;border:1px solid #ccc;font-size: 12px; line-height: 1.5em; max-width: 100%; background: #f1f1f1; font-weight: 400; padding: 1px 12px; color: #000 !important;float:right;position:absolute;right:5px;font-family: Arial;}
.comment-delete a:hover{background:#00A8FF;color:#fff;}
.comment_reply {border-radius: 2px;z-index:9;border:1px solid #ccc;font-size: 12px; line-height: 1.5em; max-width: 100%; background: #f1f1f1; font-weight: 400; padding: 1px 12px; color: #000 !important;float:right;position:absolute;right:70px;font-family: Arial;}
.comment_reply a:hover{background:#00A8FF;color:#fff;}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.deleted-comment { color:#ad3000 }
.paging-control-container { background-color:#0070b0; color:#f6f6f6; display:block; margin:5px 0; padding:5px 10px }
.paging-control-container a { color:white }
.paging-control-container a:hover { color:gold }
.comment-form{max-width:100%}
#comment-editor {width: 69.3%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}
iframe{border:none;overflow:hidden}
/*Target Komentar*/
div:target .comment_header {border-top:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_header {border-right:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_header {border-left:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_reply {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_reply{border:1px solid #ccc;}
div:target .comment-delete {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment-delete{border:1px solid #ccc;}
div:target .comment_body {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_body{border:1px solid #ccc;}


Lalu cari kode di bawah ini :


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


Lalu ganti kode bla...bla... tadi dengan kode dibawah ini :


<div class='comments' id='comments'>
        <b:if cond='data:post.allowComments'>
        
         <b:if cond='data:post.numComments != 0'>
          <h4>
           <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
           <b:else/>
            <data:post.numComments/> <data:commentLabelPlural/>
           </b:if>
          </h4>
         </b:if>
                
         <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 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>
             <div class='comment_header'>
             <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
              </div> 
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='Permalink'><span class='comment_date'><data:comment.timestamp/></span></a>              
              </div>
              <div class='clear'/>
             </div> 
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
<data:comment.body/>
              <b:else/>
               <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a>  
<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'>Hapus</a>                                                          <div class='clear'/>                                      
              </b:if>                                   
             </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'/>              
           </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/>
            <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>
         </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 = 12;//How many threaded level that you want
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}('6 5=\'.v\';6 w=$(\'#o-x\').9(\'y\');7 12(b){6 I=\' \\n\\r\\t\\f\\13\\14\\15\\16\\17\\18\\19\\1a\\1b\\1c\\1d\\1e\\1f\\1g\\1h\\1i\\1j\\1k\\1l\\1m\\1n\\1o\\1p\';J(6 i=0;i<b.z;i++){8(I.g(b.1q(i))!=-1){b=b.j(0,i);1r}}k b}$(\'.K .1s p\').3(7(i,h){A=h.1t();l=A.g(\'@<a B="#c\');8(l!=-1){C=A.g(\'</a>\',l);8(C!=-1){h=h.j(0,l)+h.j(C+4)}}k h});7 L(2){r=2.g(\'c\');8(r!=-1)2=2.j(r+1);k 2}7 M(2){2=\'&1u=\'+2+\'#%N\';O=w.1v(/#%N/,2);k O}7 P(){3=$(5).3();$(5).3(\'\');5=\'.v\';$(5).3(3);$(\'#o-x\').9(\'y\',w)}7 Q(e){2=$(e).9(\'D\');2=L(2);3=$(5).3();8(5==\'.v\'){R=\'<a B="#S" 1w="P()">\'+1x.1y+\'</a><a 1z="S"/>\';$(5).3(R)}1A{$(5).3(\'\')}5=\'#1B\'+2;$(5).3(3);$(\'#o-x\').9(\'y\',M(2))}E=1C.1D.B;F=\'#o-1E\';G=E.g(F);8(G!=-1){T=E.j(G+F.z);Q(\'#1F\'+T)}J(6 i=0;i<q.z;i++){8(\'U\'1G q[i]){6 2=q[i].U;6 H=1H($(\'#c\'+2+\':s\').9(\'V\'));$(\'#c\'+2+\' .1I:s\').3(7(l,W){6 m=q[i].D;8(H>=1J.1K){$(\'#c\'+m+\':s .1L\').X()}6 u=$(\'#c\'+m+\':s\').3();u=\'<Y 1M="K" D="c\'+m+\'" V="\'+(H+1)+\'">\'+u+\'</Y>\';$(\'#c\'+m).X();k(W+u)})}}$(\'.1N a\').Z(7(){d=$(10).9(\'d\');$(\'#\'+d).1O(\'11\')});$(\'.1P a\').Z(7(){d=$(10).9(\'d\');$(\'#\'+d).1Q(\'11\')});',62,115,'||par_id|html||Cur_Cform_Hdr|var|function|if|attr||str||data|||indexOf|||substring|return|index|child_id||comment||Items||first||child_html|comment_form|Cur_Cform_Url|editor|src|length|temp|href|index_tail|id|cur_url|search_formid|search_index|par_level|whitespace|for|comment_wrap|Valid_Par_Id|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|reset_html|origin_cform|ret_id|parentId|level|oldhtml|remove|div|click|this|comment_collapsed|trim|x5b|x5d|x7c|x7d|x3c|x3e|x0b|xa0|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u200b|u2028|u2029|u3000|charAt|break|comment_body|toLowerCase|parentID|replace|onclick|Msgs|addComment|name|else|r_f_c|window|location|form_|rc|in|parseInt|comment_child|Config|maxThreadDepth|comment_reply|class|collapse|addClass|expand|removeClass'.split('|'),0,{})) 
//small avatar
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/"));
});   
//Emoticon
$(function () {
    var emoRange = "#comments p, div.emoWrap, div.post-body";
dfs
    function emo(emo, imgRep, emoKey) {
        $(emoRange).each(function () {
            $(this).html($(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"))
        })
    }
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHm5P1XVHd2MjouXTsO2_aXz7nF9kUHbKxWlJ7VvZBQJQriCJU5JE66Oq72xgMA3-sUZyxMoi6cUWEdASxARNclSntsco4kJgLTHQgfua4gIKcBP9zFHHzf_wgsYGX8S20QoWQ8MUmVY/s1600/smile1.gif", ":)");
    emo(/\s;\)+/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/wink.gif", ";)");
    emo(/\s:\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/sad.gif", ":(");
    emo(/\s=\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/sadanimated.gif", "=(");
    emo(/\s@@,/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/rolleyes.gif", "@@,");
    emo(/\s:yaya:/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/yaya.gif", ":yaya:");
    emo(/\s:s/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/sullen.gif", ":s");
    emo(/\s:\\/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/memble.gif", ":&#92;");
    emo(/\s:D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/haha.gif", ":D");
    emo(/\s=D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/hihi.gif", "=D");
    emo(/\s\^:D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/abovemehaha.gif", "^:D");
    emo(/\s\^(\_|)\^/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/senyum-tulus.gif", "^_^");
    emo(/\s:'\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/cry.gif", ":&#39;(");
    emo(/\s:waaa:/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/wawa.gif", ":waaa:");
    emo(/\sT_T/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/tears.gif", "T_T");
    emo(/\sB\)/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/cool.gif", "B)");
    emo(/\s:Q/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/smoking.gif", ":Q");
    emo(/\s\*\*p/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/crazy.gif", "**p");
    emo(/\s7:\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/conf.gif", "7:(");
    emo(/\s:p/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/wee.gif", ":p");
    emo(/\s:Oz+/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/sleep.gif", ":Ozz");
    emo(/\s7:O/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/angry.gif", "7:O");
    emo(/\s\\o\//ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/applause.gif", "&#92;o/");
});
//]]>
</script>
<script type='text/javascript'>  
var jump=function(e)
{
    //alert(&#39;here&#39;);
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr(&quot;href&quot;).replace(&#39;/&#39;, &#39;&#39;);
   }else{
       var target = location.hash;
   }

   jQuery(&#39;html,body&#39;).animate(
   {
       scrollTop: (jQuery(target).offset().top) - 150
   },3000,function()
   {
       //location.hash = target;
   });

}

jQuery(document).ready(function($)
{
    $(document).on(&#39;click&#39;, &#39;a[href*=#]&#39;, jump);

    if (location.hash){
        setTimeout(function(){
            $(&#39;html, body&#39;).scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $(&#39;html, body&#39;).show();
    }
});
</script>


Validasi HTML5 


Cari semua kode di bawah dan hapus satu persatu.
  • allowtransparency='true'
  • frameborder='0'
  • src='' style='display: none'
  • scrolling='no'
  • width='100%'
Kemudian cari kode dibawah ini :


<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>


Ganti dengan ini :


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



Selesai sudah tutorial saya hari ini, jika ada pembahasan atau ada kekurang atau kesalahan bisa sobat berkomentar di kolom yang telah disediakan dibawah ini, terima kasih telah mengunjungi blog saya, untuk segala kekurangan dan kesalahan saya ucapkaan maaf, Wassalam.


Resource : http://www.daengrio.com/2016/10/threaded-comments-blogger-valid-html-5.html




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

Konversi Kode di Sini! OOT (Out of Topic)
TOP