Informasi, Teknologi, Pengetahuan, dan Tips Trik: Belajar Langkah Singkat Cara Me-Modifikasi Kotak Komentar/Comment Form

Saturday, 29 January 2011

Membuat Komentar Admin Beda / Highlight Author Comment

Membuat Komentar Blogspot Layaknya Reply Komentar dari Admin

Sepertinya,sudah banyak ya gan yang memposting masalah bagaimana cara membuat komentar admin beda dengan komentar pengunjung ini.
Mungkin kali ini Pelajaran Blog hanya akan mengulas kembali dan memberikan ide agar tampilan komentar admin yang berbeda dengan komentar pengunjung nanti agar lebih menarik lagi.

Untuk pic preview-nya,seperti apa sih komentar admin yang beda dengan komentar pengunjung itu,sobat lihat gambar dibawah ini:

Kiranya sudah sangat jelas sekali ya gan,apa yang akan dibahas kali ini :D

Langkah Cara Membuat Highlight Author Comment / Membuat Komentar Blogger Admin Berbeda dengan Komentar Pengunjung

Ok,Pertama tentukan blog milik anda yang mana yang akan di modifikasi kotak komentar-nya agar beda dengan komentar pengunjung,dengan memilih Dasboard,lalu pilih Tata Letak / Rancangan blog terpilih tadi.

membuat komentar admin beda Highlight Author Comment.

Kedua,pilih tab Edit HTML,lalu seperti biasa contreng pada checklist tulisan Expand Widget Templates.

modifikasi kotak komentar beda admin dan berbeda.

Ketiga,pada barisan kode CSS sobat atau cari saja kode ]]></b:skin>,jika sudah ketemu,letakkan kode css berikut,tepat diatas kode tersebut.

.admin-pb-comments{
background: url(http://2.bp.blogspot.com/_n7xseT2-HDU/TUOJMHKcmhI/AAAAAAAAArs/AxN8AGyHY6E/s1600/pelajaran%2Bblog%2Bbackground.jpg) no-repeat;
border:1px solid #FF9966;
border-left:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
margin-left:0;
margin-right:20px;
padding:7px;
color:#ffffff;
}

Keempat,cari lagi kode berikut ini (gunakan Ctrl+F di keyboard sob):

dd class='comment-body'

Jika sudah ketemu,tepat diatasnya letakkan kode berikut:

<b:if cond='data:comment.author == data:post.author'>
<dd class='admin-pb-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Kelima,sekarang cari kode berikut:

<dd class='comment-footer'>

Jika sudah ketemu,tinggal sisipkan kode </b:if> tepat diatas kode <dd class='comment-footer'> tersebut.

Setelah itu,Simpan Templates blogger sobat dan cobalah isilah komentar untuk menguji berhasil tidaknya trik membedakan komentar admin dengan komentar pengunjung ini.

Semoga berhasil dan lebih semangat ngeblog ya gan :D

Monday, 12 October 2009

Langkah Singkat Cara Me-Modifikasi Kotak Komentar/Comment Form

Cara Memodifikasi Kotak Komentar

Jika anda kurang menyukai kotak komentar bawaan asli dari blogger,saya jamin dalam waktu kurang dari 5 [lima] menit,anda sudah bisa memodifikasinya form komentar tersebut sendiri.

Sebenarnya,tanpa postingan ‘langkah memodifikasi kotak form komentar’ di pelajaran blog kali ini,jika anda browse di google saja sudah berjibun artikel tentang cara singkat mengubah atau memodifikasi komentar/comments form tersebut.

Hanya saja,disini saya akan sharing langkah cara mengganti/mem-vermak kotak komentar hanya dengan satu jurus saja.

Hasilnya nanti kurang lebih akan seperti ini [klik ajha biar gambarnya gede,hehe]:

Cara Singkat Mengubah Kotak Box/Kotak Form Komentar.

Langkahnya cukup mudah,saya akan ambil contoh dari salah satu template bawaan blogger.
Pertama anda pergilah ke Dashboard»Tata Letak»Edit Html.
Cari kode dalam barisan css anda,yang hampir sama seperti berikut (mengingat template yang berbeda-beda):

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.2em;
color: $dateHeaderColor;
font: bold 78% Georgia Serif;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.4em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 20px 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 20px 1.5em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Jika sudah ketemu,tinggal hapus kode tersebut,dan gantilah dengan kode dibawah ini:

#comments h4 {
color:#666666;
font-weight:bold;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
text-transform:none;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
background:#B4F4FF none repeat scroll 0 0;
border:1px solid #B4F4FF;
font-size:15px;
font-weight:bold;
margin-right:20px;
padding:5px;
}
#comments .blogger-comment-icon, .blogger-comment-icon {
background:#EEEEEE none repeat scroll 0 0;
border-color:#CCCCCC #CCCCCC #EEEEEE;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}
#comments-block .comment-body {
border-left:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
border-bottom:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
font-size:11px;
line-height:1.4em;
margin:-0.25em 20px 2em 0;
padding:5px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0 0 0.75em;
}
.deleted-comment {
color:gray;
font-style:italic;
}

Kode yang bercetak tebal diatas "#B4F4FF" adalah warna block dari header masing-masing komentar,jadi rubahlah sesuai dengan keinginan anda.Bisa anda ganti dengan tulisan black,white,red,blue,dll.
Bisa juga anda menggunakan kode heksa warna untuk memodifikasi warnanya.

Setelah itu,lalu Simpan.
Selesai dech dan lihat hasil komentar tamu-tamu anda sekarang.
Moga bermanfaat ya :D