Membuat Pesan Komentar Di Bawah Editor Komentar

Membuat Pesan Komentar Di Bawah Editor Komentar

Bola Hero Gawai

Membuat Pesan Komentar Di Bawah Editor Komentar

Pesan Komentar Di Bawah Editor Komentar
Membuat pesan komentar di bawah editor komentar ini sebenarnya untuk mengatasi atau mengisi jarak bawah editor komentar baru blogger dengan form komentar yang cukup jomplang.

Ini diawali oleh +Kang Ismet dengan menaruh ucapan terima kasih sudah berkomentar dalam bentuk gambar yang diposisikan di sebelah kanan bawah form komentar dengan mengaturnya pada css editor komentar sebagai background menggantikan loader editor komentar.

Namun karena saya ingin mempertahankan gambar loader editor komentar, maka saya coba cara lain untuk mengatasinya.

Nah bagi yang tertarik untuk mencobanya, silahkan ikuti trik di bawah ini.

Untuk membuat pesan komentar di bawah editor komentar ini kita akan menambahkan sedikit kode html yang tentunya diletakan di bawah kode editor komentar di dalam class comment_form.

1. Bagi yang telah menggunakan treaded comment hack.

Silahkan cari kode seperti ini di daerah <b:includable id='comments' var='post'>
   <div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>  
      <div class='comment_emo_list'/>
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>    
Kemudian tambahkan kode di bawah ini 
<div style='float:right;margin-top:-54px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>
Untuk kata-katanya silahkan rubah sesuai dengan yang Anda inginkan. Sehingga penampakannya seperti di bawah ini
   <div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>  
      <div class='comment_emo_list'/>
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
    <div style='float:right;margin-top:-54px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>
  </div>
 </b:if>
</div>    
Silahkan atur pada margin-top jika kotaknya terlalu ke atas, atau margin-right jika kotaknya terlalu ke kanan. Terakhir silahkan SAVE templatenya.

2. Bagi yang menggunakan threaded comment blogger biasa.

Silahkan temukan kode seperti di bawah ini
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <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%'/>
    <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='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </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>
Tambahkan kode ucapan terima kasihnya di atas kode </div> paling bawah, jadi seperti kode di bawah ini
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <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%'/>
    <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='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </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 style='float:right;margin-top:-54px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>  </div>
</b:includable>
Kemudian cari kode seperti di bawah ini
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <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%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <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%'/>
    </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>
Sama seperti di atas tambahkan kode ucapan terimakasihnya di atas kode </div> paling bawah sehingga penapakannya seperti di bawah ini.
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <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%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <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%'/>
    </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 style='float:right;margin-top:-45px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>  </div>
</b:includable>
Terakhir SAVE templatenya. Selesai...

Nah kalau yang ingin menggunakan gambar silahkan tanya ke Kang Ismet ya...hehehehe

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

77 Comments Add Comment

Pertamax nggak ya.??

Cakep dan apa elegan. Kalau posisi di center bagus nggak Bnag Adhi. (Y-ordinatnya sama).
Jadi pingin ngurusin kotak dan pesan komentar neh, belum beres2 dari dulu punya saya bang Adhi...

Terima kasih

Balas

Silahkan di kutak-katik aja di style htmlnya, coba ganti satuan px pakai persen untuk margin right-nya jika ingin di tengah.

Balas

keren memang kang, saya juga sudah menerapkan tips ini, TOL dari tempat kang ismet,

Salam kenal aja kang

Balas

Iya mas ini juga idenya dari kang Ismet hehehe :D

Balas

mas kalau tulisan "terimakasih sudah berkonentar" muncul ketika tombol publikasikan di klik bisa ngak mas?

Balas

Kalau itu mah sepertinya sudah dibahas sama kang Ismet untuk ucapan terima kasih pada komentar namun muncul pada body komentar... harus diutak atik lagi hehehe...coba aja gabungkang triknya mas... :D

Balas

Saat ini saya mau apa adanya aja deh. hehe :D

Balas

keren sekali pak kompi.
untuk blog yang pengen progersif wajib mengikuti updat dari pak kompi.
kalau saya pengen yang standart aja pak.

Balas

ini dia yang saya cari om kompi, thanks banget :)

Balas

Cara yang sangat bagus mas :D bisa digunakan sebagai bentuk apresiasi buat yang sudah berkomentar :D

Balas

Hehehehe biar ga ribet ya kang heheehe :D

Balas

Iya mas tergantung masing-masing orang aja heheheh :D

Balas

Sama-sama hehehe akhirnya nemu juga ya :D

Balas

Ya betul sekali mas, tujuannya seperti itu :)

Balas

tuh kan akhirnya meluncur juga |o|

Balas

Bagus, menarik dan sangat membantu buat saya nih Kang Kompi
buat pelengkap form komentar di blog saya, izin simak dan izin
Belajar terapkan di blog saya Kang Kompi Hatur nuhun pisan Kang?

Balas

Punten ngiring pangpayuna, Kang Kompi fresh pisan artikel nya
Kebetulan ini artikel yang saya cari, mohon bimbinganya
untuk belajar menerapkan di form comments blog saya terima kasih

Balas

Silahkan kang Saud... langkung sae dipermak deui biar tambah sae :D

Balas

Terima kasih sudah berkomentar

Balas

Hahahaha aya aya wae kang Beben mah :D

Balas

kalau kita mau tambahin background dan ubah font text gimana mas kompi?

Balas

yang kayak seperti kang ismet pake itu mas

Balas

Tinggal tambahin background warna dan jenis fontnya pada style html-nya (pada kode yg berwarna merah dia atas)

Balas

kalau untuk background form komentarnya, tambahkan background warna pada css comment_form nya.

Balas

