Cara Membuat Pesan diatas Kotak Komentar

Cara Membuat Pesan diatas Kotak Komentar - Ficri Pebriyana
Cara Membuat Pesan diatas Kotak Komentar - Menambahkan atau membuat pesan komentar diatas kotak komentar memang sangat bagus dan penting untuk mengingatkan para komentator blog, baik itu peraturan berkomentar ataupun larangan berkomentar. Menambahkan pesan komentar pada blog sangat cocok bagi blog yang memiliki komentar yang banyak dan ini bisa dijadikan sebagai pengingat kepada para komentator blog kita tentang aturan berkomentar pada blog kita.

Membuat pesan komentar diatas form komentar terkadang ada sedikit kendala terutama ketika sebelum ada komentar pada sebuah artikel dan sesudah ada komentar pada sebuah artikel, kendala atau masalah yang sering dialami adalah ketika artikel belum ada yang berkomentar ternyata pesan komentar masih ada diatas kotak atau form komentar, tetapi ketika artikel tersebut sudah ada yang berkomentar maka pesan komentar pindah jadi dibawah kotak atau form komentar, inilah kendala atau masalah yang sering dialami oleh para Blogger, dan pada kesempatan kali ini blog Ficri Pebriyana akan membuat artikel mengenai tutorial membuat pesan komentar diatas kotak komentar sekaligus membahas mengenai mengatasi pesan komentar menjadi dibawah kotak komentar.

Dalam pembahasan kali ini saya akan sekaligus memodifikasi kotak pesan komentar sehingga lebih terlihat bagus lagi dan lebih cantik lagi dengan ditambahkan beberapa kode CSS kedalamnya. Tidak hanya kode CSS saja yang ada didalamnya tentu didampingi dengan kode HTML yang menjadi foktor utama dalam pembahasan membuat pesan komentar diatas kotak komentar. Oke langsung saja lihat tutorial cara membuat pesan komentar diatas kotak atau form komentar dibawah ini :

Cara Membuat Pesan diatas Kotak Komentar 1 - Ficri Pebriyana

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode seperti ini ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>
/*Pesan Komentar*/
#threaded-comment-form p {
    position: relative;
    background: #666;
    border: 3px solid #000;
    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: #000;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #666;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }
5. Cari kode seperti ini <p><data:blogCommentMessage/></p> biasanya ada 4 kode.
Mungkin hasilnya akan 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%'/>
7. Lalu tambahkan kode berikut :
<div id='threaded-comment-form'>

KODE PERTAMA

</div>
8. Hasilnya akan 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>
Catatan :
- Silahkan lakukan pada kode ke 2 dan kode ke 4 dari hasil pencarian kode <p><data:blogCommentMessage/></p>
- Kode ke 2 agar pesan komentar muncul sebelum ada komentar
- Kode ke 4 agar pesan komentar muncul setelah ada komentar

