Membuat Keterangan Teks Plus Gambar Diatas Kotak Komentar

Tweet

Menambahkan keterangan diatas kotak komentar sangat mudah, kita bisa menambahnya melalui  menu Settings - Comments - dan mengisi keterangan pada Comments Form Message, dengan melalui menu setting tersebut kita hanya bisa menampilkan keterangan berupa teks saja tanpa bisa menambah dengan keterangan berupa gambar (image).

Script yang akan kita pasang adalah script untuk menampilkan keterangan gambar dan teks diatas kotak komentar, pada dasarnya script ini juga bisa untuk menambahkan atau untuk menampilkan widget diatas kotak komentar, untuk ruang diatas kotak komentar akan lebih bagus hanya diberi keterangan teks plus gambar (itu menurut saya terserah kalian untuk memilih dan mendesign tampilan), hasil dari keterangan teks plus gambar seperti screenshot dibawah ini :

Pada dasarnya script ini adaptasi dari script untuk Membuat Kotak Admin atau Author Box hanya yang membadakan dari segi penempatannya, Untuk membuat keterangan teks plus gambar (image) diatas kotak komentar kalian copy kode css dibawah ini dan letakan diatas kode

 ]]></b:skin>

caranya :

- Masuk Design - Edit HTML - Ceklis Expand Template Widget
- Untuk menghidari resiko, lakukan backup template terlebih dahulu
- Copy code css dibawah ini dan letakan diatas kode  ]]></b:skin>

.keterangan-komentar {
margin: 5px 0 5px 0;
padding: 0 5px 0 0;
width: 490px;
height: 100px;
}
.keterangan-komentar p {
margin: 0;
padding: 5px 0px 5px 5px;
border:1px solid #9999FF;
background: transparent;
}
.keterangan-komentar img {
float: left;
margin: 0 5px 0 0;
padding: 2px;
}

Kemudian cari kode  

<p><data:blogCommentMessage/></p>

dan letakan kode dibawah ini dibawahnya

<div class='keterangan-komentar'>
<p><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_lFR6u1_6D-1bkxj4F9kbx3qA_flufXST_Imw5mrqqtQv_uPvqG6JRQsAR4FmWcFYda_CmOS89tuGldw6vEjazXp9QzkUbxtXXrLOtgpPxk8pxMnn7SIAJfC5m_5GAZGSW8m6RAVioSh/s1600/provil+komentar+gue-galau.blogspot.com+size+75X75.png' width='60'/><span class='Apple-style-span' style='font-family: Arial, Helvetica, sans-serif; font-size: normal;'>Terima kasih telah membaca <b><a expr:href='data:post.url'><data:post.title/></a></b>, jika ada yang kurang faham, kalian bisa bertanya melalui komentar, Terima kasih<a href='http://gue-galau.blogspot.com/'>.</a></span></p>
</div>

Merah bisa kalian ganti dengan URL gambar kalian sendiri
yang jelas berukuran 75X75 
Save template kalian dan lihat hasilnya

Biasanya kode <p><data:blogCommentMessage/></p> ada 3, pilih yang pertama atau yang diatasnya ada kode <h3><data:postCommentMsg/></h3> jangan yang mobile, jika ukuran kotak keterangan komentar berbeda dengan kotak komentar, kalian bisa rubah pada bagian ccs bagian di beri warna putih.

Semoga bermanfaat,