Blogger Threaded Comments Hack Valid HTML5 - Blog Santai - Saya ucapkan banyak terima kasih atas kunjungannya. Kali ini saya mau berbagi informasi seputar Blogger Threaded Comments Hack Valid HTML5 dan mengenai sumber informasi bisa dilihat di akhir postingan ini.
Fitur Komentar
- Emoticon
- Optimasi Avatar
- jQuery Smoot Scrolling
- Valid HTML5
DEMO
Langkah Pemasangan
Cari kode ini :<b:include data='post' name='threaded_comments'/><b:include data='post' name='comments'/>]]></b:skin>/* Comment */ #comments {margin-bottom:5px;padding:5px;background:#fff;border:1px solid #ccc} #comments h4 {position:relative;font-size:16px;margin:-5px -5px 5px -5px;padding:3px 10px 7px;text-decoration:none;text-align:center;background:#e6e9f1;border-bottom:1px solid #c5d0e3} .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:#E6E9F1; border:1px solid #ccc; padding:5px; } .comment_body { background-color:#fff; border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc; margin-top:0; margin-bottom:17px; padding: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:103.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 #21AFA4;} div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;} div:target .comment_header {border-right:2px solid #21AFA4;} div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;} div:target .comment_header {border-left:2px solid #21AFA4;} div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;} div:target .comment_reply {border:2px solid #21AFA4;} div:target .comment_child .comment_wrap .comment_reply{border:1px solid #ccc;} div:target .comment-delete {border:2px solid #21AFA4;} div:target .comment_child .comment_wrap .comment-delete{border:1px solid #ccc;} div:target .comment_body {border:2px solid #21AFA4;} div:target .comment_child .comment_wrap .comment_body{border:1px solid #ccc;} <b:includable id='comments' var='post'> bla...bla... </b:includable><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"; 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/AVvXsEiWL7UYGvJmlP9SPhyphenhyphenvPTAe6q24Q48MYEavJn5W7kgxxhGQLAi3FLFmHe5LkrtzGwsq6bARJ_00mRY9Jr4TtmxfCe8QTepZlNz_u9PczbzbC7wY1KK8n-Hq2lJcJhrCsLEcuNrQ3DRNxXQ/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 target = jQuery(this).attr("href").replace('/', ''); }else{ var target = 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 kode seperti ini dan hapus kode tersebut.allowtransparency='true', frameborder='0', src='' style='display: none', scrolling='no' dan width='100%'Kemudian cari kode dibawah ini
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>Semoga bermanfaat..
http://feeds.feedburner.com/Saeful13
Sumber: Klik Disini Spesial thanks to: Informasi Terbaru | Informasi Online | Kumpulan Cara Mengatasi | Aku Suka Menulis | Cara Agar Cepat HamilPowered by Blog Santai
Kumpulan InformasiSilahkan Like Halaman Fans Page Kami. Agar Kami Bisa Tetap Terhubung Dengan Anda Lewat Facebook Dan Dapatkan Informasi Unik dan Menarik Lainnya.
{ 0 komentar... read them below or add one }
Posting Komentar