Cara Membuat Threaded Comments Valid HTML5 di Blogger - Halo sahabat Blogger, kali ini aku akan membagikan suatu artikel yang Insyaallah bermanfaat untuk sobat, yakni cara menciptakan threaded Comment valid HTML5 di blog, tutorial ini aku sanggup dari +Rio Us .
Sebelum mempraktekannya di blog sobat, alangkah baiknya kalau kita melihat fitur pada Threaded Comments ini, fitur lihat dibawah ini.
Fitur :
- Emoticon
- Optimasi Avatar
- jQuery Smoot Scrolling
- Valid HTML5
Memasang Threaded Comments
Cari isyarat 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 isyarat di bawah ini :
<b:includable id='comments' var='post'> bla...bla... </b:includable>Lalu ganti isyarat
bla...bla... tadi dengan isyarat 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/AVvXsEiTNd0HJXLPIk8g75cP3P48ziOBWLgROX_l4lZLI58RfMWl5CdCxzmkSn1NBxyp1FrAL08UrScj85d296tUj3TDAPstms_-LbT-9tstKhsprwhqEJMKerbp65YA5ELPghYqLUmNt1VTIZ4/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 isyarat 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, kalau 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 : -5.html
0 Response to "Cara Membuat Threaded Comments Valid HTML5 di Blogger"
Posting Komentar