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.

52 komentar:

  1. mantap tutorialnya ini yang saya cari-cari selama ini

    BalasHapus
  2. mengatur posisi sudut lancip yang bagian bawah itu gimana gan ??

    BalasHapus
    Balasan
    1. 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

      Hapus
  3. Thanks Sob, berhasil di terapin di blog saya nie :)

    BalasHapus
    Balasan
    1. Sama-sama gan, thanks juga dah mampir di blog ini :))

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

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

    BalasHapus
    Balasan
    1. 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
      }

      Hapus
  6. mas kalo menambahkan garis di balasan komentar gimana mas?

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

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

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

      Hapus
  8. makasih,,,,,blognya agan sangat membantu,,,,,,,,,,,,,,,,,,,

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

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

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

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

      Hapus
    4. /*-- 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*/

      Hapus
  10. Komentar ini telah dihapus oleh pengarang.

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

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

      Hapus
  12. 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/

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

    BalasHapus
  14. Thanks yah atas bantuannya saya coba dulu semoga berhasil

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

    BalasHapus
    Balasan
    1. 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 :)

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

    ditunggu jawabannya di taugi.blogspot.com

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

      Hapus
  17. sob cara buat OTT sama Konversinya gimana

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

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

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

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

    BalasHapus
  22. 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.

    BalasHapus
    Balasan
    1. gunakan aja fasilitas hidden gan... atau tambahan code css

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

      Hapus
  23. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  24. 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 ^^

    BalasHapus
  25. Trims bosku artikel sangat bermanfaat

    BalasHapus
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.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top