dicepatin

Pada postingan terdahulu, saya membuat tutorial tentang Cara membuat komentar blog bertingkat seperti WordPress. 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.


Installasi Komentar Blogger Seperti Wordpress V2 :

Sebelum melakukan installasi astikan Backup dulu template, untuk menghindari error pada installasi.

1. Buka editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:

]]></b:skin>

2. Salin kode CSS ini dan letakkan di atasnya:

.clearfix:after {
content:"";
display:table;
clear:both;
}

.clearfix {*zoom:1}

.pull-left {
display:block;
float:left;
}

.pull-right {
display:block;
float:right;
}

/* Start Custom Comments' CSS */
.custom-comments {
margin:3em 0 0;
font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;
letter-spacing:0;
}

/* links */
.custom-comments a,
.custom-comments a:visited {
color:#2143B4;
text-decoration:none;
}

.custom-comments a:hover {text-decoration:underline}

/* comment item */
.custom-comments .comment-item {
margin:0 0 1em;
padding:0 0 .7em 0;
border-bottom:1px solid #eee;
position:relative;
}

/* comment header */
.custom-comments .comment-header {
overflow:hidden;
margin:0 0 1em 0;
}

/* avatar area */
.custom-comments .avatar-box {
width:65px;
margin:0 0 20px 0;
}

/* avatar */
.custom-comments .avatar-image-container,
.custom-comments .avatar-image-container a,
.custom-comments .avatar-image-container img {
border:none;
padding:0 0;
margin:0 0;
float:none;
display:block;
width:50px;
height:50px;
max-width:none;
max-height:none;
}

.custom-comments .avatar-image-container img {
border:1px solid #ddd;
padding:4px;
background-color:#fafafa;
}

/* comment body */
.custom-comments .comment-body {margin:0 0 2em 75px}

/* comment reply */
.custom-comments .comment-reply {
margin:1em 0 0 75px;
padding:1em 1.2em;
background-color:#FFF7D1;
position:relative;
font-size:11px;
}

.custom-comments .comment-reply:after {
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:0;
border:10px solid transparent;
border-color:white #F5F2D8 #F5F2D8 white;
}

.custom-comments .comment-reply .user {margin-left:15px}
.custom-comments .comment-reply a {color:#767643}

.custom-comments .comment-reply .avatar-image-container img {
border-color:#EAE5C4;
background-color:#F5F0D3;
}

/* comment item footer */
.custom-comments .comment-bottom-line {
display:block;
clear:both;
margin:1em 0 .5em 75px;
text-align:right;
}

/* comment buttons */
.custom-comments .comment-bottom-line a,
.custom-comments .cancel-reply-btn {
border:1px solid #ddd;
outline:none;
padding:2px .7em 3px .5em;
margin:0 0 0 4px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-decoration:none;
}

.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .comment-bottom-line a:hover,
.custom-comments .cancel-reply-btn:hover {
border-color:#bbb;
text-decoration:none;
}

.custom-comments .comment-bottom-line a:active,
.custom-comments .comment-bottom-line a:focus,
.custom-comments .cancel-reply-btn:active,
.custom-comments .cancel-reply-btn:focus {border-color:#999}
.custom-comments .cancel-reply-btn {padding:3px 1em 4px}

/* comment form */
.custom-comments .custom-comment-form {
margin:1em 0 2em;
clear:both;
}

.custom-comments .comment-item .custom-comment-form {
border:1px solid #eee;
padding:1em .2em 2em 1.5em;
margin-left:75px;
}

.custom-comments #comment-editor {
max-width:none;
width:100%;
height:250px;
border:none;
background:none;
}

.custom-comments .custom-comment-form .cancel-reply-btn {display:none}
.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}
.custom-comments .comment-item .custom-comment-form h4 {display:none}

/* loading animation */
.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}

/* deleted comment */
.custom-comments .deleted-comment {
font-style:italic;
color:#aaa;
}

/* comments paging control */
.custom-comments .paging-control-container {
font-size:100%;
display:block;
float:none;
width:auto;
clear:both;
border:1px solid #eee;
padding:.5em 1em;
overflow:hidden;
}

/* Author Comments Style: Do whatever you want with this! */
.author-comment > .comment-item {}
.author-comment > .comment-reply {}

3. Kemudian cari kode ini:

<b:includable id='comments' var='post'>
---------
---------
</b:includable>