9. Cari kode sperti dibawah ini :
document.getElementById(domId).insertBefore(replybox, null
Lalu ganti dengan kode dibawah ini :
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
10. Klik Simpan Template.

Proses modifikasi tampilan pesan komentar dan mengatasi pesan komentar yang muncul dibawah kotak komentar sudah selesai, sekarang tinggal tambahkan pesan komentar. Caranya seperti dibawah ini :
1. Masuk ke Blogger.com
2. Klik Setelan => Pos dan Komentar
3. Klik Tambahkan
4. Silahkan masukkan pesan komentar Anda
5. Klik Simpan Setelan
Cara Membuat Pesan diatas Kotak Komentar 2 - Ficri Pebriyana
Baca juga artikel berikut :

Sekian artikel mengenai Cara Membuat Pesan diatas Kotak Komentar. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

66 Komentar untuk "Cara Membuat Pesan diatas Kotak Komentar"

  1. bagus banget nih sob... jadi buat orang yang ingin komentar tidak berani macam-macam komentnya.... :)

    BalasHapus
    Balasan
    1. hehe, bisa sekalian nantangin nggak ya

      Hapus
    2. @Ehwansah Jailani : Iya sob, kalau melanggar ya hapus saja :)

      Hapus
    3. @zachflazz : tantangin apaan mas ? hehe :e

      Hapus
    4. Dikasih peraturan juga tetep aja dilanggar :)

      *Pengalaman pribadi

      followback sukses

      Hapus
    5. hahaha, biasanya itu spammer
      cuman paste-paste doang...

      Hapus
  2. kebetulan nih saya belum memasangnya, tapi kok panjang banget kodenya yia bos, hehehe...

    BalasHapus
    Balasan
    1. ngga sob, itu kode yang panjang cuman CSS saja,
      kalau htmlnya pendek, cuman tambah kode div dan mengganti kode document

      Hapus
  3. sy hanya menerapkan pada petunjuk terakhir :) untuk point sebelumnya, belum... thanks tuk sharenya....

    BalasHapus
    Balasan
    1. iya pada bagian mengganti kode document dan menambahkan kode div yang paling penting.. untuk kode css bisa dilewat saja

      Hapus
  4. langsung saya terapkan.alhamdulillah saya mendapatkan artikel ini...sudah lama saya ingin memasangnya tapi ndak tahu mesti gimana, dan akhirnya saya mencari diinternet dan liat postingan ini dan alhamdulillah saya bahagia dan akan langsung diterapkan...makasih untuk artikelnya :)

    BalasHapus
    Balasan
    1. iya mas, sama-sama,
      semoga bermanfaat, makasih sudah mampir :D

      Hapus
  5. wahh pinter banget Mas.
    saya jadi tahu sekarang. asyiiik

    BalasHapus
  6. selama ini saya cuma terima bersih mas. karena sudah bawaan dari templatenya. ternyata cukup rumit juga ya untuk membuat pesan di atas kotak komentar :)

    BalasHapus
    Balasan
    1. iya mas, kadang sudah bawaan template, tetapi kadang juga ada masalah ketika ada komentar pesannya muncul dibawah kotak komentar :)

      Hapus
  7. Artikelnya bener-bener mantap mas, kebetulan saya blom memasangnya nie jadi bisa coba langsung praktekin deh...makasi ya udah berbagi ilmunya :)

    BalasHapus
  8. Menarik nih Mas Ficri artikelnya, saya sudah pakai pesan comments itu
    Namun trik Mas Ini gak kalah hebat dan bagus nya, sukses dan happy selalu :)

    BalasHapus
  9. Maaf baru bisa blogwalking yah Mas Ficri, dan followback blog
    Juga G+ Dan sosmed lainya succesful salam santun selalu buat Mas Ficri :)

    BalasHapus
  10. Keren sob tutornya, punya saya udah ada tuh, btw kunjungan balik nih, :)

    BalasHapus
  11. sangat jelas dan dan mudah untuk di pahami mas penjelasan Cara Membuat Pesan diatas Kotak Komentar ini, bdw dengan demikian form komen akan jadi lebih bagus dan elegan ya Mas Ficri.

    Salam kenal + Persahabatan slalu Mas Sukses followback

    BalasHapus
    Balasan
    1. iya mas, selain kode diatas masih bisa kita ganti lagi dengan kode-kode css lainnya, agar lebih menarik lagi,

      sip mas, makasih sudah mampir kesini..

      Hapus
  12. Selamat malam mas ficri, saya juga menerapkan ini mas, tapi emang dari template sudah begitu, dan saya edit, e malah rusak.. ketika ditekan tombol balas, pesan diatas komentar tidak ikut mas,,,, mohon mas jika bersedia melihatnya,,,

    BalasHapus
    Balasan
    1. silahkan lakukan langkah ke 5.
      biasanya akan ada 4 kode yang berwarna biru,
      jika udah ketemu silahkan masukan kode warna merah dan seterusnya...

      Hapus
    2. oke mas , saya bookmark dulu aja ya..

      Hapus
  13. Mantap nih, buat blogger yang gak suka blognya dipenuhi dengan komentar spam atau komentar-komentar yang melanggar aturan, bisa dicoba nih, siapa tau spammer bisa berkurang.

    BalasHapus
    Balasan
    1. hehe, siapa tau bisa sob, silahkan dicoba :D

      Hapus
  14. gan kalo bikin author blog kaya punya agan gimana, email script sama tutor nya ke email ane gan acahyaputra@gmail.com

    BalasHapus
    Balasan
    1. di blog ini juga sudah ada mas tutorialnya

      Hapus
  15. Ane gagal kan, kalo belum ada komentar si muncul kotaknya tapi setelah ada komentar ilang deh :D, gimana gan? padahal udah ikut tutor

    BalasHapus
    Balasan
    1. coba pada tahap 9 mungkin ada yang salah...
      kalau masih belum bisa, coba gunakan komentar Threaded Comment Hack
      http://www.ficripebriyana.com/2014/03/membuat-komentar-blog-valid-html5.html

      Hapus
  16. bang jika template seperti saya bagaimaana ? http://blogfwa.blogspot.com

    BalasHapus
  17. Gan ini memperlambat kecepatan blog enggak??
    Pingin coba tapi takut lemot.. :(v

    BalasHapus
    Balasan
    1. ngga, ini fungsinya memperbaiki pesan komentar yang biasanya ada dibawah, karena letaknya dibawah kotak komentar maka tidak efektif, oleh karena itu kita harus meletakannya di atas kotak komentar

      Hapus
  18. Mas mau tanya kalau udah masang.. widget komentar fb di atas komentar blog apa juga hilang???

    BalasHapus
    Balasan
    1. biasanya akan ada 2 pilihan komentar menggunakan blog dan komentar menggunakan fb, jadi tidak mungkin hilang asalkan salah satu script komentarnya tidak dihapus

      Hapus
  19. Mas saya kok sampai pusing bikin kotak komentar aja nggak pernah berhasil, padahal sudah berbagai tutorial dari bbrapa blog sudah saya coba tapi hasilnya kosong. tolong mas buatkan kotak komentar diblog saya, trmksh.

    BalasHapus
  20. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  21. Sebagian desain blog saya ambil dari blog ficripebriyana.com .. Terima kasih mas sudah memberikan tutorial.. Walaupun rumit tapi hasilnya work.. Oiyaa mas, cara membuat kotak komentar seperti blog ficripebriyana.com gimana yaa? Yang ada tulisan ADMIN-nya itu keren banget.. Jika bersedia dikirim aja ke email saya yaa mas imronshidqia@gmail.com .. Terima kasih, blog-nya sangat membantu.

    BalasHapus
  22. keren mas tutor nya izin nyoba sekalian...

    BalasHapus
  23. Perlu dipraktekan nih. Thanks gan..

    BalasHapus
  24. bikin kotak pesan komentar yg kayak agan gimana?

    BalasHapus
    Balasan
    1. kalau mau bikin pesan pada kotak komentar seperti ini :
      Klik Setelan => pos dan komentar
      lalu pada Pesan Formulir Komentar, Anda isi sesuai keinginan...

      Hapus
  25. Terimakasih sangat membantu untuk blog ane gan. semoga terus jaya dan sukses

    BalasHapus
  26. mantap artikelnya.... memberikan fariasi tersendiri pada tampilan blog...
    terima kasih... sukses selalu

    BalasHapus
  27. untuk wordpress gak ada y mas ?

    BalasHapus
  28. makasih atas informasinya... akan saya terapkan...

    BalasHapus
  29. Terimakasih mba tutor nya,,

    BalasHapus
  30. :) =( ^_^

    Kalo buat emoticonnya gimana Gan?

    BalasHapus
  31. Boleh dicoba ya agan bro..soal nya baru buat blog dapat info begini jadi mau buat aturan komentar..makasih gan bro..sekali kali mampir ke blog saya.

    BalasHapus
  32. berhasil gan, tapi tombol replaynya jadi gak bisa di klik :'(

    BalasHapus
    Balasan
    1. ada yang kehapus kali kodenya, coba dicek kembali...

      Hapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel