Cara Membuat Image Reflection Otomatis Pada Blog.

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


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="http://1.bp.blogspot.com/_IbUUaFMztzE/Su4RZVBDkzI/AAAAAAAAA2M/rR1OetLLTrs/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="http://1.bp.blogspot.com/_IbUUaFMztzE/Su4RZVBDkzI/AAAAAAAAA2M/rR1OetLLTrs/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="http://1.bp.blogspot.com/_IbUUaFMztzE/Su4RZVBDkzI/AAAAAAAAA2M/rR1OetLLTrs/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="http://1.bp.blogspot.com/_IbUUaFMztzE/Su4RZVBDkzI/AAAAAAAAA2M/rR1OetLLTrs/s400/hello.jpg" alt="" class="reflect" id="BLOGGER_PHOTO_ID_5399272130099778354" border="0" />


Contoh kedua :
Upload gambar dari URL tertentu, seperti ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://s3.tinypic.com/wb6wep_th.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 160px; height: 160px;" src="http://s3.tinypic.com/wb6wep_th.jpg" alt="" border="0" /></a>

Tambahkan kode class="reflect" sehingga menjadi ini :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://s3.tinypic.com/wb6wep_th.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 160px; height: 160px;" src="http://s3.tinypic.com/wb6wep_th.jpg" alt="" class="reflect" border="0" /></a>

Jika sudah selesai, sekarang klik Publish Post atau terbitkan entri dan lihat hasilnya. Oke, nampaknya tidak ada masalah berarti, selamat mencoba image reflection dan semoga bermanfaat.

Contact

Talk to us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iusto fugit esse soluta quae debitis quibusdam harum voluptatem, maxime, aliquam sequi. Tempora ipsum magni unde velit corporis fuga, necessitatibus blanditiis.

Address:

9983 City name, Street name, 232 Apartment C

Work Time:

Monday - Friday from 9am to 5pm

Phone:

595 12 34 567

Google+ Badge

Subscribe to our Newsletter to get important updates about our network & spicy inside stories.

The Best Choice For Your Best Moment

Chat Now

YM

Contact

Address:

PERUM Bekasi Timur Regensi Blok o9 No.12C
Kota Legenda
Bekasi Timur
Bekasi
Hotline:

Office : 021-8261-8157
Esia : 021-9622 1992
Cell : 0812-990 600 47 -Telkomsel
Cell : 0812-9080 1569 -Telkomsel
Cell : 0819 468 18 774 -Telkomsel
BBM : 54DBE84A
Whatsapp: 0812-9906-0047
EMAIL:
Dewiswedding[et]yahoo[dot]com

Follow on Facebook

Find Us on Facebook

Search

Most Popular
Videos