THE MASTER

Hallo sahabat Blogger Kali ini saya akan memberikan tips mengubah kotak komentar menjadi keren, rapi elegan dan enak di pandang mata, karena setiap orang yang mempunyai blog pasti ingin tampilannya blognya terlihat bagus dari sisi manapun.. karena dengan tampilan blog yang cantik juga akan meningkatkan trafik dari blog itu...

baiklah ga' sah lama-lama lagi pasti sudah tidak sabar kan..... kalian baca baik-baik ya biar jadi sesuai ke inginan kalian....

langkahnya :

kalian masuk ke akun blogger kalian
jangan lupa simpan templat kalian lebih dahulu, biar nanti jika terjadi suatu yang tak di inginkan bisa di kembalikan lagi , untuk menyimpan kalian bisa lihat Tutorial Cara menyimpan Template
buka edit tempale, trus klik HTML,kemudian centang Expand tempalte Widget
Kemudian Copy dan paste kode di bawah ini di atas kode ]]></b:skin> ( untuk mempermudah percarian tekan Ctrl + F )

/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/
#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;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat: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 orange;
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 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuRryhZAxIJ6oOEIs9Waaa_u4G_VB45HdRND-guUtWKw-2OdzsOCdjQd9NYiCslS8kVVD-yfhEqwvpXNpEBsaUNNZISRU3RJPqiTbR2ZGx62GH0Q_TKxt0r7w6E9MK0CcviZ9RPBFh3c/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;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
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: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px orange;
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;
}

Lalu cari kode </body>, dan paste kode di bawah ini di atasnya

Kemudian cari kode seperti ini

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

disini letak kode baru

</b:includable>

ganti kode yang berwarna merah ( kode yang di apit ) dengan kode di bawah ini

<b:if cond='data:post.allowComments'>

<h4>

<b:if cond='data:post.numComments > 0'>

<b:if cond='data:post.numComments == 1'>

<span id='cm_total'>1</span> comment

<b:else/>

<span id='cm_total'><data:post.numComments/></span> comments

</b:if>

</h4>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.isDeleted'>

<b:else/>

<b:if cond='data:comment.author == data:post.author'>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

</div>

<a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>

</div>

<b:else/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

</div>

</div>

</b:if>

<b:if cond='data:comment.author == data:post.author'>

<b:if cond='data:comment.author == data:post.author'>

<data:comment.author/>

</a>

<b:else/>

<b:if cond='data:comment.authorUrl'>

<data:comment.author/>

</a>

<b:else/>

</b:if>

</div>

<b:if cond='data:comment.author == data:post.author'>

<data:comment.timestamp/>

<b:include data='comment' name='commentDeleteIcon'/>

</div>

<b:else/>

<data:comment.timestamp/>

<b:include data='comment' name='commentDeleteIcon'/>

</div>

</b:if>

</div>

<b:if cond='data:comment.author == data:post.author'>

</div>

<b:else/>

</b:if>

</div>

<b:else/>

<b:if cond='data:comment.author == data:post.author'>

<data:comment.author/>

</a>

<b:else/>

<b:if cond='data:comment.authorUrl'>

<data:comment.author/>

</a>

<b:else/>

</b:if>

</div>

<b:if cond='data:comment.author == data:post.author'>

<data:comment.timestamp/>

<b:include data='comment' name='commentDeleteIcon'/>

</div>

<b:else/>

<data:comment.timestamp/>

<b:include data='comment' name='commentDeleteIcon'/>

</div>

</b:if>

</div>

<b:if cond='data:comment.author == data:post.author'>

</div>

<b:else/>

</b:if>

</div>

</b:if>

</div>

</b:if>

</b:loop>

</div>

<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'>

</b:if>

</div>

Lalu cari kode _BlogID_ dan ganti dengan ID blogger kalian, contoh : http://www.blogger.com/blogger.g?blogID=1980506723555191087

Save dan lihat hasilnya.... keren bukan....,

Tapi itu semua belum selesai, karena biasanya belum jadi, tapi jangan kawatir, kalian cari lagi kode ( Biasanya ada 2 atau 4 )

<b:if cond='data:post.showThreadedComments'>

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

<b:else/>

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

</b:if>

lalu ganti kode seperti di bawah ini

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

Save lagi template nya…..

Semoga Trik blog ini bermanfaat….

Pages

THE MASTER

Ads 468x60px

Labels

Popular Posts

Trafik

Tips dan cara mengubah kolom komentar menjadi keren

0 comments:

Post a Comment

Blog Archive

iklan

Info Blog

Followers

Blog Sahabat