Membuat Image Reflection Otomatis Pada Blog

Satu lagi cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Kalau pada posting yang sebelumnya, di image reflection manualkita bisa membuat efek bayangan ini dengan bantuan pihak ketiga dari situs image reflection maker, maka yang ini lebih simple dan sederhana. Anda bisa membuat gambar atau image yang dipostingkan akan berbayang atau tidak. Artinya, tinggal disesuaikan dengan kebutuhan saja. Caranya dengan menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting.

Membuat image reflection otomatis pada posting

1. Login ke blogger dengan id anda


2. Klik Tata Letak


3. Pilih menu Edit HTML


4. Letakkan kode berikut di atas kode </head>
   

   <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>



5. Klik tombol Simpan Template


6. Selesai