TRIK MUDAH MENAMBAHKAN GAMBAR, VIDEO, KODE PADA KOMENTAR BLOG

TRIK MUDAH MENAMBAHKAN GAMBAR, VIDEO, KODE PADA KOMENTAR BLOG
Postingan kali Suami Saya JUGA akan membagikannya ditunjukan kepada Teman-teman Semua yang Ingin mempercantik Blognya DENGAN Menambahkan Gambar, Video, Kode Dan Blockquote PADA Komentar Blog.

Silahkan SIMAK Langkah-langkahnya berikut Ini:


1 - Simpan Kode berikut Diatas ]]> </ b: skin>

# Comment-holder .cm-youtube {
  display: block;
  ! border: none penting;
  background-color: # 333;
  width: 450px;
  height: 240px;
  margin: 0 auto 30px;
}
# Comment-holder .cm-gambar {
  display: block;
  margin: 0 auto 15px;
  garis: none;
  border: 1px # ccc padat;
  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: 5px;
  max-width: 96%;
  height: auto;
  width: auto;
}
kode, kode # comment-holder,
# Comment-holder i [rel = "code"] {
  Font: normal 12px Monaco, "Courier New", Monospace;
  warna: biru;
}
pra, # comment-holder pra,
# Comment-holder i [rel = "pre"] {
  display: block;
  Font: normal 12px Monaco, "Courier New", Monospace;
  background-color: # 333;
  warna: putih;
  padding: 0.5em 1em;
  word-wrap: normal;
  white-space: pre;
  overflow: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
blockquote, # 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: normal;
  font-style: italic;
}
# Comment-holder i [rel = "image"],
# Comment-holder i [rel = "youtube"] {
  display: block;
  overflow: hidden;
  border: 2px padat hitam;
  position: relative;
  width: 170px;
  height: 100px;
  margin: 0 auto 30px;
}
# Comment-holder i [rel = "image"]: sebelumnya,
# Comment-holder i [rel = "youtube"]: sebelum {
  konten: "Silahkan mengaktifkan JavaScript Andari UNTUK Melihat hal gambar Suami!";
  position: absolute;
  top: 0;
  kanan: 0;
  bottom: 0;
  kiri: 0;
  background-color: red;
  warna: putih;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}
# Comment-holder i [rel = "youtube"]: sebelum {
  konten: "Silahkan mengaktifkan JavaScript Andari UNTUK Suami Video Melihat hal!";
}

 2 - Kode Simpan berikut Diatas </ body>

<Script type = 'text / javascript'>
// <! [CDATA [
Fungsi repText (id) {
var a = document.getElementById (id),
 b = a.innerHTML,
 b = b.replace (/ <i rel = "image"> (. [^ \>] *) <\ / i> / ig, "<img class = 'cm-image' src = '$ 1' alt = ' loading ... '\ /> ");
 b = b.replace (/ \ [img \] (. [^ \]] *) \ [\ / img \] / ig, "<img class = 'cm-image' src = '$ 1' alt = 'pemuatan ... '\ /> ");
 b = b.replace (/ <i rel = "youtube"> http:. \ / \ / www.youtube.com \ / embed \ / ([^>] *) <\ / i> / ig, "<iframe class = 'cm-youtube' src = 'http: //www.youtube.com/embed/$1'> <\ / iframe> ");
 b = b.replace (/ <i rel = "youtube"> (http: \ / \ / youtu.be | http:? \ / \ / www.youtube.com \ / jam \ v =) ([^>. ] *) <\ / i> / ig, "<iframe class = 'cm-youtube' src = 'http: //www.youtube.com/embed/$2'> <\ / iframe>");
 b = b.replace (/ \ [youtube \] http:. \ / \ / www.youtube.com \ / embed \ / ([^ \]] *) \ [\ / youtube \] / ig, "<iframe class = 'cm-youtube' src = 'http: //www.youtube.com/embed/$1'> <\ / iframe> ");
 b = "<Iframe class = 'cm-youtube' src = 'http: //www.youtube.com/embed/$2'> <\ / iframe>");
 document.getElementById (id) .innerHTML = b;
 b = b.replace (/ <i rel = "code"> (*) <\ / i> / ig, "<code> $ 1 <\ / code>".?);
 b = b.replace (/ <i rel = "pre"> (*) <\ / i> / ig, "<pre> $ 1 <\ / pre>".?);
 b = b.replace (.? / <b rel = "quote"> (*) <\ / b> / ig, "<blockquote> $ 1 <\ / blockquote>");
 b = b.replace (/ & amp; fitur = [0-9a-zA-Z -_] * / ig, "");
 b = b.replace (/ \ / s (640 | 1600) / g, "/ s400");
 } RepText ('comment-holder');
c = document.getElementById ('comment-holder');
if (c) {
 b = c.getElementsByTagName ("p");
 untuk (i = 0; i <b.length; i ++) {
  if (b.item (i) .getAttribute ('CLASS') == 'comment-konten') {
   ki_comm = b.item (i) .innerHTML.replace (/ \ [code \] (. [^ \]] *) \ [\ / kode \] / ig, "<code> $ 1 <\ / code>") ;
   ki_comm = ki_comm.replace (. / \ [pre \] ([^ \]] *) \ [\ / pra \] / ig, "<pre> $ 1 <\ / pre>");
   ki_comm = ki_comm.replace (/ \ [blockquote \] ([^ \]] *) \ [\ / blockquote \] / ig, "<blockquote> $ 1 <\ / blockquote>".);
   ki_comm = ki_comm.replace (/ \ [quote \] ([^ \]] *) \ [\ / quote \] / ig, "<blockquote> $ 1 <\ / blockquote>".);      
   b.item (i) .innerHTML = ki_comm;
  }
 }
}
//]]>
</ Script>

Kemudian Simpan Template.

3 - Cara Penulisan (Mengaplikasikan)


Berikut Adalah Cara Menuliskannya / Format Penulisan pãda komentar blog Andari.

Menulis Tag <code>
<I rel = "code"> tulis Kode Yang Sudah diparse here </ i> Ngayogyakarta
[Code] tulis Kode Yang Sudah diparse here [/ code]

Menulis Tag <pre>
<I rel = "pre"> tulis Kode Yang Sudah diparse here </ i> Ngayogyakarta
[Pre] tulis Kode Yang Sudah diparse here [/ pre]

Menulis Catatan (Blockquote)
<B rel = "quote"> tulis Catatan here </ b> Ngayogyakarta
[Quote] tulis Catatan here [/ quote] Ngayogyakarta
[Blockquote] tulis Catatan here [/ blockquote]

Memasukan / Menambahkan Gambar
<I rel = "image"> tulis URL gambar here </ i> Ngayogyakarta
[Img] tulis URL gambar here [/ img]

Memasukan / Menambahkan Video Youtube
<I rel = "youtube"> tulis URL Video Youtube here </ i> Ngayogyakarta
[Youtube] URL Video Youtube tulis here [/ youtube]

Bermanfa'at Semoga