Membuat Efek Mirror/Reflect Pada Gambar di Blog

Tutorial kali ini saya sajikan untuk temen-temen blogger yang seneng dengan modifikasi gambar di dalam postingan. Selain membuat efek shadow pada gambar postingan, kita juga bisa memberikan efek mirror atau reflect pada gambar yang ada di postingan. Sebenarnya membuat efek mirror ini bisa juga dengan menggunakan situs-situs online, seperti reflectionmaker.com untuk gambar dan mirrortext.net untuk membuat efek mirror pada teks atau tulisan.

Cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Gambar diatas adalah salah satu contoh dari efek mirror yang saya buat dengan cara menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting. Untuk lebih jelasnya perhatikan langkah-langkah berikut ini :

Membuat image reflection otomatis pada posting

Login ke blogger dengan id anda
Klik Tata Letak
Pilih menu Edit HTML

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>

Klik tombol Simpan Template
Selesai

Cara menggunakan perintah image reflection class="reflect"

Misalnya anda upload image saat membuat postingan di blogger. Ada dua pilihan yaitu upload dari komputer atau dari URL tertentu, maka anda tinggal menambahkan perintah class="reflect" pada kode gambar. Sebagai catatan, lakukan ini pada posisi posting pilihan Edit HTML, jangan pada posisi Compose.

Contoh pertama:
Upload gambar dari komputer seperti ini :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysLkufMKom9fySVEEEYU1pEWOn2NrywGoaj1uvbJziZp3URnpgYzBA6-Nu7USBM_RuBQ07786SlIc9tKn4xKoGVCbIICYmqI4_Co11GmHfJGmdIXETovSWh_x-aSlC5m11mu5zrykJ6Q6/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysLkufMKom9fySVEEEYU1pEWOn2NrywGoaj1uvbJziZp3URnpgYzBA6-Nu7USBM_RuBQ07786SlIc9tKn4xKoGVCbIICYmqI4_Co11GmHfJGmdIXETovSWh_x-aSlC5m11mu5zrykJ6Q6/s400/hello.jpg" alt="" id="BLOGGER_PHOTO_ID_5399272130099778354" border="0" />

Tambahkan kode class="reflect" sehingga menjadi ini :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysLkufMKom9fySVEEEYU1pEWOn2NrywGoaj1uvbJziZp3URnpgYzBA6-Nu7USBM_RuBQ07786SlIc9tKn4xKoGVCbIICYmqI4_Co11GmHfJGmdIXETovSWh_x-aSlC5m11mu5zrykJ6Q6/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysLkufMKom9fySVEEEYU1pEWOn2NrywGoaj1uvbJziZp3URnpgYzBA6-Nu7USBM_RuBQ07786SlIc9tKn4xKoGVCbIICYmqI4_Co11GmHfJGmdIXETovSWh_x-aSlC5m11mu5zrykJ6Q6/s400/hello.jpg" alt="" class="reflect" id="BLOGGER_PHOTO_ID_5399272130099778354" border="0" />

Contoh kedua :
Upload gambar dari URL tertentu, seperti ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DihSZhC7MStlNWRjzhTg8EuKMf0Jhg9M4jtqOzkrJFBF-FydqDJF234bVHX5278fW9RkKCvhGAKJMKu_xJ9a8hm0gO_bBHQoj7YgcmMNpc-nTAkzKmCE4ATqFPGI_FVjQv2dDKR1Cdc/s1600/shadow+maskolis.jpg" imageanchor="1"><img alt="shadow effect maskolis" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DihSZhC7MStlNWRjzhTg8EuKMf0Jhg9M4jtqOzkrJFBF-FydqDJF234bVHX5278fW9RkKCvhGAKJMKu_xJ9a8hm0gO_bBHQoj7YgcmMNpc-nTAkzKmCE4ATqFPGI_FVjQv2dDKR1Cdc/s1600/shadow+maskolis.jpg" style="margin-left: 1em; margin-right: 1em;" /></a>

Tambahkan kode class="reflect" sehingga menjadi ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DihSZhC7MStlNWRjzhTg8EuKMf0Jhg9M4jtqOzkrJFBF-FydqDJF234bVHX5278fW9RkKCvhGAKJMKu_xJ9a8hm0gO_bBHQoj7YgcmMNpc-nTAkzKmCE4ATqFPGI_FVjQv2dDKR1Cdc/s1600/shadow+maskolis.jpg" imageanchor="1"><img alt="shadow effect maskolis" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DihSZhC7MStlNWRjzhTg8EuKMf0Jhg9M4jtqOzkrJFBF-FydqDJF234bVHX5278fW9RkKCvhGAKJMKu_xJ9a8hm0gO_bBHQoj7YgcmMNpc-nTAkzKmCE4ATqFPGI_FVjQv2dDKR1Cdc/s1600/shadow+maskolis.jpg" class="reflect" style="margin-left: 1em; margin-right: 1em;" /></a>

Kalau sudah selesai, sekarang klik Publish Post atau terbitkan entri dan lihat hasilnya. Sekian tutorial malam ini semoga tidak ada kesulitan, selamat mencoba dan semoga bermanfaat.

Membuat Efek Mirror/Reflect Pada Gambar di Blog

Post a Comment

Popular Posts

Membuat Efek Mirror/Reflect Pada Gambar di Blog

Related Posts

Post a Comment

Popular Posts