April 13, 2013

Modifikasi Kotak Pesan Komentar Blog

Selamat malam sob...


Kali ini saya ingin share mengenai bagaimana cara membuat modifikasi pada kotak pesan komentar blog, dimana untuk contohnya bisa dilihat pada blog ini. Pemodifikasian kotak pesan komentar tersebut juga saya pelajari dari blog lain, namun saya lupa alamatnya...

Tutorial ini sendiri saya buat untuk mengakomodir permintaan sahabat Ariel Nicho yang bertanya mengenai kotak komentar saya ini, sehingga tidak ada salahnya saya pikir untuk membuat tutorialnya.

Ok, langsung aja sob :

1. Login ke blogger.


2. Pilih Template - Edit HTML.


3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

#pra-comment{
position: relative; 
background:#FFFFFF;/* Warna background kotak */
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #FE80DF;/* Warna border kotak */
   border-radius: 10px;
   box-shadow: 0 0 0 2px #000000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
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: #FE80DF; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#pra-comment::after { 
border-top-color: #FFFFFF; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
} 

4. Kemudian cari kode <p><data:blogCommentMessage/></p>  dan ganti dengan kode berikut :
<div id='pra-comment'><data:blogCommentMessage/></div>

5. Simpan Template.

6. Selanjutnya, masuk ke Setelan - Pos dan Komentar.

7. Pada kolom pesan formulir komentar, masukkan tulisan atau kata-kata mutiara yang ingin ditampilkan.

8. Enjoy.

*Keterangan : Ganti kode berwarna kuning dengan warna-warna yang disukai dan cari kodenya disini.

Gimana sob???

Semoga bermanfaat dan jangan lupa untuk tinggalkan komentar yah...

