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 »