4. Hapus kode tersebut dan ganti dengan kode berikut ini :

<b:includable id='custom-comments' var='post'>
<section class='custom-comments' id='custom-comments'>
<b:if cond='data:post.allowComments'>

<h4>
<b:if cond='data:post.numComments == 1'>
<span>1</span>&amp;nbsp;<data:commentLabel/>
<b:else/>
<span><data:post.numComments/></span>&amp;nbsp;<data:commentLabelPlural/>
</b:if>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<nav 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>&#160;
<data:post.commentRangeText/>&#160;
<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>
</nav>
</b:if>

<div id='comments-area'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.inReplyTo'><b:else/>
<b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-item clearfix' expr:id='data:comment.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if> <data:commentPostedByMsg/>
</strong>
<a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
</div> <!-- comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div> <!-- avatar-box -->
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<data:comment.body/>
</b:if>
</div> <!-- comment-body -->
<b:loop values='data:post.comments' var='replies'>
<b:if cond='data:replies.inReplyTo == data:comment.id'>
<b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:replies.authorUrl'>
<a expr:href='data:replies.authorUrl' rel='nofollow'><data:replies.author/></a>
<b:else/>
<data:replies.author/>
</b:if> <data:commentPostedByMsg/>
</strong>
<a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
</div> <!-- reply comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:replies.favicon'>
<img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:replies.authorAvatarImage/>
</b:if>
</div> <!-- reply avatar-box -->
<div class='comment-body'>
<b:if cond='data:replies.isDeleted'>
<span class='deleted-comment'><data:replies.body/></span>
<b:else/>
<data:replies.body/>
</b:if>
</div> <!-- reply comment-body -->
<span class='comment-bottom-line'>
&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;
</span>
</div> <!-- reply comment-reply -->
<b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- replies.inReplyTo -->
</b:loop>
<span class='comment-bottom-line'>
<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;
</span>
<div expr:id='&quot;form-container-&quot; + data:comment.id'/>
</div> <!-- comment-item -->
<b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- comment.inReplyTo -->
</b:loop>
</div>

<b:if cond='data:post.commentPagingRequired'>
<nav 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>&#160;
<data:post.commentRangeText/>&#160;
<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>
</nav>
</b:if>

<div class='custom-comment-form' id='custom-comment-form'>
<h4><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<div class='custom-comment-editor-wrapper'>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
<a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Reply</a>
</div>

<script type='text/javascript'>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
var frame = document.getElementById('comment-editor'),
form = document.getElementById('custom-comment-form'),
container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
part = originalSource;
frame.style.height = "50px";
frame.style.visibility = "hidden";
frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
container.insertBefore(form, null);
frame.onload = function() {
this.style.height = "250px";
this.style.visibility = "visible";
};
}
//]]>
</script>

</b:if>
</section>
</b:includable>

5. Cari semua kode yang tampak seperti ini :

<b:include data='post' name='threaded_comments'/>

Atau :

<b:include data='post' name='comments'/>

6. ganti dengan kode ini :

<b:include data='post' name='custom-comments'/>

7. Terakhir Simpan Template dan lihat hasilnya.

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.

Di dalam postingan ini adalah Daftar Isi Tutorial Blog Dan Belajar SEO, mulai dari postingan awal sampai akhir, Disini Anda juga bisa melihat posting-posting tentang tutorial dari yang termudah sampai yang rumit sekalipun, semoga Kami bisa membantu atas apa yang Anda cari saat ini di blog ini !

Halaman Error 404 Blog merupakan salah 1 dari fitur baru blogger. Ini berguna untuk membantu pengunjung yang salah mengakses link / halaman yang ada di blog kita dengan memberikan petunjuk atau saran pada halaman error yang mereka akses. Dengan kata sederhana Halaman Error 404 adalah halaman yang akan ditampilkan bila halaman yang sebenarnya tidak ditemukan disebut Halaman Error 404.
Lihat DemoJika Anda ingin tampilan halaman error not found seperti blog ini, silahkan ikuti cara di bawah ini :

1. Login ke Accound blogger Anda.
2. Klik tab Rancangan -> pilih Edit HTML -> Jangan lupa download template lengkap agar apabila salah dalam pengeditan bisa di kembalikan seperti semula.
3. Cari code : ]]></b:skin>
4. Letakkan code berikut tepat di diatasnya :