73 comments

  1. siip infox gan...
    coba dulu ya

    ReplyDelete
  2. kliatanya keren nih sob,,,, kpn" ane coba ah makasih yah sharenya

    ReplyDelete
  3. kode di cara yg ke4 itu kok ga ada ya sob :P

    ReplyDelete
    Replies
    1. hehe biasanya ada kok sob kode tersebut di semua template, coba CTRL+F kode <data:blogCommentMessage/> saja...
      atau cari kode <h4 id='comment-post-message'><data:postCommentMsg/></h4> biasanya kode yang dicari (<data:blogCommentMessage/>) ada dibawah kode tersebut...semoga membantu...

      Delete
    2. hmm, saya baru ingat =p* coba cari kode <b:includable id='comment-form' var='post'> lalu klik simbol segitiga hitam disamping nya, kode di tahap 4 ada didalamnya... :Q

      Delete
  4. wow keren neh sob tutornya patut dicoba nihh

    ReplyDelete
  5. haha,,,yang susah itu kalau nyari kodenya ndak sesuai,,,,apalagi kalau koneksi error atau lagi gangguan jadi bingung sendiri,,,thanks infonya,,,, kunjungi ya http://lessonacomputer.blogspot.com

    ReplyDelete
    Replies
    1. wah umumnya kode-kode nya sama kok sob, kalaupun beda juga tidak 100% berbeda agak mirip2, kalo sering obrak abrik template nya pasti terbiasa kok...

      Delete
  6. kalo pengen ada konversi kode HTLM nya kaya blog aiizah gimana ya ? http://nandarious.blogspot.com

    ReplyDelete
    Replies
    1. siapkan dulu css button nya, agan bisa bikin online di cssbuttongenerator.com lalu letakkan kode css nya di bawah kode : ]]></b:skin>

      kode css nya kurang lebih akan seperti ini : <style type='text/css'>
      .INI-CONTOH-BUTTON-SAJA {
      -moz-box-shadow:inset 0px 0px 0px 1px #ded4d3;
      ........................................
      ........................................
      </style>


      lalu finishing nya dengan mencari kode berikut : <p><data:blogCommentMessage/></p> dan ganti kode tersebut dengan kode : <span><data:blogCommentMessage/></span><br/><a class='INI-CONTOH-BUTTON-SAJA' href='http://aiizahh.blogspot.com/p/blog-page_3.html' target='_blank'>Konversi Kode HTML</a>

      Coba lihat INI-CONTOH-BUTTON-SAJA itu harus sama antara yang di kode CSS dengan class nya, sedangkan untuk link nya bisa agan gunakan link milik agan.
      semoga membantu...

      Delete
    2. kalo agan menggunakan tutorial diatas, coba lihat tahap 4, kode yang tadinya seperti ini : <div id='pra-comment'><data:blogCommentMessage/></div>
      nantinya akan menjadi seperti ini : <div id='pra-comment'><span><data:blogCommentMessage/></span><br/><a class='INI-CONTOH-BUTTON-SAJA' href='http://aiizahh.blogspot.com/p/blog-page_3.html' target='_blank'>Konversi Kode HTML</a></div>

      Delete
  7. gan kalau mau balas komentar, tapi letaknya tepat di bawah komentar yang mau kita balas itu gmana caranya,,,
    soalnya di blog saya kalau mau balas letaknya di komentar paling bawah,bukan diwah yang mau kita balas komentarnya...


    thank's
    http://tryanztow.blogspot.com/

    ReplyDelete
    Replies
    1. pake threaded comment gan biar balasan dari sebuah komentar terletak dibawahnya coba cek http://aiizahh.blogspot.com/2013/03/membuat-kotak-komentar-bertingkat-pada.html itu adalah threaded comment yang sederhana...

      Delete
    2. ok gan, makasih dah mau bantu,,,,,
      \o/ :-bd

      Delete
  8. kunjungan balik utk sis,,
    sy udh follback ya :)

    ReplyDelete
  9. mantap bro.. infonya thank's ya :)

    ReplyDelete
  10. thanks infonya jangan lupa visit back junedalbughisy.blogspot.com

    ReplyDelete
  11. mantap sob..tapi template ane kyknya kagak bisa tuh..ane buat author aja ga bisa muncul.

    ReplyDelete
    Replies
    1. seharusnya bisa sob karena semua template punya kode-kode tersebut yang harus kita sisipi dan ganti... ^_^

      Delete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. artikel ada menarik dan bermutu, keep posting.

    ReplyDelete
  14. Seperti yang blog ini ya ? keren......

    ReplyDelete
    Replies
    1. iya benar sekali gan, seperti kotak di bawah komentar ini... ^_^

      Delete
  15. Thanks infonya
    kunjungin balik ya :D

    ReplyDelete
  16. klo menyisipkan emoticon pada pesan komentar seperti blog ini gimana?

    ReplyDelete
    Replies
    1. coba cek postingan saya yang ini gan http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html lalu modifikasi sedikit pada bagian emowrap menjadi .emoWrap {display:none !important;} lalu pada bagian var emoRange tambahkan #pra-comment simpan template agan. Lanjut, masuk ke Setelan - Pos dan Komentar, pada pesan formulir komentar tambahkan dad deff depressed greedy dontcare order shake slap smoke haii cheer didalamnya. Semoga membantu...

      Delete
  17. Salam Mbak Alya..

    Semaleman otak-atik blog pengen ada tombol reply di box komentar, akhirnya berhasil hehehee... plus nambahin emoticon juga. Meski blom maksimal, tapi udah lumayan cantik blog akuh hehehe... bantu banget nih tutorialnya... folback yaa <3

    ReplyDelete
  18. Agar Tutorial http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html

    ada di Pesan Formulir ini gimana yah gan ??

    Mohon bantuannya

    ReplyDelete
    Replies
    1. ganti dulu kode ini : .emoWrap {
      background-color:#EEDE86;
      border:2px solid #D3BA59;
      padding:10px 14px;
      color:black;
      font:bold 12px Tahoma,Arial,Sans-Serif;
      text-align:center;
      }
      menjadi : .emoWrap {display:none !important;} setelah itu pada bagian : var emoRange = "#comments p, div.emoWrap", ganti menjadi : var emoRange = "#comments p, #pra-comment" simpan template, lalu masuk pada Setelan - Pos dan Komentar, lalu pada pesan formulir komentar tambahkan kode dari emot nya misalnya seperti ini : dad deff depressed greedy dontcare order shake slap smoke haii cheer
      semoga membantu... :)

      Delete
    2. saya baru lihat ada pertanyaan serupa diatas gan, yang sudah saya jawab... :D
      http://aiizahh.blogspot.com/2013/04/modifikasi-kotak-komentar-blog.html?showComment=1368492565476#c1385561415187815080

      Delete
    3. Gimana ya cara nambahin code dari emoticon kepesan formulir komentar? huhhh

      Delete
    4. itu sudah ada jawaban nya diatas gan, silahkan dipraktekkan...
      kode-kode emot nya dimasukkan dalam pesan formulir komentar pada bagian "Setelan - Pos dan Komentar"

      Delete
  19. sist,,mo tanya nih... maaf kalo OOT :D..
    cara buat tulisan author di pojok kanan komentar admin tuh gimana ya..?? udah cari di mbah gugel ga ada yg kaya gitu :'(..apa itu bawaan dari template..?? kalo gak tolong buat artikelnya atau PM saya...hehehe \o/

    ReplyDelete
    Replies
    1. rata-rata bawaan dari template tp toh itu pun dibuat juga oleh kreasi tangan manusia... **p
      di sini http://aiizahh.blogspot.com/2013/05/design-aiizahh-try-to-colorful-template.html sudah include yg begituan...
      di bagian CSS comments tambahkan saja .comments .comments-content .icon.blog-author {
      background-repeat: no-repeat;
      width:36px;
      height:20px;
      }
      .comments .comments-content .icon.blog-author{position:absolute;width:36px;height:36px;background-image:url(http://aiizahh-reader.googlecode.com/svn/trunk/author.png);background-position:0 0;background-repeat:no-repeat;right:-1px;top:-1px}
      .comments .comments-content .inline-thread .icon.blog-author{right:-6px;top:-6px}

      coba lihat yang diberi bold, itu adalah lebarnya, kalau komentar memiliki tgl+waktu yg ada pada bagian kanan seperti blog ini, maka pada CSS comment date time nya tambahkan padding-right:40px; sehingga tgl+waktunya tdk tertutupi oleh image author nya...
      semoga membantu... :-bd :-bd :-bd

      Delete
    2. haii Sob, gmna caranya biar tgl + waktunya berada disamping nama orang yang komen?, ditunggu jawabannya shake

      Delete
    3. biasanya kode nya kurang lebih seperti ini : .comments .comments-content .datetime{text-align:right;xxxxxxxxxxxx} coba tambahkan padding-right sehingga memberi jarak pada bagian date time nya...

      Delete
  20. Mau nanya huhhh
    Kalo menggabungkan pesan komentar dengan emotion bagaimana?

    ReplyDelete
    Replies
    1. diatas sudah saya jawab pertanyaan serupa gan...
      http://aiizahh.blogspot.com/2013/04/modifikasi-kotak-komentar-blog.html?showComment=1369129756151#c9217650999559766038
      hanya perlu mengganti var emoRange saja...

      Delete
  21. Cara biar Pagernya bisa di atas thread comment gi mana yach min...??

    ReplyDelete
    Replies
    1. coba cari kode <b:includable id='comment_picker' var='post'> dan letakkan kode blog pager nya sebelum kode tersebut...
      semoga membantu... :) :) :)

      Delete
  22. Maaf, ini OOT, gimana caranya buat kode html/css/javascript kita bisa tampil di postingan blog, jadi seperti teks biasa,

    ReplyDelete
    Replies
    1. tuliskan kode-kode tersebut pada mode "compose" gan, dan jangan lupa pada opsi pilihan, pilih "tunjukkan html apa adanya".

      Delete
  23. nggk berhasil...soba lihat aika-hiromi.blogspot.com :(
    mohon bimbingannya
    email di putri_gea17@yahoo.co.id
    makasih gan

    ReplyDelete
  24. kok kotak nya jatuh ke bawah yah? spoiled
    gimana supaya tetep diatas kotak isi komentar?

    ReplyDelete
    Replies
    1. coba agan cek disini :
      http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html?showComment=1369011946292#c1014362974725134431

      Delete
  25. kalau pengen kotak pesan nya sama kayak kotak pesan punya agan gimana yah ? soalnya ane udh coba buat seperti itu tapi selalu gagal spoiled tolong bantuan nya ya

    emilseo.blogspot.com

    ReplyDelete
    Replies
    1. sbenarnya sama seperti kode yang saya beri diatas,hanya berbeda warna dan ada tambahan emot nya...coba cek disini :
      http://aiizahh.blogspot.com/2013/04/modifikasi-kotak-komentar-blog.html?showComment=1369181927176#c2103238953133267760

      Delete
  26. Informasinya sangat membantu, terimakasih

    ReplyDelete
  27. Bro Cara Ganti Panjang LEbar Pesan Komentar Gimana Bro MOhon Bantuannya
    shake

    ReplyDelete
  28. Gimana ya cara nambahin code dari emoticon kepesan formulir komentar? huhhh

    ReplyDelete
  29. artikel nya keren, ijin nyoba sob
    http://duniagame7.blogspot.com/2013/10/daftar-games.html

    ReplyDelete
  30. bagus gan, trimaksih
    ditunggu kunjungan baliknya
    twrsby.blogspot.com

    ReplyDelete
  31. gan, kok gakbisa ya? udh ane praktekin tutorialnya...

    ReplyDelete