@FreeDomain @Review @Facebook
Gratis artikel Bang Del, daftar sekarang!
Posted by Bang Del

Blog yang Bagus Gimana Sih?

Apakah blog yang bagus menurut saya sudah bagus menurut orang lain. Apakah blog yang bagus menurut orang lain sudah bagus menurut saya. Jawaban untuk kedua pertanyaan di atas adalah belum tentu. Terkadang bagus menurut saya ternyata jelek di mata pembaca dan terkadang bagus menurut pembaca ternyata tidak bagus menurut saya. Menurut kamu blog yang bagus gimana sih?

blog yang bagus
Posted by Bang Del

Cara Promosi Blog yang Baik

Ingin blog anda terkenal? Temukan jawabannya di sini "Cara Promosi Blog yang Baik". Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.

promosi blog
Posted by Bang Del

Jenis-Jenis Bisnis Online

Sudah sering mendengar tentang Bisnis Online ya. Saya akan memberikan sedikit ulasan tentang bisnis online dan jenis-jenis bisnis online. Barangkali anda tertarik untuk memonetisasi blog. Hitung-hitung bisa dapat dollar dari internet. Artikel ini mengulas beberapa jenis bisnis online yang sedang marak dan digandrungi para blogger.

bisnis online

Image Reflection Otomatis Pada Posting

hello-reflectionSatu 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 manual kita 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid7Xdq1QWeASRqhXChIIOsuZb46XEEYkTa7OLpxhHWQPEnAN32tHlPmShWyj6apYi_N3ikNd8dUxp0cY2bjesa04Rh5YSvJC3TcEouXufM2gWVm-Iaa76WdgQzkK-Llj1yOeCUCqCDvyjl/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/AVvXsEid7Xdq1QWeASRqhXChIIOsuZb46XEEYkTa7OLpxhHWQPEnAN32tHlPmShWyj6apYi_N3ikNd8dUxp0cY2bjesa04Rh5YSvJC3TcEouXufM2gWVm-Iaa76WdgQzkK-Llj1yOeCUCqCDvyjl/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/AVvXsEid7Xdq1QWeASRqhXChIIOsuZb46XEEYkTa7OLpxhHWQPEnAN32tHlPmShWyj6apYi_N3ikNd8dUxp0cY2bjesa04Rh5YSvJC3TcEouXufM2gWVm-Iaa76WdgQzkK-Llj1yOeCUCqCDvyjl/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/AVvXsEid7Xdq1QWeASRqhXChIIOsuZb46XEEYkTa7OLpxhHWQPEnAN32tHlPmShWyj6apYi_N3ikNd8dUxp0cY2bjesa04Rh5YSvJC3TcEouXufM2gWVm-Iaa76WdgQzkK-Llj1yOeCUCqCDvyjl/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.

Related Post:


Top Blogs or My Zimbio or Bookmark and Share

2 comment:

Steve said...

Wah, di sini toh rahasianya. Makasih ya bang :D

yanvist said...

kren than's infonya, saya udah coba coba aj lhat di http://www.metall-for-all.blogspot.com

OK !

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Terima kasih, komentar anda sangat berarti bagi Bang Del. Isi pendapat anda tentang blog ini di Testimoni. Tinggalkan pesan di Blogroll untuk tukaran link.

Link Exchange | Blog Directory

Link Exchange Directory of Top Sites Dmegs.com
SEO friendly web directory of top sites & blogs organized by topic into categories and presented according to relevance ofwebsite. Submit your website free.

Tukar Link dan Promosi Website
Webkios Direktori Indonesia, katalog website untuk tukar link dan promosi gratis. Tambahkan website anda sekarang juga di direktori kami.

Increase your PageRank
The Search Engine Optimization Experiment - Increase your PageRank.

Blogarama - The Blog Directory
Get Listed At One Of The Largest FREE Blog Directories Online. Let People Find And Rate Your Blog In The Blog Directory!

2RSS.com :: RSS directory
2RSS.com :: RSS feeds, RSS directory, RSS software, RSS scripts, RSS articles, RSS syndication, XML, RDF, news.
 

Followers

Recent Comments