Membuat Pesan di atas Form Komentar - Ada beberapa pertanyaan dari sahabat, tentang bagaimana cara membuat atau memodifikasi kotak pesan di atas form komentar. Hal ini mungkin sudah sering terlihat pada blog-blog yang menyajikan tutorial blogger.
pesan komentar
Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, atau pun lainnya. Hasilnya akan tampak seperti gambar di bawah ini :

pesan form komentar

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.

Langkah 1 : Cari kode <p><data:blogCommentMessage/></p> biasanya ada 4, cari yang ke 2 dan ke 4. Kurang lebih kodenya seperti ini :
<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='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
tambahkan pada kode diatas :
<div id='threaded-comment-form'>
...kode di atas...
</div>
hasilnya kurang lebih seperti ini :
<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='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan.

Langkah 2 : Cari kode :
document.getElementById(domId).insertBefore(replybox, null);
ganti dengan kode
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Langkah 3 : Untuk mempercantik tampilan, tambahkan CSS di atas ]]></b:skin>
/*-- Modifikasi Pesan Komentar--*/
#threaded-comment-form p {
    position: relative;
    background: #4085b8;
    border: 3px solid #5899c9;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 11px;border-radius:2px;
    }
#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: #5899c9;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #4085b8;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }
Simpan Template.

Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klik Tambahkan.

pesan form komentar

Tulis pesan sobat pada kolom isian, kemudian klik Simpan Pesan di pojok kanan atas dasboard.

Semoga bermanfaat.

158 komentar

Awww Si akang Ganti Template. Pantes Jarang Post. Keren Nih Template..

Jangan Lupa Kunjungan Balik .. Sarannya Bang Buat Blog Saya.. <<< Bisa Bantu Bila Berkenan..

Thanks Kalo Mau bantu..

Balas

ayoo,,kang terus posting buat tambah" ilmu..hahahay

Balas

makasih banyak kang ismet ane sudah tambahin kang , hehehe ..

Balas

Berguna sekali mas, terimaskasih telah berbagi ilmu yang bermanfaat ini. Saya akan coba terapkan pada blog saya :)

Balas

Ini dia yang saya cari-cari, thank you :)

Balas

mangap, kang...diluar tema, templatenya baru yak?
ada link donglotnya 'tue, kang? :)

Balas

Teeima kasih tutornya Kang, Happy Blogging. Salam.

Balas

Masukan buat Silebo Blog :

1. Edit meta tagnya yang ada di template
<meta content='YOUR BLOG DESCRIPTION HERE' name='description'/>
<meta content='YOUR BLOG KEYWORD HERE' name='keywords'/>

2. Edit Preferensi penelusuran di Dasboard

Balas

hehehe... siap komandan

Balas

Oke sob, maaf baru posting..

Balas

Silahkan.. semoga berhasil

Balas

sama2 sob... semoga bermanfaat

Balas

teu aya... :) hasil edit, bukan hasil download

Balas

Sama2 sob... happy blogging too

Balas

terimakasih banyak kang ismet, sudah saya pakai di blog saya http://www.tuliskan.com/ dan berhasil, keren kang tampilanya:D btw, postingan selanjutnya bikin yang topiknya seo dong kang, hehe, hanya sekedar saran:)

Balas

siap sob..Insya Allah kedepannya di coba, soalnya ga jago SEO nih ;)

Balas

Akhirnya diberikan juga tutorialnya ya Mas seperti pesan komentar diatas form komentar ini Mas,jadi lebih menarik jika kalau diperhatikan khususnya ketika mau berkomentar.

Balas

di Edit HTM, coba cari kata2 itu dan ganti

Balas

betul sob... supaya tau aturan dan tatacara bertamu :)

Balas

Pakai cara ini jadi lebih stylish ya form komentar. Boleh ya kang saya bookmark dulu, kapan-kapan mau saya coba sebagai sample. Makasih kang! :)

Balas

