Adding Images, Youtube Videos, Quotes and Codes to Blogger Comments - Sebetulnya tutorial ini sudah banyak yang membuatnya. Akan tetapi karena banyak pertanyaan tentang bagaimana cara memasukan gambar, video youtube, kode, catatan ke komentar Blogger, maka saya buat tutorial ini untuk memudahkan pengunjung blog ini.Tutorial ini berkaitan dengan tutorial Cara membuat pesan di atas Form Komentar Blogger.
Biasanya, hal ini digunakan oleh sahabat yang sering berbagi tutorial, untuk memmudahkan berbagi kode atau screenshoot.
Untuk sobat yang ingin melihat DEMO nya silahkan lihat di Form Comment di bawah.
Kode yang saya bagikan berasal dari DTE, karena ada sebagian kode yang tidak jalan, maka saya tambahkan yang lainnya. Silahkan sobat ikuti langkah mudahnya :
Simpan kode CSS dibawah ini tepat di atas
]]></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 JavaScript dibawah ini di atas
</body><script type='text/javascript'>Kalau udah kemudian --> Simpan Template
//<![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(/&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>
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]Apabila ada yang masih bingung silahkan di tanyakan di kolom komentar.
Semoga bermanfaat n Happy Blogging...
Inspirasi dari Blog Kang Ismet