Cara Membuat Threaded Comments Valid HTML5 di Blogger - Halo sahabat Blogger, kali ini aku akan membagikan suatu artikel yang Insyaallah bermanfaat untuk sobat, ialah cara menciptakan threaded Comment valid HTML5 di blog, tutorial ini aku sanggup dari +Rio Us .
Sebelum mempraktekannya di blog sobat, alangkah baiknya jikalau kita melihat fitur pada Threaded Comments ini, fitur lihat dibawah ini.
Fitur :
- Emoticon
- Optimasi Avatar
- jQuery Smoot Scrolling
- Valid HTML5
Memasang Threaded Comments
Cari aba-aba 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 Fajriandaviar.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 aba-aba di bawah ini :
<b:includable id='comments' var='post'> bla...bla... </b:includable>Lalu ganti aba-aba
bla...bla... tadi dengan aba-aba 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>   <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>   <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'> <div class='comment_inner comment_admin'> <b:else/> <div class='comment_inner'> </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='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a> <a class='comment-delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>Hapus</a> <div class='clear'/> </b:if> </div> <div class='clear'/> </div> <div class='clear'/> <div class='comment_child'/> <div class='comment_reply_form' expr:id='"r_f_"+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>   <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>   <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 = {'maxThreadDepth':'0'}; </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/AVvXsEizVi_RO9FykkDNzKzJ9Qlp9yIr2-bx8pxfm89JSfNoxsGrjJTHU5tRuzWrMlkNDIDGLKFvDBnZMFDAIr5lIr1jXD38DMXvmPvZWGwAMbQgVgx_CuCKsjZAqOsckD8WD_5_wAohIrGCUfU/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", ":\"); 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", ":'("); 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", "\o/"); }); //]]> </script> <script type='text/javascript'> var jump=function(e) { //alert('here'); if (e){ //e.preventDefault(); var sasaran = jQuery(this).attr("href").replace('/', ''); }else{ var sasaran = location.hash; } jQuery('html,body').animate( { scrollTop: (jQuery(target).offset().top) - 150 },3000,function() { //location.hash = target; }); } jQuery(document).ready(function($) { $(document).on('click', 'a[href*=#]', jump); if (location.hash){ setTimeout(function(){ $('html, body').scrollTop(0).show(); jump(); }, 0); }else{ $('html, body').show(); } }); </script>Validasi HTML5
Cari semua aba-aba di bawah dan hapus satu persatu.
allowtransparency='true'frameborder='0'src='' style='display: none'scrolling='no'width='100%'
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>Ganti dengan ini :
<b:if cond='data:blog.pageType == "static_page"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src'/> </b:if> Selesai sudah tutorial aku hari ini, jikalau ada pembahasan atau ada kekurang atau kesalahan sanggup sahabat berkomentar di kolom yang telah disediakan dibawah ini, terima kasih telah mengunjungi blog saya, untuk segala kekurangan dan kesalahan aku ucapkaan maaf, Wassalam.
Resource : https://mamankdzgn.blogspot.com//search?q=threaded-comments-blogger-valid-5.html
