Februari 13, 2012

Membuat Keterangan Teks Plus Gambar Diatas Kotak Komentar

Situseo Blog : 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, tapi sepertinya untuk memasang widget diatas kotak komentar kurang bagus dari segi tampilan akan lebih menarik jika menempatkan widgetnya disebelah 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 :

Keterangan Teks Plus Gambar Diatas Kotak Komentar

Pada dasarnya script ini adaptasi dari script untuk Membuat Kotak Admin atau Author Box hanya yang membadakan dari segi penempatannya, jika penasaran bagaimana membuat kotak admin di bawah post, kalian bisa mng-klik link tersebut untuk mengetahuinya. 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: 365px;
}
.keterangan-komentar p {
margin: 0;
padding: 5px 0px 5px 5px;
border:1px solid #cccccc;
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='60' src='http://4.bp.blogspot.com/-IuUjxdWYYJI/TzaO0n-Y9RI/AAAAAAAAAfI/t5TN2iorA2Y/s1600/Good.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://www.situseo.blogspot.com/'>.</a></span></p>
</div>

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,

13 Diskusi untuk Membuat Keterangan Teks Plus Gambar Diatas Kotak Komentar

27 Februari 2012 15.29  

Terima kasih atas tutorialnya. Tapi ane ada sedikit masalah gan, tolonk di bantu yak. Gambarnya kok ga muncul?. Cara nampilin gambarnya gimana?.

28 Februari 2012 02.45  

@GB Magz : script masih berjalan normal, mungkin gambar gagal dimuat karena loading page terlalu berat akibat koneksi yang lambat

2 Maret 2012 13.21  

Bukannya sombong gan, tapi koneksi internet dirumah ane koneksi dewa :D Jadi ga ada masalah dengan koneksi. Nanti ane coba cek lagi deh. Niwei thanx, atas kesediaannya menjawab permasalahan ane. Keep posting gan :D

13 Maret 2012 07.23  

gan judul postingannya keren tuh bisa jalan keren...

gmn caranya????? :p

ajarin donk^^

keren2 sumpah...

please ajarin gan...?

14 Maret 2012 16.09  

@maxup01 : coba check ini http://situseo.blogspot.com/2012/01/membuat-efek-animasi-dengan-css3.html

17 April 2012 17.39  

Infonya sangat Membantu banget gann
Thanks yak :D
Mampir juga ke blog Ku :P

20 April 2012 00.58  

makasssih inponya gan... ane coba praktekin

21 Mei 2012 07.09  

bismillah
langsung praktek gan....
hehe
thaks ya gan....

20 Juni 2012 14.58  

tutorialnya keren sob..mampir juga ya???

9 Agustus 2012 08.49  

langsung dipraktek neh mumpung masih pagi.

10 Agustus 2012 23.02  

Berhasil, Gan. Makasih artikelnya..

1 September 2012 22.31  

mas ini blog sy www.indoking.blogspot.com
klo mau masukan gambar doang di atas kotak komentar gmna yah?

26 Oktober 2012 16.32  

mas saya mw nanya nih, saya sudah melakukan semua yang dia atas, dan berhasil, tp ada yang aneh, jika artikel yang sudah ada komentar, teks dan gambarnya gak muncul, kalau artikel yang gk ada komentar, teks dan gambarnya muncul, itu knpa ya mas.??

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top