Membuat Komentar Blogger Seperti Wordpress V2

Pada postingan terdahulu, saya membuat tutorial tentang <a href="/2012/05/cara-membuat-komentar-blog-seperti.html" target="_blank">Cara membuat komentar blog bertingkat seperti WordPress</a>. Akan tetapi banyak komentar yang menyatakan bagaimana membuat komentar tersebut tanpa "pop up". Beberapa kelebihan yang terdapat pada V.2 ini antara lain Tanpa Pop up, Installasi lebih mudah.<br /><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="383" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYo0TZ9femOU3e0VC7I_8zOlBoonCYh8AG9e6DepPNBzgg50SfwnYQsEhU9w6ZaBTQquGRp22WkfJGtdKUPOpyDlkUWsM2ttzUZ9uNFIqD7-r7BiyEEWzG_xpbjpaqfwvSnGufc6AnzFCZ/s320/Komentar+V2.jpg" width="500" /></div><br />Installasi Komentar Blogger Seperti Wordpress V2 :<br /><br />Sebelum melakukan installasi astikan Backup dulu template, untuk menghindari error pada installasi.<br /><br />1. Buka editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:<br /><br />]]></b:skin><br /><br />2. Salin kode CSS ini dan letakkan di atasnya:<br /><br /><blockquote class="tr_bq">.clearfix:after {<br />content:"";<br />display:table;<br />clear:both;<br />}<br /><br />.clearfix {*zoom:1}<br /><br />.pull-left {<br />display:block;<br />float:left;<br />}<br /><br />.pull-right {<br />display:block;<br />float:right;<br />}<br /><br />/* Start Custom Comments' CSS */<br />.custom-comments {<br />margin:3em 0 0;<br />font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;<br />letter-spacing:0;<br />}<br /><br />/* links */<br />.custom-comments a,<br />.custom-comments a:visited {<br />color:#2143B4;<br />text-decoration:none;<br />}<br /><br />.custom-comments a:hover {text-decoration:underline}<br /><br />/* comment item */<br />.custom-comments .comment-item {<br />margin:0 0 1em;<br />padding:0 0 .7em 0;<br />border-bottom:1px solid #eee;<br />position:relative;<br />}<br /><br />/* comment header */<br />.custom-comments .comment-header {<br />overflow:hidden;<br />margin:0 0 1em 0;<br />}<br /><br />/* avatar area */<br />.custom-comments .avatar-box {<br />width:65px;<br />margin:0 0 20px 0;<br />}<br /><br />/* avatar */<br />.custom-comments .avatar-image-container,<br />.custom-comments .avatar-image-container a,<br />.custom-comments .avatar-image-container img {<br />border:none;<br />padding:0 0;<br />margin:0 0;<br />float:none;<br />display:block;<br />width:50px;<br />height:50px;<br />max-width:none;<br />max-height:none;<br />}<br /><br />.custom-comments .avatar-image-container img {<br />border:1px solid #ddd;<br />padding:4px;<br />background-color:#fafafa;<br />}<br /><br />/* comment body */<br />.custom-comments .comment-body {margin:0 0 2em 75px}<br /><br />/* comment reply */<br />.custom-comments .comment-reply {<br />margin:1em 0 0 75px;<br />padding:1em 1.2em;<br />background-color:#FFF7D1;<br />position:relative;<br />font-size:11px;<br />}<br /><br />.custom-comments .comment-reply:after {<br />content:"";<br />display:block;<br />width:0;<br />height:0;<br />position:absolute;<br />top:0;<br />left:0;<br />border:10px solid transparent;<br />border-color:white #F5F2D8 #F5F2D8 white;<br />}<br /><br />.custom-comments .comment-reply .user {margin-left:15px}<br />.custom-comments .comment-reply a {color:#767643}<br /><br />.custom-comments .comment-reply .avatar-image-container img {<br />border-color:#EAE5C4;<br />background-color:#F5F0D3;<br />}<br /><br />/* comment item footer */<br />.custom-comments .comment-bottom-line {<br />display:block;<br />clear:both;<br />margin:1em 0 .5em 75px;<br />text-align:right;<br />}<br /><br />/* comment buttons */<br />.custom-comments .comment-bottom-line a,<br />.custom-comments .cancel-reply-btn {<br />border:1px solid #ddd;<br />outline:none;<br />padding:2px .7em 3px .5em;<br />margin:0 0 0 4px;<br />-webkit-border-radius:10px;<br />-moz-border-radius:10px;<br />border-radius:10px;<br />text-decoration:none;<br />}<br /><br />.custom-comments .comment-reply .comment-bottom-line a,<br />.custom-comments .cancel-reply-btn {border-color:#EAE5C4}<br />.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}<br />.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}<br />.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}<br /><br />.custom-comments .comment-bottom-line a:hover,<br />.custom-comments .cancel-reply-btn:hover {<br />border-color:#bbb;<br />text-decoration:none;<br />}<br /><br />.custom-comments .comment-bottom-line a:active,<br />.custom-comments .comment-bottom-line a:focus,<br />.custom-comments .cancel-reply-btn:active,<br />.custom-comments .cancel-reply-btn:focus {border-color:#999}<br />.custom-comments .cancel-reply-btn {padding:3px 1em 4px}<br /><br />/* comment form */<br />.custom-comments .custom-comment-form {<br />margin:1em 0 2em;<br />clear:both;<br />}<br /><br />.custom-comments .comment-item .custom-comment-form {<br />border:1px solid #eee;<br />padding:1em .2em 2em 1.5em;<br />margin-left:75px;<br />}<br /><br />.custom-comments #comment-editor {<br />max-width:none;<br />width:100%;<br />height:250px;<br />border:none;<br />background:none;<br />}<br /><br />.custom-comments .custom-comment-form .cancel-reply-btn {display:none}<br />.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}<br />.custom-comments .comment-item .custom-comment-form h4 {display:none}<br /><br />/* loading animation */<br />.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}<br /><br />/* deleted comment */<br />.custom-comments .deleted-comment {<br />font-style:italic;<br />color:#aaa;<br />}<br /><br />/* comments paging control */<br />.custom-comments .paging-control-container {<br />font-size:100%;<br />display:block;<br />float:none;<br />width:auto;<br />clear:both;<br />border:1px solid #eee;<br />padding:.5em 1em;<br />overflow:hidden;<br />}<br /><br />/* Author Comments Style: Do whatever you want with this! */<br />.author-comment > .comment-item {}<br />.author-comment > .comment-reply {}</blockquote><br />3. Kemudian cari kode ini:<br /><br /><blockquote class="tr_bq"><b:includable id='comments' var='post'><br />---------<br />---------<br /></b:includable></blockquote><br />4. Hapus kode tersebut dan ganti dengan kode berikut ini :<br /><br /><blockquote class="tr_bq"><b:includable id='custom-comments' var='post'><br /><section class='custom-comments' id='custom-comments'><br /><b:if cond='data:post.allowComments'><br /><br /><h4><br /><b:if cond='data:post.numComments == 1'><br /><span>1</span>&amp;nbsp;<data:commentLabel/><br /><b:else/><br /><span><data:post.numComments/></span>&amp;nbsp;<data:commentLabelPlural/><br /></b:if><br /></h4><br /><br /><b:if cond='data:post.commentPagingRequired'><br /><nav class='paging-control-container'><br /><a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a><br /><a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;<br /><data:post.commentRangeText/>&#160;<br /><a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a><br /><a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a><br /></nav><br /></b:if><br /><br /><div id='comments-area'><br /><b:loop values='data:post.comments' var='comment'><br /><b:if cond='data:comment.inReplyTo'><b:else/><br /><b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if><br /><div class='comment-item clearfix' expr:id='data:comment.anchorName'><br /><div class='comment-header clearfix'><br /><strong class='user pull-left'><br /><b:if cond='data:comment.authorUrl'><br /><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /><b:else/><br /><data:comment.author/><br /></b:if> <data:commentPostedByMsg/><br /></strong><br /><a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a><br /></div> <!-- comment-header --><br /><div class='avatar-box pull-left'><br /><b:if cond='data:comment.favicon'><br /><img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br /></b:if><br /><b:if cond='data:blog.enabledCommentProfileImages'><br /><data:comment.authorAvatarImage/><br /></b:if><br /></div> <!-- avatar-box --><br /><div class='comment-body'><br /><b:if cond='data:comment.isDeleted'><br /><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><data:comment.body/><br /></b:if><br /></div> <!-- comment-body --><br /><b:loop values='data:post.comments' var='replies'><br /><b:if cond='data:replies.inReplyTo == data:comment.id'><br /><b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if><br /><div class='comment-reply clearfix' expr:id='data:replies.anchorName'><br /><div class='comment-header clearfix'><br /><strong class='user pull-left'><br /><b:if cond='data:replies.authorUrl'><br /><a expr:href='data:replies.authorUrl' rel='nofollow'><data:replies.author/></a><br /><b:else/><br /><data:replies.author/><br /></b:if> <data:commentPostedByMsg/><br /></strong><br /><a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a><br /></div> <!-- reply comment-header --><br /><div class='avatar-box pull-left'><br /><b:if cond='data:replies.favicon'><br /><img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br /></b:if><br /><b:if cond='data:blog.enabledCommentProfileImages'><br /><data:replies.authorAvatarImage/><br /></b:if><br /></div> <!-- reply avatar-box --><br /><div class='comment-body'><br /><b:if cond='data:replies.isDeleted'><br /><span class='deleted-comment'><data:replies.body/></span><br /><b:else/><br /><data:replies.body/><br /></b:if><br /></div> <!-- reply comment-body --><br /><span class='comment-bottom-line'><br />&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:replies.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;<br /></span><br /></div> <!-- reply comment-reply --><br /><b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if><br /></b:if> <!-- replies.inReplyTo --><br /></b:loop><br /><span class='comment-bottom-line'><br /><b:if cond='data:comment.isDeleted != &quot;true&quot;'>&lt;a class=&#39;reply-btn&#39; data-icon=&#39;&amp;dArr;&#39; href=&#39;javascript:replyTo(&quot;<data:comment.id/>&quot;);&#39;&gt;Reply&lt;/a&gt;</b:if>&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:comment.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;<br /></span><br /><div expr:id='&quot;form-container-&quot; + data:comment.id'/><br /></div> <!-- comment-item --><br /><b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if><br /></b:if> <!-- comment.inReplyTo --><br /></b:loop><br /></div><br /><br /><b:if cond='data:post.commentPagingRequired'><br /><nav class='paging-control-container'><br /><a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a><br /><a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;<br /><data:post.commentRangeText/>&#160;<br /><a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a><br /><a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a><br /></nav><br /></b:if><br /><br /><div class='custom-comment-form' id='custom-comment-form'><br /><h4><data:postCommentMsg/></h4><br /><p><data:blogCommentMessage/></p><br /><data:blogTeamBlogMessage/><br /><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /><div class='custom-comment-editor-wrapper'><br /><iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/><br /></div><br /><data:post.friendConnectJs/><br /><data:post.cmtfpIframe/><br /><script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script><br /><a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Reply</a><br /></div><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />var originalSource = document.getElementById('comment-editor').src.split('#');<br />function replyTo(id) {<br />var frame = document.getElementById('comment-editor'),<br />form = document.getElementById('custom-comment-form'),<br />container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),<br />part = originalSource;<br />frame.style.height = "50px";<br />frame.style.visibility = "hidden";<br />frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];<br />container.insertBefore(form, null);<br />frame.onload = function() {<br />this.style.height = "250px";<br />this.style.visibility = "visible";<br />};<br />}<br />//]]><br /></script><br /><br /></b:if><br /></section><br /></b:includable></blockquote><br />5. Cari semua kode yang tampak seperti ini :<br /><br /><b:include data='post' name='threaded_comments'/><br /><br />Atau :<br /><br /><b:include data='post' name='comments'/><br /><br />6. ganti dengan kode ini :<br /><br /><blockquote class="tr_bq"><b:include data='post' name='custom-comments'/></blockquote><br />7. Terakhir Simpan Template dan lihat hasilnya.<br /><br />

