Monday, May 14, 2012

Pesan formulir komentar keren

Berkat pengunjung blog ini dan juga Duypam jadi bisa update lagi nih, tapi mungkin besok dah bingung lagi mau posting apa hehee okeh kali ini saya ingin posting masalah Pesan Formulir komentar yang selalu mengikuti kemanapun komentarnya berada pada threaded comments okeh kayak gini nih modelnya.

Pesan formulir komentar

1. Masuk di dasbor blogger
2. Klik Rancangan / Template ( Baca Cara masuk di template blogger )
3. Centang Expand template widget
4. Cari kode seperti ini

<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='430' id='comment-editor' name='comment-editor' src='' width='100%'/>

Ingat : kode berwarna merah itu biasanya ada 2 ( dua )
Tapi Cukup anda cari kode yang berada di bawah kode <b:else/> seperti di atas

5. Setelah ketemu ganti dengan kode di bawah ini

<b:else/>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='430' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

6. Setelah itu Simpan kode css di bawah ini di atas kode ]]></b:skin>

#threaded-comment-form p {
    position: relative;
    background: #DD0;
    border: 3px solid #38F;
    padding: 10px;
    font-size: 13px;
    line-height: 1.6em;
    color: #000;
    margin-top: 30px;
    }

#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }

#threaded-comment-form p::before {
    border-top-color: #38F;
    border-width: 15px;
    left: 10%;
    margin-left: -36px
    }

#threaded-comment-form p::after {
    border-top-color: #DD0;
    border-width: 9px;
    left: 10%;
    margin-left: -30px
    }

7. Setelah itu cari kode seperti ini

document.getElementById(domId).insertBefore(replybox, null);

Setelah ketemu ganti kodenya dengan kode di bawah ini

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

8. Klik SIMPAN TEMPLATE

9. Silahkan anda isikan pesan formulir komentar anda caranya:
- Masuk ke Setting / setelan
- Lalu klik KOMENTAR
- Lalu scroll ke bawah dan lihat kata Pesan Formulir Komentar
- Nah isi kolom tersebut dengan pesan anda lalu klik SIMPAN SETELAN / Save Setting

Udah deh selesai sekarang anda tinggal menikmati model keren pesan formulir komentarnya, kalau kurang srek dengan warnanya silahkan ganti warnanya sesuaikan dengan blog anda.

70 komentar postingan ini

Ok, terima kasih banyak gan :D
Di coba dulu.. hehe

mksh sob atas inf0nya. ntr kpn2 ane coba. hehe

demonya sudah ada ternyata..
dapat dilihat langsung..

Ngeberatin ga gan :)) eh gan share tentang read more otomatis dong, read more otomatis yang ada di google semuanya ga bisa dipake, ada kode yang pas di cari ga ada! Mungkin agan ada cara lain gitu?

masih tetep ada ide ya rupanya. hebat!

kan udah aku balas komentar km kemarin masbro

hahaha iya nih berkat pengunjung blog ini

MANGTAFF
Aku suka dengan mas Zhinto..
Kreatiff BANGGAT..!!

nice tips sob...... berat gk ya tambahin ginian?

ini juga dpat dari vietnam :D

Wah, mantaf bener neh sobat ilmu pemrogramannya :)

Owhhh lupa :)) aku belum baca. aku liat dulu kemarin kamu bales apa yooo :)

Mantaf deh sob tutorialnya :)

saya lagi ingin masang emotin komentar nih, tapi yang ringan loadingnya

hoalllaahhh daeng2,,kyk gtu to cra buat nya,,,dh bwat q pnasaran tu kmaren2 ,,,mksih infonya...

ini ringan gan
http://sin1aja.blogspot.com/2012/05/masukan-gambarvideo-dan-emot-ke-dalam.html

wah keren juga nih formulir komentarnya sobat...

Makasih Zhin dah di share, sepertinya bagus buat di Blog ane...
coba dulu ke TKP....

Oia Zhin, kalo buat pesan formulir tulisan di setiap selesai postingan gimana zhin, contohnya ada tulisan "Artikel dangan Judul.......di buat oleh ini dan .........trimakasih dll", ada link artikel otomatisnya...

Baca postingan saya ini bang

http://sin1aja.blogspot.com/2011/03/menambahkan-kata-terima-kasih-di-bawah.html

