Home » » Cara Membuat Pesan di atas Kotak Komentar

Cara Membuat Pesan di atas Kotak Komentar

Cara Membuat Pesan di atas Kotak Komentar, Nah disini gw mau ngasih tau cara buat pesan di atas kotak komentar, apa fungsinya? Ya itu buat lo kalo mau nulis nulis catatan atau pesan yang ingin disampaikan

Isinya mungkin peraturan yang ingin disampaikan, atau comment yang tidak boleh ditulis seperti gambar dibawah :

Membuat Pesan di atas Kotak Komentar

Mau tau cara masangnya? nih disini langsung aja ya gan, Langsung menuju Edit HTML blog lo gausah dikasih tau lagi kan caranya?

1. Cari kode <p><data:blogCommentMessage/></p> bisa dengan menggunakan CTRL + F, nah disitu biasanya ada 4 hasil pencarian anda, nah coba lihat hasil ke 2 dan ke 4, kaya gini hasilnya :
<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%'/>

2. Setelah itu tambahkan pada kode di atas :
<div id='threaded-comment-form'>
...kode di atas...
</div>

Nah hasilnya kaya gini..
<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-co
mment-from-post' frameborder='0' height='410' id='comment-editor' name='co
mment-editor' src='' width='100%'/> 
</div>

  3. Cari lagi kode seperti dibawah
document.getElementById(domId).insertBefore(replybox, null);

Ganti kode di atas dengan kode berikut:
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

4. Setelah itu 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 
 }

Buat edit warnanya gw harap lo bisa ya :)

Setelah itu Simpah Template, Selesai.. Mudah bukan?

Langkah Terakhir tinggal menuliskan Pesan yang ingin disampaikan di atas kotak komentar
Masuk ke Dasboard >> Setting >> Posts and Comments, klik Add

Membuat Pesan di atas Kotak Komentar





Nah selesai deh tinggal tulis apa yang lo mau.. Kalo udah jangan lupa disimpan ya

16 comments:

  1. sudah di pasang gan.terima kasih atas ilmunya gan. :)

    ReplyDelete
    Replies
    1. http://www.fnur.bu.edu.eg/
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/422-2013-12-10-10-18-01
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/421-2013-12-10-09-48-39
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/419-2013-12-09-07-21-12
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/420-2013-12-10-09-48-38
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/417-2013
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/418-2013-12-09-07-17-28
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/415-2013-12-03-08-09-23
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/416-2013-12-03-08-25-21
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/413-2013-11-21-07-50-21
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/414-2013-11-25-09-38-30
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/411-2013-11-20-08-11-53
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/412-2014
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/409-2013-2014
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/410-2013-11-13-17-25-28
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/407-2013-11-09-08-51-15
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/408-2013-11-13-11-55-53
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/405-2013-11-09-08-42-05
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/406-2013-11-09-08-46-10
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/403-2013-11-09-08-25-45
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/404-2013-11-09-08-28-15
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/400-2013-11-09-07-50-13
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/401-2013-11-09-08-03-31
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/398-2013-11-09-07-29-40
      www.fnur.bu.edu.eg/fnur/index.php/main-news/item/399-2013-11-09-07-43-49
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/397-eugen-ionesco
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/402-2014-2013
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/395-2013-11-02-09-07-04
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/396-45-2013-10-23
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/390-2013-10-29-11-53-44
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/393-2013-10-29-11-57-48
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/392-2013-10-29-11-56-48
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/394-2013-10-29-12-02-18

      Delete
  2. Terimakasih infonya, sangat membantu...

    ReplyDelete
  3. Thax gan..sukses q terapin
    http://softwaredotblog.blogspot.com

    ReplyDelete
  4. info yang bagus gan, jadi tambah ilmu gan..

    komen balik ya gan diblogku.
    www.abenetgrup.com

    ReplyDelete
  5. infonya bagus. komen balik jendela-info123.blogspot.com

    ReplyDelete
  6. akhirnya punya saya ada pesan komentarnya juga,hehe
    makasih admin :-)

    ReplyDelete
  7. boleh juga nih untuk dicoba. nice share :)

    ReplyDelete
  8. coba dulu ah, siapa tau jadi bagus :v

    ReplyDelete
  9. terimakasih banyak tutorialnya mas... sangat bermanfaat

    ReplyDelete
  10. Mantap gan info nya
    Komen balik ya di blog ku http://sharezone-premium.blogspot.com/

    ReplyDelete
  11. kayaknya ini artikel di copas dari blog.kangsimet.net

    ReplyDelete

Relax