#error-page { text-align:center; background-color:#900; position:fixed !important; position:absolute; /* IE6 Fallback */ top:0px; right:0px; bottom:0px; left:0px; padding-top:100px; z-index:99999; }

5. Cari code <body>.
6. Letakkan code berikut tepat dibawahnya :

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

7. Scroll kebawah dan temukan code </body>.
8. Letakkan code berikut tepat diatasnya :

</b:if> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <a href='http://www.sagitasoft.com/2011/07/daftar-isi-sagita-com.html' title='Daftar Isi Buku'> <img alt='error' src='http://3.bp.blogspot.com/-uZ6diSn3Dys/T21Da-5HGXI/AAAAAAAACYY/d8WwcPgRazQ/s1600/dte-big2.png'/> </a> <h1 style='color:black;font-family:Monospace;'>LAMAN TIDAK DITEMUKAN</h1> </div> </b:if>

9. Ganti tulisan yang berwarna merah dengan link Anda.
10. Save template dan silahkan lihat hasilnya.

Hallo sobat blogger, sudah lama banget nih GITA gak update posting, untuk kali ini saya akan berbagi tentang Cara Membuat Menu Pengganti Navbar Blogspot. Ini sebenarnya request dari salah satu temen blogger kita yang sangat ingin membuatnya untuk di pasang di blognya. Menu Pengganti Navbar Blogspot sangatlah penting untuk memudahkan pengunjung untuk menuju link-link pada blog kita, dari pada panjang lebar kita menuju tutorialnya yuk..... !


Berikut adalah Cara Membuat Menu Pengganti Navbar Blogspot :

1. Masuklah ke akun blogger Anda.
2. Klik tab Rancangan -> pilih Edit HTML -> Jangan lupa download template lengkap agar apabila salah dalam pengeditan bisa di kembalikan seperti semula.
3. Cari code : <b:skin><![CDATA[
4. Letakkan code berikut tepat di bawahnya :

#navbar-iframe {
height:0;
visibility:hidden;
display:none;
}

5. Caari code : ]]></b:skin>
6. Letakkan code berikut tepat di atasnya :

.menu {
background:#000;
border-bottom:3px solid #111;
box-shadow:0 0 5px white;
-moz-box-shadow:0 0 5px white;
-webkit-box-shadow:0 0 5px white;
-khtml-box-shadow:0 0 5px white;
z-index:100;
top:0;
left:0;
width:100%;
position:fixed;
z-index:10000;
opacity:.9;
filter:alpha(opacity:90);
font-size:13px;
text-align:center;
}

.menu ul {
background:#000;
height:2px;
list-style:none;
margin:0;
padding:0;
}

.menu li {
float:left;
padding:0px;
}

.menu li a {
background:#000;
color:#fff;
display:block;
font-weight:normal;
line-height:27px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
background:#212121;
color:#00ff00;
text-decoration:none;
}

.menu li ul{
background:#000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:100px;
z-index:200;
/*top:1em;/*left:0;*/
}

.menu li:hover ul {
display:block;
}

.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:100px;
}

.menu li:hover li a {
background:none;
}

.menu li ul a {
display:block;
height:27px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
background:#212121 center left no-repeat;
border:0px;
color:#fff;
text-decoration:none;
}
.menu p {
clear:left;
}

7. Cari code : <body>
8. Letakkan code berikut tepat di bwahnya :

<div class='menu'><ul>
<li><a href='http://www.sagita-com.tk/search/label/OS'>Windows</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Software'>Software Full</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Tool'>Tool</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Multimedia'>Multimedia</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Software-Hp'>Aplikasi HP</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Anti-Virus'>Anti Virus</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Internet'>Internet</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Editing'>Editing</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Games'>Games</a></li>
<li><a href='http://www.sagita-com.tk/2012/'>Lainnya</a><ul>
<li><a href='http://www.sagita-com.tk/search/label/News'>News</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Request'>Request</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Android'>Android</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Billing'>Billing</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Facebook'>Facebook</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Tips-Trik'>Tips &amp; Triks</a></li></ul></li>
<li style='float:right;margin-right:5px;'><a href='http://www.sagita-com.tk/2011/07/jadikan-sagita-com-halaman-awal-anda.html'>Homepage</a></li></ul></div>

