share all free for you

Advertiser Here

Cara Modifikasi Kotak Komentar Blogger

Sesuai judul di atas kali ini saya akan share cara untuk memodifikasi kotak komentar blogger. Mungkin sobat blogger pernah melihat kotak komentar yang dapat memasukan video,gambar,emoticon dan elemen terlarang di dalam komentar, nah kali ini saya akan menjelaskan cara membuatnya secara lengkap dari cara mengizinkan elemen terlarang masuk ke dalam komentar sampai membuat pesan formulir komentar kren.

Berikut langkah - langkahnya :

A. Cara mengizinkan video,gambar,emoticon dan elemen terlarang masuk kedalam kotak komentar.


1. Masuk di dasbor blogger
2. Klik Template / Rancangan
3. Klik Edit html
4. Klik Prooced / Lajutkan ( jika editor baru )
5. Cari kode </body>
6. Simpan kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://cunayz.googlecode.com/svn/trunk/jQuery.js' type='text/javascript'/>
</b:if>

7. Cari lagi kode </head> setelah ketemu simpan kode di bawha ini di atas kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Add More Features to the Blogger Comments by Taufik Nurrohman */
img.emo {
  display:inline-block;
  vertical-align:middle;
}
#comment-holder .cm-youtube {
  display:block;
  border:none !important;
  background-color:#333;
  width:370px;
  height:218px;
  margin:0 auto 30px;
}
#comment-holder .cm-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:2px;
  max-width: 95%;
}
#comment-holder code,
#comment-holder i[rel="code"] {
  font:normal 12px Monaco,"Courier New",Monospace;
  color:blue;
}
#comment-holder pre,
#comment-holder i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Monospace;
  background-color:#333;
  color:white;
  padding:0.5em 1em;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
}
#comment-holder blockquote,
#comment-holder b[rel="quote"] {
  margin:0 2%;
  background-color:#eee;
  padding:1em 1.2em;
  border-left:4px solid #7498AD;
  display:block;
  font-weight:bold;
  font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to see this image!";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to watch this video!";
}
</style>
</b:if>

7. Simpan template

Cara Penggunaan Kode

1. Untuk penggunaan gambar silahkan anda gunakan tag

[img]URL Gambar[/img] atau <i rel="image">URL Gambar</i>

2. Untuk penggunaan video silahkan anda gunakan tag

[youtube]URL Video[/youtube] atau <i rel="youtube">URL YouTube</i>

3. Untuk Emoticon anda bisa gunakan seperti ini.

:) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W

4. Memasukan kode bisa menggunakan tag

<i rel="code">Kode Anda</i> atau [code]Kode Anda[/code]

5. Memasukan kode html / css / jquery bisa menggunakan

<i rel="pre">Kode Anda</i> atau [pre]Kode Anda[/pre]

6. Menggunakan blockquote di komentar bisa menggunakan tag

<b rel="quote">Kata-kata Anda</b> atau [blockquote]Kata-kata Anda[/blockquote]

Sekarang sobat sudah bisa memasukan video,gambar,emoticon dan elemen terlarang kedalam kotak komentar

B. Cara membuat pesan formulir komentar kren.

Pesan Formulir Komentar Blogger Kren

1. Centang Expand template widget (masih dalam edit html)
2. Cari kode berikut

<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='430' id='comment-editor' name='comment-editor' src='' width='100%'/>

Catatan : biasanya terdapat dua kode yang sama sobat ambil kode yang berada di bawah tag <b:else/> seperti di atas

3. Ubah kode yang berwarna hijau dengan kode di bawah 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='430' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

4. Kemudian letakan CSS berikut di atas kode ]]></b:skin> atau </style>

#threaded-comment-form p {
    position: relative;
    background: #DD0;
    border: 3px solid #38F;
    padding: 10px;
    font-size: 13px;
    line-height: 1.6em;
    color: #000;
    margin-top: 30px;
    }
#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: #38F;
    border-width: 15px;
    left: 10%;
    margin-left: -36px
    }
#threaded-comment-form p::after {
    border-top-color: #DD0;
    border-width: 9px;
    left: 10%;
    margin-left: -30px
    }

5. Setelah itu cari kode berikut

document.getElementById(domId).insertBefore(replybox, null);

dan ubah menjadi kode berikut

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

6. Simpan Template

Pesan formulir sobat sekarang sudah kren, jika sobat kurang suka dengan tampilan atau style pesan formulirnya. sobat tinggal mengedit kode cssnya

9. Silahkan anda isikan pesan formulir komentar anda caranya:
  • Masuk ke Setting / setelan
  • Lalu klik Komentar
  • Lalu scroll ke bawah dan lihat kata Pesan Formulir Komentar
  • Nah isi kolom tersebut dengan pesan anda lalu klik Simpan Stelan / Save Setting
Nah sekarang Cara Modifikasi Kotak Komentar Blogger sudah selesai silahkan lihat demonya di blog saya ini dan apabila ada pertanyaan jangan sungkan untuk meninggalkan pesan di kotak komentar, semoga tutorial kali ini dapat bermanfaat untuk sobat blogger semua.

