How to make a reflection image on your blog?

Basically create a reflection image can be done with the help of the program Photoshop, etc. But not everyone can run the program and it is certainly a problem for us. What if people like me who have little knowledge of photoshop but want to create a reflection image on a blog that I have? Of course I will think of a way to do same as you would think. Now I have a way and try to give it to you.

Login to your Dashboard » Layout » Edit Html. Next, copy the script source code below and paste between the closing b:skin tag and the closing head tag and then Save template.

<script type='text/javascript'>
//<![CDATA[
if (!document.myGetElementsByClassName) {
       document.myGetElementsByClassName = function(className) {
               var children = document.getElementsByTagName('*') || document.all;
               var elements = new Array();

               for (var i = 0; i < children.length; i++) {
                       var child = children[i];
                       var classNames = child.className.split(' ');
                       for (var j = 0; j < classNames.length; j++) {
                               if (classNames[j] == className) {
                                       elements.push(child);
                                       break;
                               }
                       }
               }
               return elements;
       }
}
var Reflection = {
       defaultHeight : 0.5,
       defaultOpacity: 0.5,

       add: function(image, options) {
               Reflection.remove(image);

               doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
               if (options) {
                       for (var i in doptions) {
                               if (!options[i]) {
                                       options[i] = doptions[i];
                               }
                       }
               } else {
                       options = doptions;
               }

               try {
                       var d = document.createElement('div');
                       var p = image;

                       var classes = p.className.split(' ');
                       var newClasses = '';
                       for (j=0;j<classes.length;j++) {
                               if (classes[j] != "reflect") {
                                       if (newClasses) {
                                               newClasses += ' '
                                       }

                                       newClasses += classes[j];
                               }
                       }

                       var reflectionHeight = Math.floor(p.height*options['height']);
                       var divHeight = Math.floor(p.height*(1+options['height']));

                       var reflectionWidth = p.width;

                       if (document.all && !window.opera) {
                               /* Fix hyperlinks */
               if(p.parentElement.tagName == 'A') {
                       var d = document.createElement('a');
                       d.href = p.parentElement.href;
               }

                               /* Copy original image's classes & styles to div */
                               d.className = newClasses;
                               p.className = 'reflected';

                               d.style.cssText = p.style.cssText;
                               p.style.cssText = 'vertical-align: bottom';

                               var reflection = document.createElement('img');
                               reflection.src = p.src;
                               reflection.style.width = reflectionWidth+'px';
                               reflection.style.display = 'block';
                               reflection.style.height = p.height+"px";

                               reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
                               reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';

                               d.style.width = reflectionWidth+'px';
                               d.style.height = divHeight+'px';
                               p.parentNode.replaceChild(d, p);

                               d.appendChild(p);
                               d.appendChild(reflection);
                       } else {
                               var canvas = document.createElement('canvas');
                               if (canvas.getContext) {
                                       /* Copy original image's classes & styles to div */
                                       d.className = newClasses;
                                       p.className = 'reflected';

                                       d.style.cssText = p.style.cssText;
                                       p.style.cssText = 'vertical-align: bottom';

                                       var context = canvas.getContext("2d");

                                       canvas.style.height = reflectionHeight+'px';
                                       canvas.style.width = reflectionWidth+'px';
                                       canvas.height = reflectionHeight;
                                       canvas.width = reflectionWidth;

                                       d.style.width = reflectionWidth+'px';
                                       d.style.height = divHeight+'px';
                                       p.parentNode.replaceChild(d, p);

                                       d.appendChild(p);
                                       d.appendChild(canvas);

                                       context.save();

                                       context.translate(5,image.height-1);
                                       context.scale(1,-1);

                                       context.drawImage(image, 0, 0, reflectionWidth, image.height);

                                       context.restore();

                                       context.globalCompositeOperation = "destination-out";
                                       var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);

                                       gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                                       gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");

                                       context.fillStyle = gradient;
                                       context.rect(0, 0, reflectionWidth, reflectionHeight*2);
                                       context.fill();
                               }
                       }
               } catch (e) {
           }
       },

       remove : function(image) {
               if (image.className == "reflected") {
                       image.className = image.parentNode.className;
                       image.parentNode.parentNode.replaceChild(image, image.parentNode);
               }
       }
}

function addReflections() {
       var rimages = document.myGetElementsByClassName('reflect');
       for (i=0;i<rimages.length;i++) {
               var rheight = null;
               var ropacity = null;

               var classes = rimages[i].className.split(' ');
               for (j=0;j<classes.length;j++) {
                       if (classes[j].indexOf("rheight") == 0) {
                               var rheight = classes[j].substring(7)/100;
                       } else if (classes[j].indexOf("ropacity") == 0) {
                               var ropacity = classes[j].substring(8)/100;
                       }
               }

               Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
       }
}

function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
   window.onload = func;
 } else {
   window.onload = function() {
     if (oldonload) {
       oldonload();
     }
     func();
   }
 }
}
addLoadEvent(function() {
 addReflections();
});
//]]>
</script>