Memodifikasi Kotak Komentar Blogger

Memodifikasi Kotak Komentar Blogger

Sahabatku semua yang berbahagia, berikut ini akan saya infokan bagaimana cara memodifikasi kotak komentar di bloggspot agar lebih menarik seperti gambar berikut ini :

Apakah Anda tertarik untuk membuatnya? silahkan ikuti info saya berikut ini, tetaplah bersama saya di info toko surya62 yang setia menemani Anda untuk mengais informasi dan ilmu pengatahuan yang bermanfaat.

Adapun langkahnya adalah sebagai berikut (saya berharap Anda sudah memahami bagian-bagian tag HTML) :

1. Masuk ke Dashboard Blogger Anda;
2. Klik >> setting >> masuk ke pengaturan komentar blogger >>pilih komentar penuh >> sematkan dibawah posting >> selesai klik simpan perubahan;
3. Pilih >> Rancangan >> Edit HTML >> Unduh template untuk backup >> Klik Expand Widget Template;
4. Cari kode tag HTML berikut : ]]></b:skin> ;
5. Masukkan kode tag HTML berikut ini tepat diatas kode tersebut diatas;


#comments {
text-align:justify;
color:#4c4c4c;
font:normal normal 101% Arial, sans-serif;
border:2px solid #C33F00;
background:#fff;
margin:0;
padding:15px 20px;
}
.comment-author {
color:#C33F00;
background:#EFC6B3;
border:1px solid #C33F00;
margin:15px 0 10px;
padding:15px 0 0 -35px;
}
.comment-body p {
background:#F6DBF2;
line-height:1.6em;
margin:0px 0px 0px 41px;
padding:10px 10px 10px 10px;
border-left:5px solid #C33F00;
border-bottom:1px dashed #C33F00;
}
#comments-block .avatar-image-container img {
background: #fff
url(http://www.gravatar.com/avatar/
64d24498132d256daa236f9c517ea62c.png)
no-repeat left center;
width:40px;
height:40px;
}
#feedB_on a {
position: absolute;
width: 25px;
height: 85px;
z-index: 1;
top: 720px;
left:0px;
background-image:url("https://lh3.googleusercontent.com/
_3hrwX4eikSM/TWs0_y2AqlI/AAAAAAAAAiE/muRjXdNsYwI/
s288/feedback_off.png");
}



6. Setelah itu cari tag berikut : <data:commentPostedByMsg/> ... </dt>;
7. Jika sulit mencari gunakan tombol CTRL + F pada keyboar Anda lalu ketikkan yang dicari terebut;
8. Setelah ditemukan silahkan pastekan tag berikut tepat dibawah tag tersebut (jika pada template Anda sudah tersedia sebaiknya dihapus nanti ada double tag yang akan membingungkan Anda) ;


<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'
expr:id='data:widget.instanceId +
data:comment.cmtBodyIdPostfix'>
<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><dd class='comment-footer'>



9. Untuk memasukkan data foto pada komentar berada disisi kiri silahkan Anda cari tag berikut ini : <dl id='comments-block'>;
10. jika sudah ketemu sisipkan data berikut <div class='commentphoto' style='float:right;'/> dan ditutup dengan <div style='clear:both;'/> sehingga rangkaian tag HTML yang dimaksud menjadi seperti berikut ini :


<dl id='comments-block'>
<b:loop values='data:post.comments'
var='comment'>
<dt class='comment-author'
expr:id='"comment-" +
data:comment.id'>
<div class='commentphoto'
style='float:right;'/>
<a expr:name='"comment-" +
data:comment.id'/>
<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='"#comment-"
+ data:comment.id' title='comment
permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment'
name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>


11. Langkah terakhir simpan perubahan

Catatan :

Agar dalam melakukan editing tag HTML menggunakan wardpad atau notepad atau sejenisnya agar terhindar dari erro, jangan langsung masuk ke template Anda, hati-hati adalah lebih baik, terutama tag harus dirapatkan sesuai perintah contohnya tag URL, jika terdapat spasi maka akan gagal atau tidak terbaca.

Demikian Info saya kali ini semoga dapat menjadi inspirasi Anda untuk menyongsong dunia teknologi yang begitu pesat kemajuannya. Ikuti terus dan semangan untuk berimprofikasi dan berinovasi, jangan bosan untuk meningkatkan kreatifitas. Tetaplah bersama saya di Info toko surya62. Sukses...!!!.