Artikel ini bersumber dari : SYSTEM OF BLOG dan DTE (hompimpaalaihumgambreng)

Title : Cara Modifikasi Kotak Komentar Blogger
URL : http://blogcunayz.blogspot.com/2012/06/cara-modifikasi-kotak-komentar-blogger.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Modifikasi Kotak Komentar Blogger sebagai Sumbernya.

Sudah ada [ 104 komentar ] bagaimana pendapat Anda,,?

  1. wihh kodenya lumayan banyak ya sob,,, bikin kompi nambah beban ya.. :)

    ReplyDelete
  2. wah mantap nie, sepertinya menarik nie, di test dulu ya [img]http://static.kaskus.co.id/images/smilies/malu.gif[/img]

    ReplyDelete
    Replies
    1. wah berhasil, tapi seperinya ini mengunakan bb code ya, ehm, berasa di kaskus dah. [img]http://static.kaskus.co.id/images/smilies/s_sm_ilovekaskus.gif[/img]

      tenkyu tutorialnya ya, boleh nie di coba.

      Delete
  3. oo kotaknya aja yaa yg di modiff.. lang laennya tidakk

    ReplyDelete
    Replies
    1. itukan plus bisa masukin kode,emoticon,video dll sob emang mau di modif apanyalagi sob? :)

      Delete
  4. wuiih,, element terlarang.. bahaiya tu, ntar kena sweping,,hihihihi


    mantep sobat tipsnya,, ntar deh ane terapkan, di bookmark dulu :D

    ReplyDelete
    Replies
    1. weh kalo menurut saya ga bahaiya sob wkwkwk

      sip lah silahkan di coba kapan2

      Delete
  5. Huwee.. ternyata gitu toh caranya!!
    Makanya Ayas sering nemu Kotak komentar Sobat-2 Blogger pake giniaan..
    Ternyata MANTAAAAFFF BANGEEEET!!
    I Like it SoMad!!
    ^_^

    ReplyDelete
    Replies
    1. ia sekarang lagi musimnya pake ginian gan

      Delete
    2. Heheheheh bang ayas pakek dunk, biar blognya kelihatan keren? :D wkwkwkwkwk

      Test gambar:
      [img]http://static.ak.fbcdn.net/images/blank.gif[/img]

      [blockquote]Apapun yang terjadi[/blockquote]

      [pre]Top Markotop[/pre]

      [code]Wau keren bang[/code]

      Ckckckckkc sip dah?

      Delete
  6. woww,, mantabb.. bisa masukin video juga,,

    ReplyDelete
  7. hehe.. asik sebenarnya.. tapi ntar malah kasian sama blogger lain blognya jadi berat akibat isi komentar yang tidak terkontrol.. :)

    kalo di moderasi malah kita yang agak repot jadinya.. :)

    ReplyDelete
    Replies
    1. bener tu mas apalagi kalau yang di masukan adalah video, maka akan tambah berat.

      Delete
    2. @ affanibnu dan damas amirul karim : saya tidak memaksa untuk menerapkan trik ini :) trik ini cocok dengan blog yang templatenya ringan hidup adalah pilihan begitu juga dengan trik ini agan2 :)

      Delete
    3. Loh kenapa berat mas? :D Ini sebenernya tetap sebuah text seperti yang anda ketikkan, tapi ketika halaman termuat, dirubah oleh browser menjadi gambar, <pre>, atau <blocquote>

      Delete
  8. Wew... Lengkap kali tutornya Mas Bro...
    Ijin praktekin iLmunya Mas Bro... Thanks,,,
    Hadir perdana di istana Sobat, izin share : MP3 Inspiratif Bag. XIII, review ya Sob, thanks...
    Salam bLogger, :)

    ReplyDelete
  9. wahh keren bener nih sob,, komentar bisa jadi lebih menarik. :)

    ReplyDelete
  10. dicoba, video dr youtube..

    Cara Tercepat dan Terbaik dalam Membantah Tuduhan Terhadap Kaum Muslimin sebagai Teroris

    http://www.youtube.com/watch?v=jeUFaC7N88A

    ReplyDelete
    Replies
    1. http://www.youtube.com/watch?v=jeUFaC7N88A

      Delete
    2. keren sob.., thx ilmux ya.. *smile

      Delete
    3. yang pertama kurang tagnya sob wkwkwk

      sip sama2 sob

      Delete
  11. kenapa gak blogazine lagi gan? #OOT enyway thanks udah ngingetin :)

    ReplyDelete
    Replies
    1. iya neh pusing stylenya di comot terus wkwkwk kalo ane ganti sama template jelek kaya gini kan engga wkwkwk

      Delete
    2. oh iya sedikit tambahan
      [blockquote]blogazine kan tidak perlu template khusus,template ini juga bisa di gunakan untuk blogazine[/blockquote]

      Delete
  12. sangat menarik,
    tapi kodenya itu banyak banget

    heehe makasih ilmunya... :)

    ReplyDelete
    Replies
    1. wkwkwk kalo menurut saya kode segitu pendek kok mbak :)

      Delete
  13. Bookmark aja dulu sop,ane datangnya kemalaman.biasa mau nonton bola dulu.
    Makasih dah sharing,happy blogging.

    ReplyDelete
    Replies
    1. silahkan sob,wkwkwk santai aja ane juga belum tidur jam segini mah
      sama2,happy blogging juga

      Delete
  14. apa ga nambah berat loading blog sob..??

    ReplyDelete
    Replies
    1. bila yang berkomentar banyak menyisipkan video dan gambar. bisa saja menambah berat blog tapi, bila hanya kode dan emoticon menurut saya tidak sob :)

      Delete
    2. Wah kenapa berat mas, ini tetep sebuah text kok. Nanti kalau halaman sudah termuat baru dirubah sama browser menjadi gambar, video atau apa saja? :D

      Delete
  15. keren sob mantap, blognya udh diganti yh? gk ala blogazine lagi hhe

    ReplyDelete
    Replies
    1. iya sekarang saya sudah berevolusi wkwkwkw

      Delete
  16. kotak komentarnya jadi keren yach sobat???

    ReplyDelete
  17. tu tipsx udh share jg di blog..! qu dpt di sin1aja

    ReplyDelete
    Replies
    1. iya saya juga dapat ilmunya dari sana gan sin1aja itu (SYSTEM OF BLOG) dan juga dari DTE :)

      Delete
  18. emoticonnya kok gak bisa sob..
    coba di cek di blog saya :D

    ReplyDelete
  19. Keren, tapi cukup rumit gan :)
    Like This :)

    ReplyDelete
  20. Thanks gan. angsung go to tkp.
    Kalo bisa, .....

    [blockquote] Kunjung balik yaa... http://infoiki.blogspot.com [/blockquote]

    ReplyDelete
  21. [code]Ijin testing Sob[/code]
    [blockquote]Ijin testing Sob[/blockquote]

    ReplyDelete
  22. Tes :

    [img]https://lh6.googleusercontent.com/-KVtaPKwi-24/T49tTDh2mTI/AAAAAAAACdw/fbPv0j9yeVI/s245-c-k/Nikmahku.jpg[/img]

    ReplyDelete
  23. [code]test code[/code]
    [blockquote]test quote[/blockquote]
    :) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W

    ReplyDelete
  24. [blockquote]Memang Paling Keren DAh[/blockquote]
    kunjungi juga : http://freelinkshare4u.blogspot.com/

    ReplyDelete
  25. thank you sob, kini blogku bisa dipasang gambar di komentar

    http://mathsanimation.blogspot.com/2011/09/cara-memfaktorkan-fungsi-kuadrat.html?

    ReplyDelete
  26. Test

    [youtube]http://www.youtube.com/watch?v=3j9K9orQ-_Q[/youtube]

    [code]http://kikuta-journal.blogspot.com[/code]

    [img]http://i4.ytimg.com/vi/3j9K9orQ-_Q/mqdefault.jpg[/img]

    ReplyDelete
  27. dari layar saya koq ada kode-kode html yang bertumpuk ya masbro, sebagiannya saya save aja

    ReplyDelete
  28. sangat membantu sob... mampir juga ia http://thumber-kreatif.blogspot.com

    ReplyDelete
  29. wah,,, panjang banget kode nya kang.. hehehe
    mau nyoba takut tar blog nya malah lemot.

    nice share kang..

    ReplyDelete
  30. scriptnya ada yang bertumpuk ni masbro

    ReplyDelete
  31. [youtube]http://www.youtube.com/user/Maroon5VEVO[/youtube]

    ReplyDelete
  32. ok sob, thanks y infonya,hehe unik plus menarik.
    www.terapiotak.com

    ReplyDelete
  33. http://www.doleta.gov/regions/reg05/Pages/exit.cfm?vexit=http://testttt.blogspot.com/

    ReplyDelete
  34. [URL="http://www.doleta.gov/regions/reg05/Pages/exit.cfm?vexit=http://jadululolalall.blogspot.com/"]Jadi[/URL]

    ReplyDelete
  35. [blockquote]tes[/blockquote]

    ReplyDelete
  36. ok mantap banget gan infonya, salam kenal aja y?
    kunjungi balik ya?
    www.binauralbeats.co.id

    ReplyDelete
  37. [blockquote]Mantap rtikelnya mas, terimakasih banyak sudah berbagi[/blockquote]

    ReplyDelete
  38. wah mantap nih, sepertinya menarik nih..

    ReplyDelete
  39. makasih nih sob atas infonya. :)

    ReplyDelete
  40. Mas pada saaat saya menggunakan code ( dan saya taruh di kotak pesan itu )
    kenapa muncul ya mas...

    ReplyDelete
  41. Keren banget jadinya, saya sudah praktekkan dan berhasil.
    ditunggu yah coment backnya :D

    ReplyDelete
  42. bagus modifikasi nya gan,tk utk ilmu barunya.

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah