Minggu, 26 Mei 2013

Cara Mudah Modifikasi Tampilan Pesan Komentar pada Blog

Modifikasi Tampilan Pesan Komentar pada Blog – Pada postingan kali ini saya akan share bagaimana cara merubah atau memodifikasi tampilan pesan komentar agar terlihat lebih menarik.

cats

Berikut ini cara merubah tampilan pesan komentar pada blog:

1. Pertama login ke blogger atau klik disini

2. Masuk ke Template pilih Edit HTML

3.  Selanjutnya cari code

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

dan ganti code tersebut dengan code di bawah ini

<div id='pra-comment'><data:blogCommentMessage/></div>

Catatan:

  • Biasanya terdapat lebih dari 2 code <p><data:blogCommentMessage/></p> dan ganti semua code tersebut.

4. Langkah berikutnya cari kode ]]></b:skin> dan letakkan kode CSS di bawah ini dah letakkan tepat di atas kode ]]></b:skin>

/*-- modifikasi pesan komentar--*/
#pra-comment{
    position: relative;
    background:#F3C5C5;
    width:100%;
    padding:10px;
    font:normal 12px trebuchet ms;
    text-align:justify;
    border:3px solid #AD3000;
    margin:0 10px 10px 0;
    margin-top: 10px;
    line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

#pra-comment::before {
    border-top-color: #AD3000;
    border-width: 15px;
    left: 10%;
    margin-left: -36px
}

#pra-comment::after {
    border-top-color: #F3C5C5;
    border-width: 9px;
    left: 10%;
    margin-left: -30px
}
/*finish modifikasi pesan komentar*/

3. Jika sudah pilih simpan, kemudian lihat hasilnya.

Demikian tutorial bagaimana cara memodifikasi tampilan pesan komentar blog. Semoga bermanfaat, dan tunggu tips dan trik blogging berikutnya.

Artikel Terkait

Blog ini dibuat atas ketertarikan dan minat saya dengan programming, komputer, blogging dan juga sebagai sarana untuk berbagi hal menarik lainnya.

54 comments

mantap tutorialnya ini yang saya cari-cari selama ini

mengatur posisi sudut lancip yang bagian bawah itu gimana gan ??

pada code css di atas cari code di bawah ini

left:10%;

Ganti nilainya sesuai dengan keinginan anda, sehingga posisi sudutnya berpindah. ingat ada 2 code yang seperti di itu dan ganti semua nilainya

Thanks Sob, berhasil di terapin di blog saya nie :)

Sama-sama gan, thanks juga dah mampir di blog ini :))

testing tampilan yang code rel tagnya gan sya harap agan kasih tahu gimana cara memasukkan gambar, video, dan codenya terimakasih salam kenal

mas, kalau supaya modifnya bisa seperti pesan komentar mas ini gimna yah ??

ganti code css yang di atas dengan code dibawah ini

#pra-comment{
position: relative;
background:#0070B0;
color:#fff;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #333;
margin:15px 0 15px 0;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #333;
border-width: 15px;
left: 82%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #0070B0;
border-width: 9px;
left: 82%;
margin-left: -30px
}

mas kalo menambahkan garis di balasan komentar gimana mas?

yang mas maksud garis yang mana ?
https://lh6.googleusercontent.com/g598m2Rk5okzeSM415c0Z6pknsx-U0Fgn_k8NQFRbDs=w632-h199-p-no

Gan biar ada tombol konversi kode di sini dan tombol OOT gi mana???

makasih,,,,,blognya agan sangat membantu,,,,,,,,,,,,,,,,,,,

kk ini maksudnya apa? /*-- modifikasi pesan komentar--*/
Di ganti sama apa?terserah bukan?nanti ini keliatan dimana? @-)

Tolong Jawab Secepatnya !!!
belum tentu aku bisa nemuin blog ini .... !!! [-(

kk kok aku gk ada emotion udah di pasang cuman gk ada emotionnya?

azzzzz gak jadi pake comment ah... 8-)

kalo untuk yang itu saya akan bahas pada postingan saya yang lain sabar ya.. :)