di blog aku ga bisa gan :(

http://nandarious.blogspot.com/

Balas

say amau coba kang, kemarin gagal maning-gagal maning kang....

Balas

Mantap,...... !
Suasana blog jadi ramai bila ditambahkan pesan seperti diatas, thanks tutornya kang :D

Balas

Fungsi Nya Buat Apa Kang..?

Buat Description Blog ..?

Balas

Gantinya Gimana..??

Hasih Contoh Ya Kang..!!

Balas

Iya, buat deskripsi sama kata kunci.. contoh

<meta content='Silebo Blog - Paling Unik dan Aneh' name='description'/>
<meta content='silebo, aneh, unik, ilmu pengetahuan, teknologi' name='keywords'/>

Tambahkan atau edit lagi kode di atas

Balas

kelihatan lebih keren ya kang kalo ada backgroundnya gitu..kapan2 mau coba kang,,

Balas

ijin bookmark kang, buat blog saya yg satu lg...
hatur nuhun...

Balas

silahkan sob... betul banget supaya stylish

Balas

coba di ulang lagi sob, pasti bisa

Balas

wkwkkwkww... mangga kang

Balas

sama2 sob.. semoga bermanfaat

Balas

kenapa ga sekarang aja :)

Balas

Lagi rada sibuk hari2 ini..

Balas

Sep Gan Ane Coba ..

Munculnya Di mana..?

Balas

Mas, bila hanya ada dua kode <p><data:blogCommentMessage/></p> ini bagaimana ? saya harus edit satu saja atau keduanya ? terimakasih sebelumnya sudah menanggapi komentar saya.

Balas

tambahkan saja dua-duanya, yang pertama yang diatasnya ada

<b:else/>
itu muncul ketika reply, dan yang atasnya

<h4 id='comment-post-message'><data:postCommentMsg/></h4>
itu sebelum ada komentar pada postingan

Balas

hatur nuhun kang postingannya bermanfaat sekali :D
Minta komentar akang tentang blog saya http://tenlibrary.blogspot.com

Balas

punya saya kok gak ada kode ini ya kang ..

[catatan]document.getElementById(domId).insertBefore(replybox, null);[/catatan]
:(
mohon bantuannya ..

Balas

Coba carinya segini.. ada ga
document.getElementById(domId).insertBefore

Balas

terimakasih banyak kang atas infonya benar2 berguna, saya akan mencobanya :)

Balas

sama2 sob.... semoga sukses

Balas

terima kasih bung...
sangat-sangat membantu :D

Balas

Ow begitu caranya,simple dan praktis. . :D
Ijin pasang di blog saya gan. .
terimakasih tutorialnya. . :-d

Balas

silahkan gan.. gampang ko.. :)

Balas

sama2 bung... kaya bung karno ya :)

Balas

Kalau membuat emotion'nya jadi di atas kotak pesan gimana kang? :D
mohon penjelasanya. . ! ! =(

Balas

mas maaf sebelumnya ,saya sudah coba tutorial di atas dengan teliti ,tetapi kenapa tidak ada perubahan juga mas di pesan form komentar...

tolong bantuan nya yah mas ..

Balas

yes ketemu juga tutorial nya, tapi klo mau bikin mirip akang kaya gini gmn kang, biar ada kotak kotak di setiap komentar nya :D :D biar rapih gitu blog saya

Balas

Biar agak gimana gitu ya gan .. haha

Balas

ooo dari sini sumbernya.,. keren kang

Balas

tinggal edit CSSnya ko..

Balas

ya... begitulah kira2nya.. :)

Balas

ditungguaja tutornya sob

Balas

kang gimana caranya supaya pesan,kotak komentar dan komentar lebarnya sama kayak punya akang.
[img]http://2.bp.blogspot.com/-3WLA5AtAhqs/UbbOFFGrR3I/AAAAAAAAB14/HFijNPpBXjo/s320/sa.png[/img]

punten kang sateacanna abdi seueur naros :)

Balas

teu sawios kang... simpan kode ini diatas ]]></b:skin>
#comment-editor {width:103% !important;}
sesuaikan persentasenya..

Balas

ayeuna man tos rata kang, hatur nuhun pisan kang.:)

Balas

Aku cari-cari ternyata ada disini :D

Balas

sip kang totorial yang sangat membantu

Balas

Kang Cara ubah style Font nya gimana?

