Cara Membuat Kotak Komentar Unik Di Blog

Seperti janji saya yang kemarin dalam postingan Cara Buat Kotak Komentar Admin Berbeda dengan sentuhan photoshop , kali ini saya coba membahas bagaimana Cara Membuat Kotak Komentar Unik dengan tambahan background yang sudah di buat sendiri, serta untuk di terapkan di blog sobat. Bagi sobat yang belum tahu cara membuat gambar backgroud untuk di terapkan di kotak komentar blog silahkan ( baca : Cara Buat Kotak Komentar Admin Berbeda dengan sentuhan photoshop ).

Penting nich harap sobat cermati, pada dasarnya gambar hasil editan photoshop akan mengalami perubahan ukuran yang cenderung besar. seperti yang kita ketahui, gambar dengan ukuran besar apabila di letakan di blog akan mempengaruhi loading blog atau memyebabkan blog kita terasa berat. Oleh karena itu pemangkasan atau pengecilan ukuran sangat penting untuk menunjang blog kita dalam kondisi load yang cepat.

Untuk mengoptimize ukuran gambar kita bisa gunakan software baik secara online maupun offline. Di sini saya masih mempercayakan Image Optimizer untuk memperkecil ukuran gambar, yang bisa sobat akses di sini ( Image Optimizer ), sobat bisa mengecilkan ukuran gambar dan download aplikasi nya di sana.

Setelah gambar sudah selesai di pangkas ukuranya, sekarang tinggal di upload gambar tersebut ke tempat penyimpanan gambar atau foto online, disni saya menggunakan Photobucket. Uke persiapan awal sudah selesai waktunya kita melaju ke blog kesayangan sobat. Berikut adalah Cara Membuat Kotak Komentar Unik diantaranya :

1. Login ke Blogger
2. Masuk menu Rancangan/ Design => edit HTML
3. Back up tamplate untuk menghindari kesalahan fatal
4. Cecklist Expand Widget Templates
5. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atasnya

.author-comments {
Color: #0000ff;
font-size: 14;
background:url(http://i1188.photobucket.com/albums/z403/pattah121/admin-1.jpg)no-repeat;
border: 2px solid #7f7f7f;
padding: 3px;
}

warna hijau adalah warna teks atau tulisan
warna merah adalah ukuran font atau tulisan
warna biru adalah warna url gambar yang sebelumya sudah di opload di photobucket
warna merah muda adalah warna garis tepi atau border
6. Kemudian langkah selanjutnya cari kode
<data:commentPostedByMsg/>
</dt> dan tempatkan kode di bawah ini tepat di bawahnya

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

7. Lalu cari lagi kode <dd class='comment-footer'> kemudian letakan </b:if> tepat di atasnya 

8. Langkah terakhir simpan tamplate