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.

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.