Balas

tinggal tambahkan kode font-family:Tahoma, Arial, sans-serif itu hanya contoh.. pada #threaded-comment-form p {

Balas

CTRL+D dulu deh kang, udah 3 watt nih mata... @@,

Infonya menarik kalo aku baca atasnya, ga tau bawahnya... |o|

Balas

Kang.. Kok gak berhasil ya di blog saya -_-

Balas

Butuh bantuannya dong kang..

Balas
Komentar ini telah dihapus oleh pengarang.

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

Adanya itu kang.? Kaga apa-apa kalo diganti.?

Balas

Kang, kok saya udah tulis begini [img]http://prntscr.com/1dmrta[/img]
Eh malah jadinya begini [img]http://prntscr.com/1dms3e[/img]

Balas

kata2nya harus di parse dulu, tulis aja di Notepad dulu, parse (encode) disini http://blog.kangismet.net/2010/05/blogger-ad-code-converter-javascript.html, baru simpan pada form komentar.

Balas

kok, punya saya tidak pas lebarnya sama seperti post blog saya gimana cara atur lebarnya,

Balas

oh, sudah makasih ya kang ismet, tapi satu hal cara mengatur kalimatnya biar tidak nyrempet pesan komentarnya harus diberikan kode apa, margin kah

Balas

ini kang punya saya http://3d-blog.blogspot.com/

Balas

Thanks kang Ismet , berhasil terpasang di Blog ane .

Balas

Kalau punya saya ada tiga itu kode itu nya
Yang saya edit yang mana saja ? semuanya atau bagaimana bang ?

Balas

Terima kasih bang,
permasalahan sudah beres.

Good luck bang.

Balas

kang ko pesan komentar yg pnya kang ismet bisa masukkin button gimana caranya ya ?

Balas

Tempatna dimana eta kang?

Balas

makasih banyak nih gan, ane numpang copas ya artikelnya ? ☺

Balas

Kang,naha nya eta anu tag na teu katinggal di blog abdi mah

Balas

Kang Supaya Konversi Kode nya munculnya pop up gimana kang ya?

ditunggu jawabannya kang!

Hatur Nuhun

Balas

Cara membuat tulisan seperti ini kaya di komentar akang gimana • Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode, gunakan tag ... KODE ...
• Untuk menyisipkan kode panjang, gunakan tag ... KODE ...
• Untuk menyisipkan catatan, gunakan [catatan].. TEKS ...[/catatan]
• Untuk menyisipkan gambar, gunakan [img]URL GAMBAR[/img]

Balas

kan udah ada diatas caranya... teksnya di parse dulu

Balas

Tapi di Blog Saya belum ada kaya kode "code" gitu . . atau "pre" jadi kalau saya encode apakah nanti langsung bisa?

Balas

Nih mas, masa jadi seperti ini , ini sebagai contoh pada kode img ( [img]http://i43.tinypic.com/fm2gee.png[/img]

Balas

trima kasih kang ismet , ane sudah berhasil ,,
btw , gimana cara membuwat lingkaran cirles ( google PLUS folloower ) yang melayang ( stiky ) di sidebar , kayak punya anda kang ....?

Balas

tambahkan dulu CSS dan JavaScript seperti pada tutorial ini http://blog.kangismet.net/2013/08/memasukan-gambar-youtube-kode-pada-komentar-blogger.html

Balas

Cekidot di sini sob http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html

Balas

Alhamdulillah Berhasil , makasih kang :)

Balas

wew, nih tutornya sangat bermanfaat kang,thanks ya udah share!

^_^

Balas

Berhasil gan makasih :D

www.kevin-432.blogspot.com

Balas

Bermanfaat banget kang ismet semua artikelnya, saya belajar blog dari sini kang. update terus artikelnya ya kang

Balas

Kang saya sudah ikutin tutorial di atas, sudah jadi juga, tapi saya mau tanya, untuk merubah ukuran FONT, WARNA, dll pada catatan komentar, dan mengatur posisi tata letak bagaimana yah ????
karena hasil yang muncul di blog saya terlalu mepet ke kolom komentar seperti di bawah ini . . .
[img]http://1.bp.blogspot.com/-RMvpRbIYdcA/Ugte8KC8GFI/AAAAAAAAA5Y/mDHeJP-xMbE/s1600/hasil+sementara+kolom+komentar.bmp[/img]