keren mas nya.i like it.. Aku dari Yogyakarta, salam kenalya!

[blockquote]tes,,tes,,tes :D[/blockquote]

[blockquote]jagalah hati, jangan kau kotori..hahha[/blockquote]

oke sob kapan aq coba ya, thx berat *smile

gk bs sob.., aq dah coba dua kali...

Mantap mas brow... dah ane coba. terima kasih

Untuk ngasihkan gambar tu gmn ya.. ane lum paham.. tolong ya

Gambar gimana masbro..? apa gambar yang di dalam komentar..? kalau iya baca nih disini postingan saya

http://sin1aja.blogspot.com/2012/05/masukan-gambarvideo-dan-emot-ke-dalam.html

[img]http://reader-download.googlecode.com/svn/trunk/images/emo/smile.gif[/img]

wow

gan, kenapa kalau komentarnya masih kosong. Tampilan pesan formulir kerennya gaada. tapi kalau sudah ada komentarnya baru muncul ni fitur ?

mohon penjelasannya

Iya gan memang gitu, itu karena kode nya berada di bawah kode <b:else/>

[img]http://2.bp.blogspot.com/-e4Z9V7YgQrE/UDPEFlHK9_I/AAAAAAAABEo/NMDhbrAodvE/s1600/kk%2Bk0.png[/img]

[blockquote]Apakah kau mencintaiku..??[/blockquote]

[blockquote]Pertamax[/blockquote]

This comment has been removed by the author.

Aku kok gagal terus ya, aku udah ikuti saran dari kak taufik gak berhasil, ikuti dari sini juga gagal, kira2 salahnya dimana ya, tolong bantu kak, bingung aku ?

Terima kasih sharing ilmunya gan, udah di coba dan hasilnya sangat memuaskan... hanya saja ada sedikit pertanyaan nih, kenapa border n backgrounnya berubah (terlihat standar) pada saat ke halaman yang belum ada komentarnya satupun... gimana tuh solusinya gan...

trims :)

Ok, terima kasih banyak gan (y)
Di coba dulu.. heh

Bisa dijadikan referensi....
sangat berguna, thanks

postingan yg sangat bagus saya suka berkunjung ke blog anda

top markotop, huebat nice deh. daku pasang ya.[img]https://lh6.googleusercontent.com/-M4hK1rl3QO8/UG8WeQ-hNBI/AAAAAAAAAEQ/RBDYh0GxlMc/s16/anigifjaya.gif[/img]

keren sob blognya, thanks atas tipsnya

Kunjungan Baliknya Selalu Saya Tunggu, dan Jangan Lupa Untuk Menambahkan Saya Kedalam Lingkaran G+ Anda, Terima Kasih...

tapi setelah ada komentar trs ilang tuh kolom desain pesan komentarnya. caranya agar muncul trs gmn bang ??

Setelah saya pasang trik ini kok tombol thread comment'y nggak work yah???

Salam kenal deh, kunjungan perdana :)

mas tutorial yang terakhir membuat tombol balas pada blog saya jadi gak guna -_- jadi males deh,,
makasih dah berbagi sob..

Kalau profile image gak berani muncul, kenapa ya sob?

wah pengaturan di cssnya kayaknya tuh,
begini cssnya

.comments .avatar-image-container img {
max-width: 36px;
}

CSS nya sudah saya tambahkan, tapi pada gak berani muncul juga tu Sob, Kalau untuk menghilangkan avatarnya gimana Sob?

Lah katanya avatarnya gak muncul jadi ya gak perlu di hilangin, kan udah gak muncul

Sorry Mas, profile image komentator yang menggunakan ID bloggernya yang gak muncul. Maksudnya kalau saya sudah nyerah, sekalian aja container img-nya dihilangkan.

Oh gitu tapi meskipun memakai akun blogger atau tdk kontainer gambar komentar itu sama aja, entah apanya mungkin yang error sama blog sampean. atau ganti template aja #solusi sementara

Baiklah Mas Zhinto, terima kasih sudah ikut memikirkan, terima kasih juga sudah berbagi tips membuat pesan formulir komentar keren ini.

thanks banget gan
saya coba dulu yah
thank you sekali lagi

Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
EmoticonEmoticon