Modif Kotak Komentar 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-rizkyramadhani.blogspot.co.id 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.

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/AVvXsEiKgGFwc9kyw_WRs6PQRLMwRn9gg3Xpsd1NVeX3Taaa_U1N3Msjwyf-mJnXp6NGWjQ1VK6rn2kJosEDczSc1kRjaeTCypmGwLCMXIPDHZIbzr1gAeHcUevXPgBNDotVVRdpLVZgMApW5Tv6/s1600/commentgray.gif.png) no-repeat top left;

}

.commenttext-admin {

clear: both;

margin: 3px 0px 10px 0px;

padding: 20px 10px 5px 10px;

width: 490px;

}

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

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

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

<data:post.commentRangeText/>

</span>

</b:if>

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

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

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

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

<b:else/>

</b:if>

</dd>

<data:comment.timestamp/>

</a>

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

</span>

</dd>

</b:loop>

</dl>

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

<data:post.oldestLinkText/>

</a>

<data:post.olderLinkText/>

</a>

<data:post.commentRangeText/>

<data:post.newerLinkText/>

</a>

<data:post.newestLinkText/>

</a>

</span>

</b:if>

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

<b:include data='post' name='comment-form'/>

<b:else/>

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

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

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

<h4>

Komentar :

</h4>

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

<b:else/>

</b:if>

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

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

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>pada hari <dd class='comment-footer' style='display:inline; margin:0px'>

<data:comment.timestamp/>

</a>

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

</span>

</dd></span>

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

<b:else/>

</b:if>

</dd>

</b:loop>

</dl>

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

<data:post.oldestLinkText/>

</a>

<data:post.olderLinkText/>

</a>

<data:post.commentRangeText/>

<data:post.newerLinkText/>

</a>

<data:post.newestLinkText/>

</a>

</span>

</b:if>

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

<b:include data='post' name='comment-form'/>

<b:else/>

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

</b:if>

</p>

</div>

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

Sumber:

http://blog-rizkyramadhani.blogspot.co.id/2012/04/cara-modifikasi-kotak-komentar-blog.html

Gila Script

Modif Kotak Komentar Menjadi Lebih Keren

1 Response to "Modif Kotak Komentar Menjadi Lebih Keren"