/*-- modifikasi pesan komentar--*/
ini merupakan komentar pada bagian code CSS untuk menandai codingnya agar mudah di ganti saat mau dimodifikasi ... kalo code tersebut juga gak apa-apa ko'
jadi untuk untuk membuat komentar pada code CSS cukup gunakan code
/*komentar anda*/

Komentar ini telah dihapus oleh pengarang.

mas cara buat tombol konversi di sini! dalam pesan komentar gimana

Salam kenal Sobat Menarik nih artikel nya.
Pesan komentar yang sekarang lagi marak
Di cari para bloggig, dan teman online lainya
Izin simak dan terapin di blog saya saobat..

Tapi saya bingung.? Artikel nya gak ada script membuat
Teks Catatanya gak ada tuh Mas Bro.. kayanya teman
di atas pada komentar gak pada nyadar cuma muji tapi
belum tau penerapanya,. maaf hanya masukan sobat
Itu pun apa saya nya saja yang belum ngerti...?

salam sukses yah Sob
http://karristaent.blogspot.com/

kalo untuk membuat teks catatan bukan melalui scrip sobat tapi melalui setelan pada blogger yakni Setelan >> Pos dan komentar >> Pesan formulir komentar

Thanks yah atas bantuannya saya coba dulu semoga berhasil

itu perlu pembahasan khusus mungkin saya akan share pada kesempatan yang lainnya terus simak ya gan

kok di blog saya munculnya di bawah kotak komentar ya?
ada cara biar bisa diatas kotak komentar seperti di blog ini nggak mas?

Source di atas saya gunakan untuk template yang umum soalnya masing-masing template biasanya memiliki source berbeda tergantung pembuat templatenya jadi mbak harus belajar dulu minimal dasar-dasar html dan css insyaAllah pasti bisa otak-atik templatenya. Ingat cukup dasar aja mbak gak rumit kok :)

Thanks infonya....sob..kalau rubah warna bacgroundnya atau menjadi transparan bagaimana yah??

ditunggu jawabannya di taugi.blogspot.com

sob cara buat OTT sama Konversinya gimana

Tinggal ganti aja code warna backgroundnya pada bagian code css contohnya background: transparent;
Semoga jelas

wih mantab sob..ijin comot :>) di tunggu kunjunganya ya sob www.remajamuslim88.blogspot.com

Keren Gan :>) www.hamzahfansyuri560.blogspot.com

sangan bermanfaat mas , sudah saya coba dan hasilnya bagus , monggo kunjungi blog saya di : duniasoftware-baru.blogspot.com
maaf mas masih newbie :)

Terima kasih tipsnya gan sangat membantu
Kunjungi juga ya
http://kodetemplate.blogspot.com

saya minta tolong om
http://4.bp.blogspot.com/-PffTKrl9lxQ/VSAZUXvv1RI/AAAAAAAABLU/npwdp9EZdjM/s1600/kotak%2Bkomentar.JPG
mudah2an muncul gambarnya om.
pertanyaan saya
1.bagaimana cara menyembunyikan kotak no.2 jadi cuma no 1 saja yg terlihat,jadi saat mau komen cukup tekan no 1.
2.bagaimana cara menghilangkan kotak no 1.terimakasih om,saya harap mau menjawabnya.maaf pemula om.

gunakan aja fasilitas hidden gan... atau tambahan code css

Komentar ini telah dihapus oleh pengarang.

caranya hiden gimana gan,tlg kasih code css nya gan,maap sy g bisa coding2an gtu,mkasih gan

kang saya mau tanya doongg, ko tulisan untuk menyisipkannya ga bisa ya ? kaya gini :

https://1.bp.blogspot.com/-Zi_0DBDoycs/V44_IxVI-qI/AAAAAAAAG6w/xty8nQpNdSM99hr94j_7KjTJwOofVsobgCLcB/s1600/zzz.png

saya tunggu jawabannya kang ^^

Trims bosku artikel sangat bermanfaat

gan boleh minta scrip komentar yang agan pake ini :)

Sama-sama bosku... senang kalo bisa membantu

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

EmoticonEmoticon