Blognya Andika Xp

Maaf... Blog ini Hiatus dulu untuk waktu yang belum dapat ditentukan!

Satu script untuk emoticon pada postingan, widget dan komentar blog

  24 December    

Emoticon memang kelihatan sepele, namun dengan kehadiran simbol-simbol tersebutlah kita bisa membedakan mana ekspresi yang bercanda, serius, marah, sedih dan lain sebagainya.

Yah, Emoticon adalah lambang-lambang yang digunakan untuk mengambarkan ekspresi ketika kita sedang menggunakan media kontekstual. Contoh media kontekstual yang sering digunakan misalnya SMS, Chat, Blog, dan lain sebagainya.

Saya sendiri termasuk kategori orang yang sangat sering menggunakan media kontekstual salah satunya yang terlihat di blog ini hhe...

Nah, berhubung Saya ingin berbagi postingan "Satu script untuk emoticon pada postingan, widget dan komentar blog" jadi fokus utamanya adalah menambahkan Emoticon ke blog. kalau ke hape kamu ya tambahin aja sendiri.

Berdasarkan hasil penelusuran google, Saya menemukan begitu banyak bloger yang membagikan cara menambahkan Emoticon ini ke blog. Hasil paling banyak sih, sepertinya menambahkan Emoticon pada komentar. Tak jarang, jika ingin menambahkan Emoticon di blog harus menggunakan 2 script yang berbeda.

Saya memang sudah mencoba semuanya, tapi rata-rata yang bekerja hanya pada emoticon yang di tambahkan pada kolom komentar. Hmm.. ga tau juga ni salahnya dimana? Apa template dari blog ini kali ya?

Menurut mereka yang mendalami ilmu SEO, mereka sudah pasti akan memilih untuk menghindari media ekspresi ini apa lagi menggunakan 2 script untuk menampilkan emoticon di blog. Bagaimana tidak, 2 script tersebut pasti akan membuat loading blog akan terasa lebih berat. Sementara untuk SEO ada batasan-batasan tertentu yang harus di jaga ketat. Jangan menanyakan masalah SEO, karena Saya sama sekali ga ngerti sama SEO-SEOan.

Kebetulan, beberapa waktu lalu, Saya menemukan sebuah script namun memiliki tampilan Emoticon yang dinamis walau hadir hanya dalam Emoticon standar dan simple. Kalau ga salah lieosin.js atau apalah. Haduh lupa ni...

Dasarnya, Emoticon ini hanya tampil pada postingan dan widget blog saja.

Nah, karena penasaran, yah, dicoba utak-atik gitu. Dan hasilnya, bisa kamu lihat sendiri. Emoticonnya juga tampil pada kolom komentar. Sederhana sih, tapi lumayan lah untuk menampilkan ekspresi.

Mau Emoticon yang simple namun lengkap seperti ini?

Kalau iya, berikut kode dan cara penempatannya,

Buka Dashboard Blog kamu » Template » Edit HTML » Centang pada Expand Template Widget.

Kemudian cari kode </body> Gunakan Ctrl + F untuk mempermudah pencariannya,

Letakan kode dibawah ini tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[

document.getElementsByClassName = function(clsName) {
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className.indexOf(" ") >= 0) {
            var classes = elements[i].className.split(" ");
            for (var j = 0; j < classes.length; j++) {
                if (classes[j] == clsName) retVal.push(elements[i]);
            }
        } else if (elements[i].className == clsName) retVal.push(elements[i]);
    }
    return retVal;
}
function addSmiley() {
    var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
    var d = document.getElementsByClassName(postBodyClass);
    for (var i = 0; i < d.length; i++) {
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://benjamin0331.googlepages.com/smile.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://benjamin0331.googlepages.com/blink.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://benjamin0331.googlepages.com/oops.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://benjamin0331.googlepages.com/sad.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://benjamin0331.googlepages.com/lol.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://benjamin0331.googlepages.com/tongue.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://benjamin0331.googlepages.com/kiss.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://benjamin0331.googlepages.com/angry.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://benjamin0331.googlepages.com/sealed.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://benjamin0331.googlepages.com/oh.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://benjamin0331.googlepages.com/oeye.png" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
    var d = document.getElementsByClassName('comment-body');
    for (var i = 0; i < d.length; i++) {
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://benjamin0331.googlepages.com/smile.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://benjamin0331.googlepages.com/blink.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://benjamin0331.googlepages.com/oops.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://benjamin0331.googlepages.com/sad.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://benjamin0331.googlepages.com/lol.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://benjamin0331.googlepages.com/tongue.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://benjamin0331.googlepages.com/kiss.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://benjamin0331.googlepages.com/angry.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://benjamin0331.googlepages.com/sealed.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://benjamin0331.googlepages.com/oh.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://benjamin0331.googlepages.com/oeye.png" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
    var d = document.getElementsByClassName('comment-body-author');
    for (var i = 0; i < d.length; i++) {
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://benjamin0331.googlepages.com/smile.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://benjamin0331.googlepages.com/blink.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://benjamin0331.googlepages.com/oops.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://benjamin0331.googlepages.com/sad.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://benjamin0331.googlepages.com/lol.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://benjamin0331.googlepages.com/tongue.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://benjamin0331.googlepages.com/kiss.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://benjamin0331.googlepages.com/angry.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://benjamin0331.googlepages.com/sealed.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://benjamin0331.googlepages.com/oh.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://benjamin0331.googlepages.com/oeye.png" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
    var d = document.getElementsByClassName('comment-content');
    for (var i = 0; i < d.length; i++) {
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://benjamin0331.googlepages.com/smile.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://benjamin0331.googlepages.com/blink.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://benjamin0331.googlepages.com/oops.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://benjamin0331.googlepages.com/sad.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://benjamin0331.googlepages.com/lol.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://benjamin0331.googlepages.com/tongue.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://benjamin0331.googlepages.com/kiss.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://benjamin0331.googlepages.com/angry.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://benjamin0331.googlepages.com/sealed.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://benjamin0331.googlepages.com/oh.png" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://benjamin0331.googlepages.com/oeye.png" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
    var d = document.getElementsByClassName('widget-content');
    for (var i = 0; i < d.length; i++) {
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://benjamin0331.googlepages.com/smile.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://benjamin0331.googlepages.com/blink.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://benjamin0331.googlepages.com/oops.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://benjamin0331.googlepages.com/sad.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://benjamin0331.googlepages.com/lol.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://benjamin0331.googlepages.com/tongue.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*k/g, ' <img src="http://benjamin0331.googlepages.com/kiss.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://benjamin0331.googlepages.com/angry.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://benjamin0331.googlepages.com/sealed.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://benjamin0331.googlepages.com/oh.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*o/g, ' <img src="http://benjamin0331.googlepages.com/oeye.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
addLoadEvent(addSmiley);

//]]>
</script>


Cek dulu lewat Pratinjau templatenya, kalo berjalan mulus, tinggal save aja. Gampangkan?

Kode Emoticon yang bisa kamu gunakan saat menggunakan script ini,

emoticon blog :-) atau :)
emoticon blog ;-) atau ;)
emoticon blog :-$ atau :$
emoticon blog :-( atau :(
emoticon blog :-D atau :D
emoticon blog :-p atau :p
emoticon blog :-k atau :k
emoticon blog :-@ atau :@
emoticon blog :-# atau :#
emoticon blog :-x atau :x
emoticon blog :-o atau :o

Buat kamu yang membutuhkannya, silahkan dicoba.

  

  No Comments

0 komentar:

Post a Comment

Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.

Subscribe to: Post Comments (Atom)