Memasukkan Gambar, Youtube, Blockquote, dan Kode Pada Komentar Blogger

Sudah lama saya tidak posting, karena banyak aktifitas diluar sana. Oke baiklah kali ini saya akan memposting artikel yang berjudul Memasukan Gambar, Youtube, Blockquote, dan Kode pada Komentar Blogger seperti yang telah dijelaskan  disini akan saya repost untuk teman-teman semua.

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.

Simpan kode ini 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 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