terimakasih kang, mohon pencerahan nya

Salam
DAVID RAJA
www.DavidRaja.com

Balas

tinggal edit CSS yang ada diatas (postingan)

Balas

saya cuma bisa edit UKURAN FONT nya aja KANG, klo mau naikin lebih ke atas lagi gimana yah kang, soal nya di blog saya kolom pesan nya terlalu mepet ke bawah.
mohon pencerahan nya kang.

Balas

kang,
Nice inpo
thank to share
oiya kang Bonus tombol Konvert Nya mana???
yang kayak [KONVERSI KODE] [TOP KOMEN]
Mohon dibantu
kasih kode HTML NYa Donk

Balas

tinggal liat aja source punya saya :)

Balas

Wah..
Sangat bermanfaat Om
Sudah saya terapkan di blog saya dan berhasil

Terima kasih

Balas

Luar biasa perkembangan blog ini. Seingat saya 3 bulan lalu ranking Alexa-nya masih di angka 40.000-an tapi sekarang sudah 22.000-an. Tidak salah kalau sering update postingan dengan artikel yang sedang dicari oleh banyak orang menjadi senjata andalan untuk meningkatkan jumlah pengunjung dan merampingkan Alexa rank. Terima kasih juga saya ucapkan atas terbitnya artikel dengan judul Membuat Pesan di Atas Form Komentar.

Balas

terimakasih telah menyimak.. ya memang itu salah satu kuncinya sob :)

Balas

sukses bang :) thanks buat tipsnya. Maaf Kang gak apa-apa kan kalo saya copy source kodenya :)
[img]http://3.bp.blogspot.com/-3pc6rTT5vNg/UiP2igsi-HI/AAAAAAAADA8/o7jzHAJDUEA/s1600/anaktimor17.bmp[/img]

Balas

Wah keren sekali nih, saya mau tanya sedikit, untuk menambahkan link bagaimana yah mas?. seperti comment from blog ini, ada "konversi Kode di Sini" "Top Komentar" dan "Forum Diskusi" terima kasih sebelumnya.
Dan minta masukannya sedikit untuk blog saya :)

Balas

cek disini http://blog.kangismet.net/2013/05/membuat-judul-pada-pesan-formulir-kommentar.html

Balas

kalo gk ada kode [pre]<p><data:blogCommentMessage/></p>[/pre] gmn ya ??

Balas

ga ada tag 'p' ga apa2 ko

Balas

wah mantap nih, izin coba dulu yah kang !

Balas
Komentar ini telah dihapus oleh pengarang.

kok punya sy ga bisa di terapin sih kang, code ininya <p><data:blogCommentMessage/></p> cuman ada 2, apa sy salah nempatinnya?
code </div>nya di taroh di bawah apa di atas code <b:else/>?

Balas

jadi iri sama rank blog nya kang ismet. tutornya bagus2 sih hehe. sukses kang
www.jordanvengeance.com

Balas

kang tolong di blz dong....code ini<p><data:blogCommentMessage/></p>
kan cuman ada 2 di template sy, pas sy terapin kok munculnya hanya pd artikel yg ada komentarnya...sedangkan artikel yg tak ada komentarnya ga muncul...please kang mohon bantuannya,,,

Balas

pasang aja di dua2nya sob atau kalau ada tanpa tag p juga ga masalah, yang penting ada

<data:blogCommentMessage/>

Balas

code </p> uda sy buang tetap aja ga ngaruh kang....
sy yakin sebenarnya akang bisa mecahkan masalah ini tapi mungkin masih kurang paham apa yg sy maksud....sy udah ikutin langkah2 di atas tapi berhasilnya hanya di artikel yg ada komentarnya, sedangkan artikel yg ga ada komentarnya kotak pesan malah tak muncul...ini sy ambil contoh code template sy:
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>





<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='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<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='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>





</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>