Membuat Komentar Blogger Seperti Wordpress V2

Pada postingan terdahulu, saya membuat tutorial tentang Cara membuat komentar blog bertingkat seperti WordPress . Akan tetapi banyak komenta...

Baca selengkapnya »

Daftar Member Aktif

Berikut ini Kami tampilkan member-member yang aktif berkomentar di blog SAGITA COM. Apabila Anda rajin dan aktif berkomentar disini Anda akan tampil paling teratas. Halaman ini Kami buat khusus buat Anda dan terima kasih banyak atas kontribusi Anda pada blog SAGITA COM ini.<br /><a name="more"></a><br /><link href='https://sagitasoft.googlecode.com/svn/trunk/css/Member-aktif.css' media='screen' rel='stylesheet' type='text/css'></link><br /><script type="text/javascript">var homepage='http://www.tutorial-sagita.tk',maxTopCommenters=40,minComments=1,numDays=0,excludeMe=true,excludeUsers=["Anonymous","Iril Sagita","Lestiani Cuci"],maxUserNameLength=20,txtTopLine='[image] [user]',txtNoTopCommenters='No top commentators at this time.',txtAnonymous='',sizeAvatar=100,cropAvatar=true,urlNoAvatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_13H4Svke8k6Rl0YHv2BsbK9vL0snfHU1MbMwuOJmqwwALYV7FIYWRaTbpVyfyGmJ8LZH6h1T0WhCecyUM0wZxz8y7rf0c4tKqw5BMbPf3_opfYzz2jVwqkwg2cx3bE9q0nyjd-zWjvg/'+sizeAvatar+'/avatar_blue_m_96.png',urlAnoAvatar='http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s='+sizeAvatar,urlMyProfile='',urlMyAvatar='';if(!Array.indexOf){Array.prototype.indexOf=function(obj){for(var i=0;i<this.length;i++)if(this[i]==obj)return i;return-1}}function replaceTopCmtVars(text,item,position){if(!item||!item.author)return text;var author=item.author;var authorUri="";if(author.uri&&author.uri.$t!="")authorUri=author.uri.$t;var avaimg=urlAnoAvatar;var bloggerprofile="http://www.blogger.com/profile/";if(author.gd$image&&author.gd$image.src&&authorUri.substr(0,bloggerprofile.length)==bloggerprofile){avaimg=author.gd$image.src}else{var parseurl=document.createElement('a');if(authorUri!=""){parseurl.href=authorUri;avaimg='http://www.google.com/s2/favicons?domain='+parseurl.hostname}}if(urlMyProfile!=""&&authorUri==urlMyProfile&&urlMyAvatar!="")avaimg=urlMyAvatar;if(avaimg=="http://img2.blogblog.com/img/b16-rounded.gif"&&urlNoAvatar!="")avaimg=urlNoAvatar;var newsize="s"+sizeAvatar;avaimg=avaimg.replace(/\/s\d\d+-c\//,"/"+newsize+"-c/");if(cropAvatar)newsize+="-c";avaimg=avaimg.replace(/\/s\d\d+(-c){0,1}\//,"/"+newsize+"/");var authorName=author.name.$t;if(authorName=='Anonymous'&&txtAnonymous!=''&&avaimg==urlAnoAvatar)authorName=txtAnonymous;var imgcode='<div class="cm-person"><img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" src="'+avaimg+'" />';if(authorUri!="")imgcode='<a href="'+authorUri+'">'+imgcode+'</a>';if(maxUserNameLength>3&&authorName.length>maxUserNameLength)authorName=authorName.substr(0,maxUserNameLength-3)+"...";var authorcode=authorName;if(authorUri!="")authorcode='<a class="profile-name-link item'+position+'" href="'+authorUri+'" title="'+position+'. '+authorName+'">'+item.count+'</a>'+authorName.substring(0,14)+'</div>';text=text.replace('[user]',authorcode);text=text.replace('[image]',imgcode);text=text.replace('[count]',item.count);return text}var topcommenters={};var ndxbase=1;function showTopCommenters(json){var one_day=1000*60*60*24;var today=new Date();if(urlMyProfile==""){var elements=document.getElementsByTagName("*");var expr=/(^| )profile-link( |$)/;for(var i=0;i<elements.length;i++)if(expr.test(elements[i].className)){urlMyProfile=elements[i].href;break}}for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];if(numDays>0){var datePart=entry.published.$t.match(/\d+/g);var cmtDate=new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);var days=Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));if(days>numDays)break}var authorUri="";if(entry.author[0].uri&&entry.author[0].uri.$t!="")authorUri=entry.author[0].uri.$t;if(excludeMe&&authorUri!=""&&authorUri==urlMyProfile)continue;var authorName=entry.author[0].name.$t;if(excludeUsers.indexOf(authorName)!=-1)continue;var hash=entry.author[0].name.$t+"-"+authorUri;if(topcommenters[hash])topcommenters[hash].count++;else{var commenter=new Object();commenter.author=entry.author[0];commenter.count=1;topcommenters[hash]=commenter}}if(json.feed.entry.length>200){ndxbase+=200;document.write('<script type="text/javascript" src="'+homepage+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');return}var tuplear=[];for(var key in topcommenters)tuplear.push([key,topcommenters[key]]);tuplear.sort(function(a,b){if(b[1].count-a[1].count)return b[1].count-a[1].count;return(a[1].author.name.$t.toLowerCase()<b[1].author.name.$t.toLowerCase())?-1:1});var realcount=0;for(var i=0;i<maxTopCommenters&&i<tuplear.length;i++){var item=tuplear[i][1];if(item.count<minComments)break;document.write(replaceTopCmtVars(txtTopLine,item,realcount+1));realcount++}if(!realcount)document.write(txtNoTopCommenters)}document.write('<script type="text/javascript" src="'+homepage+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');</script>

Daftar Member Aktif

Berikut ini Kami tampilkan member-member yang aktif berkomentar di blog SAGITA COM. Apabila Anda rajin dan aktif berkomentar disini Anda aka...

Baca selengkapnya »