Cara Modif Kotak Komentar Blog Agar Menjadi Lebih Keren

Cara Modif Kotak Komentar Blog Agar Menjadi Lebih Keren - Tampilan kotak komentar pada blog umumnya seperti itu - itu saja, dalam arti seperti kotak komentar pada template bawaan blogger. Bukan bererti jelek ya? Saya Cuma bilang umumnya seperti itu saja. Hehehe.

Nah, mungkin ada sebagian blogger merasa kurang sreg dengan tampilan kotak komentar yang seperti itu – itu saja atau sekedar ingin memodifikasi, saya juga ndak tau. Yang jelas adanya artikel ini adalah oleh - oleh dari hasil blusukan di blog lain yang telah memberikan tutorial tentang cara membuat kotak komentar menjadi lebih menarik ( tampilan kotak komentarnya mirip dengan tampilan SMS ).

Oke, langsung saja. Kita eksekusi kode-kode kotak komentar menarik ini. Oh iya...Back Up dulu template sobat sebelum mengeksekusi, buat jaga-jaga bila terjadi error. Sebab, struktur setiap template itu berbeda-beda. Beda yang bikin beda pula strukturnya, kalau berhasil ya rejeki, kalau gagal berarti bukan rejeki kita untuk memiliki kolom komentar yang menarik dan keren ini.

Baca Juga:
Cara Mudah Memasang Popular Post Warna Warni Ala Kang Mousir

Cara Modif Kotak Komentar Menjadi Lebih Keren

1.Masuk pada Dasbor Blogger

2.Klik menu Template

3.Klik Edit HTML

4.Cari kode CSS seperti di bawah 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;

}

5.Hapus kode tadi

6.Ganti dengan kode berikut ini

#comments h4 {

margin:0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: #000;

}

#bg_commentblock {

width: 548px;

background: #ffffff;

float: left;

padding:20px;

margin:0 0 10px 0;

border:1px solid #C0C0C0;

}

#commentblock {

width: 510px;

background: #E8E8E8;

text-align: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: 0px 0px 0px 10px;

padding: 0px 0px 10px 0px;

}

.commentdate {

font-size: 12px;

padding-left: 0px;

}

#commentlist li p {

margin-bottom: 8px;

line-height: 20px;

padding: 0px;

}

.commentname {

color: #333333;

margin: 0px;

padding: 5px 5px 5px 0px;

}

.commentinfo{

clear: both;

}

.commenttext {

clear: both;

margin: 3px 0px 10px 0px;

padding: 20px 10px 5px 10px;

width: 490px;

background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7xg4otjlrRZZE_SI9d7O_J2gVai8WJCxXtO7XoHEVIOwxUPB4TfqdIlT7H-K92IuVc1TUQy6myRTZRb3tCO6K5k0d8OhPRso8X6QANTHyWeSLEgOjDLZ_9wQY89EIw0R-_C_p4YX94yL/s1600/commentgray.gif.png) no-repeat top left;

}

.commenttext-admin {

clear: both;

margin: 3px 0px 10px 0px;

padding: 20px 10px 5px 10px;

width: 490px;

background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7xg4otjlrRZZE_SI9d7O_J2gVai8WJCxXtO7XoHEVIOwxUPB4TfqdIlT7H-K92IuVc1TUQy6myRTZRb3tCO6K5k0d8OhPRso8X6QANTHyWeSLEgOjDLZ_9wQY89EIw0R-_C_p4YX94yL/s1600/commentgray.gif.png) no-repeat top left;

}

7.Scroll / Geser ke bawah sedikit, cari kode di bawah ini:

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

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

&#160;

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

&#160;

<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='&quot;comment-author &quot; + 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>

&#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>

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

Note:

Prioritaskan kode yang berwarna merah.

8.Hapus di atas

9.Ganti dengan kode di bawah ini:

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

<div class='comments' id='comments'>

<a name='comments'/>

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

<div id='bg_commentblock'>

<h4>

Komentar :

</h4>

<div id='commentblock'><!--commentblock-->

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

<b:else/>

<strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>

</b:if>

<dl class='commentlist'>

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

<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>

<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>pada hari&#160;<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>

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

&#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>

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

10.Simpan Template

11.Selesai

Keterangan:

width: 548px adalah lebar kotak komentar, sobat bisa menyesuaikan dengan lebar template yang sedang sobat pakai.

Misal:  menjadi width: 500px; atau berapa saja yang penting sesuai dengan lebar kotak komentar template sobat.

Baca Juga:

Cara Terbaru Daftar Payoneer 2017, Gratis!!!