Sebenarnya ini bukan asli buatan saya tapi saya mempelajari kode css template gratisan yang saya download,dan membandingkan dengan milik saya semula. Sehingga terciptalah tutorial dan tampilan komentar seperti ini di blog saya. Yah langsung saja lihat tutorial dibawah:
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik tab Edit HTML.
- Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
- Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.
- Cari kode pada bagian CSS yang seperti ini :
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
7. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini : Untuk yang berwarna merah bila template blog anda sudah ada kode seperti dibawah maka silahkan ditimpa saja.
8. Lihat Ke bagian bawah, dan cari kode yang seperti ini : Fokus pad text yang berwarna merah!!.comments {background:#fff url(http://lh5.ggpht.com/_Kwwy9VyLMKw/SjC-eXU7d_I/AAAAAAAAA5o/wLC8_OtGe8k/s912/Post%20body.gif);background-repeat: repeat-x;float: left;width: 610px;margin: 0 6px 10px 0px;padding: 10px;border: 1px solid #e6e6e6; }
#comments h4 {
margin: 0;
font-weight: bold;
line-height: 1.4em;
text-transform: uppercase;
letter-spacing: .1em;
color: #000000;
padding-left: 5px;
font-size: 13px; }
#commentblock {
width: 570px;
background: #e4e3e3;
float: left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333; }
#commentblock ol {
list-style-type: square;
margin: 0 0 10px 10px;
padding: 0 0 10px 0; }
.commentdate {
font-size: 12px;
padding-left: 0; }
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0; }
.commentname {
color: #333;
margin: 10px 0;
padding: 5px 5px 5px 0; }
.commentinfo { clear: both; }
.commenttext {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3xfyuOipjT2zKZs4hpWa3TaMfsMxyq0422BvUDD3sfe0IC92MkpWJ36cxIiOd5qlzhRixr64XU4YR_oshvps0_Src-O38ozPgsifK7wA19xVLi3VP_2_zyfKwkEblnQjQw9dSsVpQP8KJ/?imgmax=800) no-repeat bottom left;
clear: both;
margin: 20px 0 0 0;
padding: 10px 10px 30px 10px;
width: 555px;
color: #000; }
.commenttext-admin {
background: #aaa9a9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSSx2UF2WimHAfKOx_TmK8zKs_SLj5a4ZdPQZph0pOnTXZozFKg4rcyHnHHe8c0rEBZKZK2BA0YMrHBpqXpqfKNoUSSknZHRUVzFux3MVfeauZ9YISdwogcRcPyRrGZA8B8ePqVx-3B66/?imgmax=800) no-repeat bottom left;
clear: both;
margin: 20px 0 0 0;
padding: 10px 10px 30px 10px;
width: 555px;
color: #000; }
<b:includable id='comments' var='post'>9. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1<data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<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>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<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>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<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>
</p></b:if>
<b:includable id='comments' var='post'>10. Simpan template
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<div id='bg_commentblock'>
<h4>
COMMENTS :
</h4>
<div id='commentblock'><!--commentblock-->
<strong>Dimohon Komentar Yang Sopan dan Jangan Nyepam</strong> <b:if cond='data:post.numComments == 1'>1
<b:else/>
<p> <strong><data:post.numComments/> <data:commentLabelPlural/> to “<data:post.title/>”</strong></p>
</b:if>
<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<dd class='commenttext-admin'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<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/>
</dt>on <dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
</b:loop>
</dl>
<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>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<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>
</p>
</div><!--end commentblock-->
</div>
</b:if>
11. Lihat hasilnya
Semoga sukses!!
Bagaimana? tutorial diatas bisa dijadikan dasar untuk memodifikasi kotak komentar bukan! Bila anda menemukan kotak komentar dari template gratisan yang menarik anda bisa menaruhnya di blog anda dengan mencocokkan tutorial diatas.
Sumber: nurad1k.blogspot.com
panjang bgt sob scriptnya.... biarlah punya apa adanya aja
ReplyDeletepanjang tapi keren..!
ReplyDeletekk good posting,,
ReplyDeletedi coba aza tipsx
ReplyDeleteTerima kasih SOb,, akhirnya adi juga.. hehehe :D
ReplyDelete