Wednesday, August 7, 2013

Cara Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar


Pada Tutorial kali ini saya akan membahas Cara Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar, Sebetulnya tutorial ini milik kangismet. Akan tetapi saya di sini cumang ngeshare agar lebih luas lagi, Mungkin ini postingan terakhir saya karena saya mungkin tidak posting lagi setelah lebaran dikarenakan saya pergi hehe..oke langsung aja caranya sob...
1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.


#comment-holder .cm-youtube {

  display:block;

  border:none !important;

  background-color:#333;

  width:450px;

  height:240px;

  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:5px;

  max-width:96%;

  height:auto;

  width:auto;

}

code, #comment-holder code,

#comment-holder i[rel="code"] {

  font:normal 12px Monaco,"Courier New",Monospace;

  color:blue;

}

pre, #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;

  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 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!";

}

  • Kemudian, simpan kode ini di atas </body>


<script type='text/javascript'>

//<![CDATA[

function 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='loading...' \/>");

 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\/watch\?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 = 
b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig,
 "<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;feature=[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");

 for (i = 0; i < b.length; i++) {

  if (b.item(i).getAttribute('CLASS') == 'comment-content') {

   ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");

   ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/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> 
Simpan Template

Format Penulisan

Menulis Tag <code>
<i rel="code">Tulis kode yang sudah diparse di sini</i>, atau
[code]Tulis kode yang sudah diparse di sini[/code]

Menulis Tag <pre>
<i rel="pre">Tulis kode yang sudah diparse di sini</i>, atau
[pre]Tulis kode yang sudah diparse di sini[/pre]

Menulis Catatan (Blockquote)
<b rel="quote">Tulis catatan di sini</b>, atau
[quote]Tulis catatan di sini[/quote], atau
[blockquote]Tulis catatan di sini[/blockquote]

Memasukan Gambar
<i rel="image">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]

Memasukan Video Youtube
<i rel="youtube">Tulis URL Video Youtube di sini</i>, atau
[youtube]Tulis URL Video Youtube di sini[/youtube]

Oke Mungkin Cukup Sekian, Semoga Bermanfaat ^_^
Henry dan Keluarga mengucapkan minal aidin wal faizin... mohon maaf lahir dan batin

Related Posts

Cara Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

17 komentar

Tulis komentar
avatar
August 7, 2013 at 7:30 PM

wah cara bagus nih om! wajib coba ^^

Reply
avatar
August 7, 2013 at 7:31 PM

iya nih emg wajib, btw ane masih 14 thn

Reply
avatar
Anonymous
August 7, 2013 at 7:40 PM

Wah Bagus Nih Ijin Praktek ya Om >.<

Reply
avatar
August 7, 2013 at 8:05 PM

iya silakan sob, di panggil om lagi -_-

Reply
avatar
August 8, 2013 at 2:00 PM

Ijin coba gan :)

Komen balik gan di www.kevin-432.blogspot.com

Reply
avatar
August 8, 2013 at 2:07 PM

silakan coba gan :), siap meluncur

Reply
avatar
August 8, 2013 at 11:12 PM

oke gan keren dan bermanfaat banget infonya ^^
thank's ya udah mau berkunjung ke blog saya dan udah di follback juga blog agan :D

Reply
avatar
August 8, 2013 at 11:39 PM

iya gan, semoga tambah bermanfaat lagi ^_^

Reply
avatar
Anonymous
August 9, 2013 at 6:49 PM

keren ga , nyoba dulu.
Back yah

Reply
avatar
August 14, 2013 at 9:50 PM

Thx infonya gan, bisa ane coba ni

Reply
avatar
February 10, 2019 at 1:47 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
=======================================================