Add More Features in the Blogger Comments

Example of script conflict.

by Taufik Nurrohman

HTML

<div id="comment-holder">
    <i rel="youtube">http://youtu.be/-joKveiaabA</i>
    [youtube]http://youtu.be/-joKveiaabA[/youtube]
</div>

CSS

body {
  padding:20px;
}

/* 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:5px;
  max-width:96%;
  height:auto;
  width:auto\9;
}

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

JavaScript

// Example of another function that will destroy my code below:
// This function will replace the <i rel="youtube"> to <i rel="another">
// So, my code below will not see the `<i rel="youtube"> character` (they're gone!) and will not replace it to a YouTube video :(
var container = document.getElementById('comment-holder');
container.innerHTML = container.innerHTML.replace(/<i rel="youtube">/g, "<i rel=\"another\">");








// Add More Features to the Blogger Comments
// Fix some bugs that I got from some similar code out here :)
// Date: 21 May 2012
// Time: 22:50 WIB
// Author: Taufik Nurrohman
// URL: http://hompimpaalaihumgambreng.blogspot.com
function repText(id) {
    var a = (document.getElementById(id)) ? document.getElementById(id) : "",
        b = (a !== "") ? a.innerHTML : a,
        c = "http://reader-download.googlecode.com/svn/trunk/images/emo/";
        // Images
        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...' \/>");
        // YouTube video
        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>");
        // Code & text block
        b = b.replace(/<i rel="code">(.[^>]*)<\/i>/ig, "<code>$1<\/code>");
 ...