Mengizinkan elemen terlarang masuk ke dalam komentar

      Mengizinkan elemen terlarang masuk ke dalam kotak komentar - Maksudnya apa sih? Apa itu elemen terlarang masuk ke kotak komentar? Elemen terlarang adalah video, image, link aktif yang sebenarnya tidak bisa ditampilkan/digunakan dalam kotak komentar. Contohnya, seperti ini :

  Selain bisa memasukkan video, pengunjung maupun anda bisa memasukkan gambar, quote, dan kode - kode lainnya. Untuk pembuatannya, sangatlah mudah. Hanya perlu mencari beberapa kode, letakkan kode ini - itu, save. Berikut ini, tutorialnya :

1. Template.
2. Edit HTML -> Lanjutkan.
3. Centang Expand template widget.
4. Cari kode </body> NB : Gunakan CTRL + F.
5. Letakkan kode dibawah ini, diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://infoikiblog.googlecode.com/files/Menambah%20elemen%20terlarang%20%5BINFOIKI%5D.txt' type='text/javascript'/>
</b:if>

6. Cari kode </head>
7. Copas kode dibawah ini, kemudian letakkan diatas kode </head>

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

8. Save template.

                                               Cara penggunaan kode
-Untuk gambar, 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]

  Letakkan kode diatas, di atas kotak komentar supaya pengunjung mengetahui cara penggunaannya. Demo, bisa lihat di atas kotak komentar blog ini. Jangan lupa lihat sumbernya di sini : http://blogcunayz.blogspot.com/.

 -Semoga bermanfaat-