terima kasih mas, uji coba dulu :)

Balas

Mas saya mau tanya nih, bagaimana cara membuat sitemap.xml dan robot.txt di seoanalyser menjadi found seperti blog ini ?? soalnya blog punya saya yang "www.mestiqui.com" masih not found mas :) mohon pencerahannya :)

Balas

terimakasih yeuuuhhh..... :) saya ga pake image lagi kang htmlnya juga beda posisi, tapi hasilna sami :)

Balas

Heheheeh terima kasih sudah berkomentar wkwkwkwkw :D

Balas

uji coba telah berhasil mas, terima kasih :-bd

Balas

Siiiipp sudah saya cek jadi bener-bener warna cewek hehehe :D

Balas

mas kompi, ini komennya kok tinggal google account aja? gimana cara menyembunyiin yang lainnya?

Balas

oh ngga jadi deh mas, udah nemu.. *maklum aja ngga pernah utak atik settingan blogger :)

Balas

banyak bener om?
tapi oke.. tak coba dulu :D

Balas

makanya jangan cuma otak-atik html sama css :p

Balas

Silahkan kang Saud mudh-mudah tiasa kaharos artikelna :)

Balas

Hehehehe kodenya dikit cuman disatuin sama contoh biar ga bingung nerapinnya :D

Balas

gan ,ane baru beli domain nih,apakah alexa sama PR nya hilang? terus gimana nih????

Balas

Iya mas PR sama Alexa menjadi nol lagi. Coba simak postingan saya di sini http://www.kompiajaib.com/2012/11/hal-yang-perlu-diperhatikan-setelah-ganti-domain.html

Balas

Siap sudah saya praktekan mas :D hehehe

Balas

hehe.. tp background nya masih blm berhasil mas, td coba saya tambahkan tp malah berantakan, mungkinkah karena ada comment-editor width:103% ini yang jadi masalah?

Balas

kok iklan google adsense ane ilang juga gan? gimana nih bantuannya???

Balas

Iya untuk adsense juga ilang karena domain blog sudah berubah, jadi perlu daftarkan untuk domain barunya. Itulah resiko-resiko ganti domain.

Balas

wah saya belum bisa menerapkannya mas.. saya masih pake hp. dan lemotnya minta ampun deh.. hehehehe.. saya nyimak saja dan mencuri sedikit ilmunya mas kompi ajaib saja hehehe

Balas

Wah ada mas Nady hehehe Silahkan mas sekiranya ada yang bermanfaat hehehehe :D

Balas

kalau saya memasangnya di CSS saja mas :)

Balas

Hardcoding Blogger
Pusing mas :D

Balas

wah mantep kang tutorialna.....
hatur thank you ahhhhh.............

Balas

Iya mbak...seperti biasa banyak jalan menuju ke Roma :D

Balas

Pelan-pelan aja mas :D

Balas

huwaaa kodenya panjang banget :D .

Balas

harus nunggu brp lama gan agar adsense kembali lagi? apakah jumlah penghasilan ditambah yg lama?

Balas

ternyata cara ini tidak dapat dikasih background mas, kalau kita kasih background maka background itu ketutup tulisannya, jadi terpaksa saya lepaskan :)

Balas

sudah dicoba dan berhasil sempurna...
tapi di lagi dipasang d blog demo, mudah-mudahan templatenya akan cepat selesai :)

Balas

Mohon bantuannya mas :)

Balas

Mantaapp mas.. udah berhasil kepasang...
Terima kasih mas..

Balas

Leres Pisan Kang Kompi, biar kelihatan lebih endah dan menawan
Tapi yang ini, Lebih dari Cukup koq Kang, Bagus dan Elegant
Di ajar otak atik nya Kang Abi.. hatur nuhun pisan Kang Kompi.

Balas

Hehehee itu panjang karena saya satukan dengan kode-kode contohnya :D

Balas

Berhasil dengan baik.

kang, jika mau membuat tombol pada pesan komentar hack v3 gimana?
kaya di blog ini loh :D

Balas

Saya pakai tutorialnya kang Ismet, coba saja di kang Ismet cari cara membuat tombol di pesan komentar.

Balas

Coba di sini http://blog.kangismet.net/2013/05/membuat-judul-pada-pesan-formulir-kommentar.html

Balas

Ehh, ternyata bisaa..
Maaf kang sudah merepotkan :D
Selamat beristirahat..

Balas

Kang, Cara buat tombol konversi kode sendiri gmn yah ? soalnya ane minat banget niih ...

tolong pencerahannya yah

emilseo.blogspot.com

Balas

Hehehee tuh di atas (kang Firman Ardyansyah) nanyain juga, coba cek di kang Ismet.

Balas

jam 3:15 a.m.
Siap praktek "Menambahkan Pesan Komentar dibawah Editor.
Nanti saya kesini lagi Bang Adhy.
Kebetulan baru sempat ini, walau soca parantos lima watt ieu.... :D

Balas

Maaf kang saya mau nanya lagi, maaf bila mengganggu tapi kalo tidak ditanyakan takut panasaran :D

Kumaha cara homepagena gambar sareng judulna doang?

Balas

Kang, artikelna teh judul sareng gambar doang? :(
bisa dibantu teu kang kompi?

Balas

Untuk merubah halaman depan blog lumayan banyak yang harus dirubah kang...

Balas

gapapa kang walaupun banyak yang harus dirubah..

Balas

ane selalu gagal kang buat judul pesan formulir sama tombol-tombol pesan .

gimana yah gan biar bisa kayak blog akang ada tombol konversi nya ..

Balas

ngga kang ismet, ngga kang andhy bikin saya bingung mau nyobain resep yang mana :-bd

Balas

makasih mas :)

kunjungan perdana mas :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×