apa ada yg salah atau ada yg kurang codenya kang...saya coba buang code ini <b:else/> eh kotak komentar ama kotak pesannya hilang...satu lagi yg sy bingung code seperti ini <h4 id='comment-post-message'><data:postCommentMsg/></h4> tidak ada di template saya adanya hanya di template bawaan blogger...maaf ya kang jadi ngerepotin, sy ga bisa tidur cuman gara kotak pesan belum berhasil di terapin...

Balas

sy harap akang mengerti...sy pengen banget kotak pesan ini berhasil diterapin...

Balas

coba kirim file xml yang asli ke contact@kangismet.net

Balas

sy kirim aja kang skalin sama templatenya biar mudah di mengerti, n uda sy kirim kang templatenya sy kasih format xml

Balas

dari tadi sy kotak-katik gimana supaya bisa muncul tapi belum berhasil juga uda 2 hari ni kang belom nemuin solusi juga...mungkin emang harus di tambahin code perintah lagi kali ya....itu file sy gimana kang uda nemuin solusinya?...

Balas

wah makasih kang infonya akhirnya sukses di blog saya

fajrimansyahshare.blogspot.com

Balas

makasih kang ismet tutorial nya ^_^
sudah berhasil terpasang ^_^

culkiboy.blogspot.com

Balas

kang bikin isi tombol konversi kode itu gmn?

Balas

kang, pada langkah ke dua, di blog saya tidak ada kodenya, gimana nih?

Balas

bagus post nya mungkin nanti ane coba. mampir disini juga ya masbro ? http://wahyuromadhonirendraprasetyo.blogspot.com/

Balas

<a class='small-button' href='http://blanter-forever.blogspot.com/p/download.html' target='_blank'>Blog Selanjutnya</a>

Balas

wahh berhasil kang,
thanks atas tutornya,,.

Balas

kang mau tanya nih,agak melenceng dikit tapi masih mengenai komentar nih.kenapa ya diblogku setiap mau klik balas atau tambahkan komentar,kursor gak langsung mengarah kekotak komentar tapi kehalaman atas dulu nggak kayak punyanya kangismet ini.tolong solusinya apa yang harus ditambahin?.ini blogku www.wongcungkup.blogspot.com

Balas

ijin copy script dan mencobanya bos

Balas

mantap mas,
udah ane pasang :P

Balas

kang , punyaku nggak ada kode ini, aku cari yang mirip juga bingung yang mirip itu yang kaya apa :3

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

Balas

Kang,, kode css yg bikin sudut lancipnya itu apa kang,,?
Soalnya pengen ane pindahin posisinya..

Balas

itu namanya judo element wkwkwk

[code]
#threaded-comment-form p::before {
border-top-color: #5899c9;
border-width: 15px;
left: 10%;
margin-left: -35px;
}
[/code]

Balas

Bang, Kok Saya Pasang Gabisa yah ?
Tolong Pencerahanya kang

Balas

cari kata margin pada css kemudian ubah nilanya..

Balas

mas di saya kog g bisa css nya y mas??
mhon bantuannnya...
http://project-saya.blogspot.com/

Balas
Komentar ini telah dihapus oleh pengarang.

Kang punya saya kok cuma muncul panah saja ya?

Balas

Nuhun Kang cara pasang emotion di komentar kumaha?

Balas

salam kenal kang, bisa ga komentar terbaru (komentar yang diatas 200) ditampilkan pada laman pertama.

Terima kasih.

Balas

kalau semua sudah di terapkan tetapi pesan forulir komentar tidak ada bagaimana kang

Balas
Komentar ini telah dihapus oleh pengarang.

trimakasih banyak kang ismet , sudah saya terapin dan seperti dora berhasil berhasil hore |o| , sekiranya kang ismet punya waktu mohon mapir ke blog ecek-ecek saya dan di tunggu koreksi tentang template nya =D

Balas

belum berhasil gan, Mohon tutorialnya yg lengkap, maksudnya ini gmna ==> "Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan"

Balas

mantap kang ismet posting terus kang bagi bagi ilmu biar berkah

Balas

jos gandos terimakasih kang ismet

Balas

Poskan Komentar


×
Chat