9. Ganti link-link di atas yang berwarna merah sesuaikan dengan blog Anda.
10. Terakhir simpan template dan lihat hasilnya.

Tutorial kali ini akan menjelaskan cara membuat komentar bertingkat seperti wordpress. Tutorial ini tidak menggunkan threaded comment blogger yang baru, tetapi menggunakan sistem komentar lama, dan dimodifikasi sehingga menyerupai komentar wordpress (wordpress threaded comment).

Untuk membuat threaded comment pada system komentar blogger yang baru (baca: Cara Mengaktifkan Threaded Comments Pada Blogspot). Untuk tutorial kali ini, kita akan membuat threaded comment pada sistem komentar lama, seperti screenshoot di bawah ini:


Berikut adalah cara membuatnya :

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML.

2. Menjaga kegagalan, backup dulu template anda ---> Download Template Lengkap.

3. Centang Expand Template Widget.

4. Tambahkan kode dibawah ini diatas ]]>

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQF8QBEzR7nloMYZdiQN_xVHccM1F7IeWr62A_QTi_6fwai2Kz35JdqvuWO1GgTgyFLkRVuGUCjaWAN64E3tVpQ1DpXUb2flOrHl_cm5zfEvokmsJAGkD4RyLzyI5FtFtIJuE0lBvkuOI/s1600/takdikenal.jpg) center no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px;
background: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFa7JJ7KyQswQU1wQk4gwZymtTbspHGF8rQca8sRbhxk2TbkaEuR-KHKhIF4r26OEHIch6lnVRrrSSd4y69zcPzIzxYraYCEny9AhoyhlyTWbPDHnQVGDpH-R-2CdActE7-Fral1ojT0s/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}
/* Comment Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}

5. Tambahkan kode dibawah ini sebelum tag </body>.

<script src='http://sagita-com.googlecode.com/svn/coments.js' type='text/javascript'/>

Nah, berikut ini langkah yang lumayan rumit, karena dibutuhkan konsentrasi yang maksimal agar dapat mengikutinya dengan baik, kode berikut berpengaruh besar pada komentar pada blog Anda, karena dengan kode di di bawah ini akan merubah keseluruhan tampilan komentar pada blog Anda agar sama seperti wordpress.

6. Selanjutnya, silahkan cari kode pembuka <b:includable id='comments' var='post'> dan ditutupi dengan kode </b:includable>.

Diantara kode tersebut didalamnya terdapat kode yang harus Anda ganti dengan kode baru, dan Anda harus meletakan kode baru di bawah ini di antara kode yang sudah ditentuakn, perhatikan langkah-langkah di bawah ini.

<b:includable id='comments' var='post'>

Kode lama Anda yang harus diganti dengan kode baru.

</b:includable>

7. letakan kode baru di bawah ini diantara kode <b:includable id='comments' var='post'> dan </b:includable>.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<script type='text/javascript'>document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%74%75%74%6F%72%69%61%6C%2D%73%61%67%69%74%61%2E%74%6B%2F%32%30%31%32%2F%30%35%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%6B%6F%6D%65%6E%74%61%72%2D%62%6C%6F%67%2D%73%65%70%65%72%74%69%2E%68%74%6D%6C%27%20%73%74%79%6C%65%3D%27%66%6F%6E%74%2D%73%69%7A%65%3A%39%70%78%3B%66%6C%6F%61%74%3A%72%69%67%68%74%3B%6D%61%72%67%69%6E%2D%72%69%67%68%74%3A%35%70%78%3B%27%20%74%61%72%67%65%74%3D%27%5F%62%6C%61%6E%6B%27%3E%62%79%20%73%61%67%69%74%61%3C%2F%61%3E'));</script>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=0000000000000000000&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjD_nnUWGfdCx4M5MePPAAL4AGWelk3uIN_6CnM6zHCa6-rTvQ1t0LL64karCj-UU5_iCdwSB95AEOC94rhQ9oB8h8Aa9eqR7JBMl7Y00g4gZxHBY31Jp7YbEcMHkTK4rncafgrWyyLbk/s1600/adminstar.png' title='Admin' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='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>
</b:if>
</div>

Untuk blogID=0000000000000000000, silahkan Anda ganti dengan blogID pada blog Anda, blogID berada pada address bar halaman template anda, contohnya seperti ini :



8. Simpan Template.

Semoga bermanfaat !