Cara Memasang Emoticon Facebook di Blog

Bantu kami membuat situs ini menjadi lebih baik.

Dengan menonaktifkan AdBlock atau aplikasi-aplikasi sejenis yang mampu memblokir iklan, kamu sudah membantu kami untuk tetap membuat konten-konten di website ini terus update.

Untuk selengkapnya, baca artikel kami berikut ini: Suka Artikel Kami? Tolong Matikan AdBlock Anda Untuk Makintau

Halo sahabat, beberapa hari saya tidak membuat artikel di blog ini dikarenakan banyaknya masalah yang menghampiri saya. Masalah-masalah tersebut adalah yang pertama tidak punya quota internet, tapi untungnya sekarang sudah bisa beli quota internet dan alhamdulillah aktivitas online saya kembali seperti biasa. Masalah pertama sudah teratasi, tapi masalah kedua muncul. Yaitu rasa malas dan tidak punya ide. Padahal seorang blogger jika ingin sukses seharusnya memiliki semangat dan tidak pemalas, dan juga harus rajin update artikel agar pengunjung tidak kabur.

Baca: Cara Meningkatkan Traffic Pengunjung Blog dengan Mudah dan Cepat

Nah, kebetulan saat mengecek email saya menerima email dari mas +Irfan Syahputra. Dalam email tersebut mas Irfan menanyakan cara membuat smiley atau emoticon seperti yang ada di blog ini. Nah, dari situ akhirnya saya menemukan ide untuk membuatkan tutorialnya.

Cara Memasang Emoticon Facebook di Blog

Untuk memasang emoticon Facebook di blog sebenarnya sangat mudah, saya hanya mengganti gambar emoticonnya saja. Script untuk memuat emoticon ini saya dapatkan di blog +Kang Ismet dan mas +Adhy Suryadi.

Caranya adalah sebagai berikut:

1. Langkah pertama adalah copy dan paste CSS berikut dan letakkan sebelum kode ]]></b:skin>. Berikut adalah kodenya:
img.comment_emo
{
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border: 0px !important;
}

#emoticons .iconsmiley
{
    float: left;
    text-align: center;
    height: 40px;
    width: 41px;
    margin: 0 0 10px;
}

#emoticons .codesmiley
{
    display: block;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 1px;
    color: #444;
}
2. Lalu setelah itu, letakkan kode berikut ini diatas atau sebelum kode </body>. Berikut adalah kodenya:
<script type='text/javascript'>
//<![CDATA[
a=document.getElementById('comments');if(a){b=a.getElementsByTagName("p");for(i=0;i<b.length;i++){if(b.item(i).getAttribute('CLASS')=='comment-content'){
_str=b.item(i).innerHTML.replace(/:)/gi,"<img src='http://2.bp.blogspot.com/-rjBHqmLuzow/U4jdYOTvTmI/AAAAAAAADFU/vNDNYDsQ-6U/s1600/Smile.png' alt='' class='smiley'/>");
_str=_str.replace(/;)/gi,"<img src='http://4.bp.blogspot.com/-dI-0uqGofXc/U4jdaPzVMaI/AAAAAAAADFg/22gssm5LOUA/s1600/Wink.png' alt='' class='smiley'/>");
_str=_str.replace(/:'(/gi, "<img src='http://4.bp.blogspot.com/-Y4BCRNYFaUI/U4jdTX0LRRI/AAAAAAAADDc/_hu3oFD6BB0/s1600/Cry.png' alt='Cry' class='smiley'/>");
_str=_str.replace(/:angel:/gi, "<img src='http://4.bp.blogspot.com/-lI3OvkUe9fw/U4jdTM0aILI/AAAAAAAADDY/UW8ufD0Fx0I/s1600/Angel.png' alt='Angel' class='smiley'/>");
_str=_str.replace(/o.O/gi, "<img src='http://1.bp.blogspot.com/-lxLDcwUWjas/U4jdTfSl2JI/AAAAAAAADEI/biGWBIs0MR8/s1600/Confused.png' alt='Confused' class='smiley'/>");
_str=_str.replace(/:3/gi, "<img src='http://1.bp.blogspot.com/-qCO3l0a3Of0/U4jdT1-xYKI/AAAAAAAADDo/aPoOONGfxS8/s1600/Curly+Lips.png' alt='Cat' class='smiley'/>");
_str=_str.replace(/:setan:/gi, "<img src='http://1.bp.blogspot.com/-jCtBCoSp8t8/U4jdUEDpJJI/AAAAAAAADDs/S5r-HvsyKgU/s1600/Devil.png' alt='Devil' class='smiley'/>");
_str=_str.replace(/:(/gi, "<img src='http://3.bp.blogspot.com/-hBPO9yq4M-A/U4jdU0w3kiI/AAAAAAAADD4/w9xmUgOGrvE/s1600/Frown.png' alt='Sad' class='smiley'/>");
_str=_str.replace(/:o/gi, "<img src='http://3.bp.blogspot.com/-xwYaDDAbgJs/U4jdVDUaPUI/AAAAAAAADD8/2qrqnhj2Ybk/s1600/Gasp.png' alt='Gasp' class='smiley'/>");
_str=_str.replace(/8)/gi, "<img src='http://2.bp.blogspot.com/-4-8Hq6_iFQ4/U4jdViYr6ZI/AAAAAAAADEg/nqdICJcxvG4/s1600/Glasses.png' alt='Cool' class='smiley'/>");
_str=_str.replace(/:D/gi, "<img src='http://3.bp.blogspot.com/-rGV8novn0NQ/U4jdVwy5FCI/AAAAAAAADEM/qX16fQQ70_Y/s1600/Grin.png' alt='Grin' class='smiley'/>");
_str=_str.replace(/&gt;.&lt;/gi, "<img src='http://3.bp.blogspot.com/-Ocz64gKC_d8/U4jdWQLik9I/AAAAAAAADEY/GBMVHPIbQZ4/s1600/Grumpy.png' alt='Grumpy' class='smiley'/>");
_str=_str.replace(/&lt;3/gi, "<img src='http://3.bp.blogspot.com/-MVmrNlLc8W4/U4jdWsotxeI/AAAAAAAADEc/xFbuBu5l-6s/s1600/Heart.png' alt='Love' class='smiley'/>");
_str=_str.replace(/^_^/gi, "<img src='http://3.bp.blogspot.com/-gYMMmzdAZzQ/U4jdXWIYBuI/AAAAAAAADEk/I-MhVvkXTOU/s1600/Kiki.png' alt='Kiki' class='smiley'/>");
_str=_str.replace(/:p/gi, "<img src='http://4.bp.blogspot.com/-bSys2Th4TSk/U4jdZX5kf9I/AAAAAAAADFQ/MhE6p30qV58/s1600/Tounge.png' alt='Tounge' class='smiley'/>");
_str=_str.replace(/:*/gi, "<img src='http://4.bp.blogspot.com/-TJlk4bJYuHk/U4jdXjImqXI/AAAAAAAADE0/fGRQinbnP80/s1600/Kiss.png' alt='Kiss' class='smiley'/>");
_str=_str.replace(/:unsure:/gi, "<img src='http://4.bp.blogspot.com/-Ev5jYtLekqE/U4jdZb4vAHI/AAAAAAAADFY/6jGBe6oQIRs/s1600/Unsure.png' alt='Unsure' class='smiley'/>");
_str=_str.replace(/:v/gi, "<img src='http://4.bp.blogspot.com/-IcoBjFNimoE/U4jdXgCU6oI/AAAAAAAADEw/iHls7V3xIRw/s1600/Pacman.png' alt='Pacman' class='smiley'/>");
_str=_str.replace(/:upset:/gi, "<img src='http://4.bp.blogspot.com/-n5t4fxLE1tM/U4jdZ06jTXI/AAAAAAAADFc/zt_5T2HQBAc/s1600/Upset.png' alt='Upset' class='smiley'/>");
_str=_str.replace(/:like:/gi, "<img src='http://4.bp.blogspot.com/-CUKF9IRFaXc/U4j0JaYoUxI/AAAAAAAADGI/Lk3HlHE0OuY/s1600/like.png' alt='Like' class='smiley'/>");
_str=_str.replace(/:mrgreen:/gi, "<img src='http://2.bp.blogspot.com/-hQGzlUFpGK4/U4kPZsNLEOI/AAAAAAAADIc/Hfy-XoT8UPM/s1600/icon_mrgreen.gif' alt='Mr. Green' class='smiley'/>");
_str=_str.replace(/:ups:/gi, "<img src='http://4.bp.blogspot.com/-w-_Xn9XtPAY/U4kOLU3W2sI/AAAAAAAADGw/VNeeT7Ff5Gs/s1600/icon_redface.gif' alt='Ups' class='smiley'/>");
_str=_str.replace(/=))/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>")
b.item(i).innerHTML=_str;}}}
//]]>
</script>
Jika sudah, silahkan simpan template dan selamat blog Anda sudah terpasang emoticon FB. Tapi, jika Anda ingin menampilkan list emoticonnya maka ada sedikit langkah tambahan yang harus dilakukan yaitu cari kode berikut pada template blog Anda <data:blogTeamBlogMessage/> biasanya ada 4 kode, letakkan kode berikut ini tepat dibawah kode <data:blogTeamBlogMessage/> yang terakhir:
<!-- List Emoticon -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='Button' style='padding:10px 0px 0px 8px;'>
<input onclick='document.getElementById(&apos;emoticons&apos;).style.display=&apos;block&apos;;Button.style.display=&apos;none&apos;;Button2.style.display=&apos;block&apos;;' type='button' value='Show Emoticon'/>
</div>
<div id='Button2' style='display: none;padding:10px 0px 0px 8px;'>
<input onclick='document.getElementById(&apos;emoticons&apos;).style.display=&apos;none&apos;;Button.style.display=&apos;block&apos;;Button2.style.display=&apos;none&apos;;' type='button' value='Hide Emoticon'/>
</div>
<div id='emoticons' style='display: none;margin:10px 0'>
<span class='iconsmiley'><img src='http://2.bp.blogspot.com/-rjBHqmLuzow/U4jdYOTvTmI/AAAAAAAADFU/vNDNYDsQ-6U/s1600/Smile.png'/><span class='codesmiley'>:)</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-dI-0uqGofXc/U4jdaPzVMaI/AAAAAAAADFg/22gssm5LOUA/s1600/Wink.png'/><span class='codesmiley'>;)</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-Y4BCRNYFaUI/U4jdTX0LRRI/AAAAAAAADDc/_hu3oFD6BB0/s1600/Cry.png'/><span class='codesmiley'>:&#39;(</span></span>
<span class='iconsmiley'><img src='http://1.bp.blogspot.com/-jCtBCoSp8t8/U4jdUEDpJJI/AAAAAAAADDs/S5r-HvsyKgU/s1600/Devil.png'/><span class='codesmiley'>:setan:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-Ev5jYtLekqE/U4jdZb4vAHI/AAAAAAAADFY/6jGBe6oQIRs/s1600/Unsure.png'/><span class='codesmiley'>:unsure:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-n5t4fxLE1tM/U4jdZ06jTXI/AAAAAAAADFc/zt_5T2HQBAc/s1600/Upset.png'/><span class='codesmiley'>:upset:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-CUKF9IRFaXc/U4j0JaYoUxI/AAAAAAAADGI/Lk3HlHE0OuY/s1600/like.png'/><span class='codesmiley'>:like:</span></span>
<span class='iconsmiley'><img src='http://2.bp.blogspot.com/-hQGzlUFpGK4/U4kPZsNLEOI/AAAAAAAADIc/Hfy-XoT8UPM/s1600/icon_mrgreen.gif'/><span class='codesmiley'>:mrgreen:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-w-_Xn9XtPAY/U4kOLU3W2sI/AAAAAAAADGw/VNeeT7Ff5Gs/s1600/icon_redface.gif'/><span class='codesmiley'>:ups:</span></span>
<span class='iconsmiley'><img src='http://1.bp.blogspot.com/-lxLDcwUWjas/U4jdTfSl2JI/AAAAAAAADEI/biGWBIs0MR8/s1600/Confused.png'/><span class='codesmiley'>o.O</span></span>
<span class='iconsmiley'><img src='http://1.bp.blogspot.com/-qCO3l0a3Of0/U4jdT1-xYKI/AAAAAAAADDo/aPoOONGfxS8/s1600/Curly+Lips.png'/><span class='codesmiley'>:3</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-hBPO9yq4M-A/U4jdU0w3kiI/AAAAAAAADD4/w9xmUgOGrvE/s1600/Frown.png'/><span class='codesmiley'>:(</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-xwYaDDAbgJs/U4jdVDUaPUI/AAAAAAAADD8/2qrqnhj2Ybk/s1600/Gasp.png'/><span class='codesmiley'>:o</span></span>
<span class='iconsmiley'><img src='http://2.bp.blogspot.com/-4-8Hq6_iFQ4/U4jdViYr6ZI/AAAAAAAADEg/nqdICJcxvG4/s1600/Glasses.png'/><span class='codesmiley'>8)</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-rGV8novn0NQ/U4jdVwy5FCI/AAAAAAAADEM/qX16fQQ70_Y/s1600/Grin.png'/><span class='codesmiley'>:D</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-Ocz64gKC_d8/U4jdWQLik9I/AAAAAAAADEY/GBMVHPIbQZ4/s1600/Grumpy.png'/><span class='codesmiley'>&gt;.&lt;</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-MVmrNlLc8W4/U4jdWsotxeI/AAAAAAAADEc/xFbuBu5l-6s/s1600/Heart.png'/><span class='codesmiley'>&lt;3</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-gYMMmzdAZzQ/U4jdXWIYBuI/AAAAAAAADEk/I-MhVvkXTOU/s1600/Kiki.png'/><span class='codesmiley'>^_^</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-bSys2Th4TSk/U4jdZX5kf9I/AAAAAAAADFQ/MhE6p30qV58/s1600/Tounge.png'/><span class='codesmiley'>:p</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-TJlk4bJYuHk/U4jdXjImqXI/AAAAAAAADE0/fGRQinbnP80/s1600/Kiss.png'/><span class='codesmiley'>:*</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-IcoBjFNimoE/U4jdXgCU6oI/AAAAAAAADEw/iHls7V3xIRw/s1600/Pacman.png'/><span class='codesmiley'>:v</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/><span class='codesmiley'>=))</span></span>
</div></b:if>
<!-- List End -->
Jadi, kurang lebih akan terlihat seperti ini:
<data:blogTeamBlogMessage/>
<!-- List Emoticon -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='Button' style='padding:10px 0px 0px 8px;'>
<input onclick='document.getElementById(&apos;emoticons&apos;).style.display=&apos;block&apos;;Button.style.display=&apos;none&apos;;Button2.style.display=&apos;block&apos;;' type='button' value='Show Emoticon'/>
</div>
<div id='Button2' style='display: none;padding:10px 0px 0px 8px;'>
<input onclick='document.getElementById(&apos;emoticons&apos;).style.display=&apos;none&apos;;Button.style.display=&apos;block&apos;;Button2.style.display=&apos;none&apos;;' type='button' value='Hide Emoticon'/>
</div>
<div id='emoticons' style='display: none;margin:10px 0'>
<span class='iconsmiley'><img src='http://2.bp.blogspot.com/-rjBHqmLuzow/U4jdYOTvTmI/AAAAAAAADFU/vNDNYDsQ-6U/s1600/Smile.png'/><span class='codesmiley'>:)</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-dI-0uqGofXc/U4jdaPzVMaI/AAAAAAAADFg/22gssm5LOUA/s1600/Wink.png'/><span class='codesmiley'>;)</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-Y4BCRNYFaUI/U4jdTX0LRRI/AAAAAAAADDc/_hu3oFD6BB0/s1600/Cry.png'/><span class='codesmiley'>:&#39;(</span></span>
<span class='iconsmiley'><img src='http://1.bp.blogspot.com/-jCtBCoSp8t8/U4jdUEDpJJI/AAAAAAAADDs/S5r-HvsyKgU/s1600/Devil.png'/><span class='codesmiley'>:setan:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-Ev5jYtLekqE/U4jdZb4vAHI/AAAAAAAADFY/6jGBe6oQIRs/s1600/Unsure.png'/><span class='codesmiley'>:unsure:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-n5t4fxLE1tM/U4jdZ06jTXI/AAAAAAAADFc/zt_5T2HQBAc/s1600/Upset.png'/><span class='codesmiley'>:upset:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-CUKF9IRFaXc/U4j0JaYoUxI/AAAAAAAADGI/Lk3HlHE0OuY/s1600/like.png'/><span class='codesmiley'>:like:</span></span>
<span class='iconsmiley'><img src='http://2.bp.blogspot.com/-hQGzlUFpGK4/U4kPZsNLEOI/AAAAAAAADIc/Hfy-XoT8UPM/s1600/icon_mrgreen.gif'/><span class='codesmiley'>:mrgreen:</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-w-_Xn9XtPAY/U4kOLU3W2sI/AAAAAAAADGw/VNeeT7Ff5Gs/s1600/icon_redface.gif'/><span class='codesmiley'>:ups:</span></span>
<span class='iconsmiley'><img src='http://1.bp.blogspot.com/-lxLDcwUWjas/U4jdTfSl2JI/AAAAAAAADEI/biGWBIs0MR8/s1600/Confused.png'/><span class='codesmiley'>o.O</span></span>
<span class='iconsmiley'><img src='http://1.bp.blogspot.com/-qCO3l0a3Of0/U4jdT1-xYKI/AAAAAAAADDo/aPoOONGfxS8/s1600/Curly+Lips.png'/><span class='codesmiley'>:3</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-hBPO9yq4M-A/U4jdU0w3kiI/AAAAAAAADD4/w9xmUgOGrvE/s1600/Frown.png'/><span class='codesmiley'>:(</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-xwYaDDAbgJs/U4jdVDUaPUI/AAAAAAAADD8/2qrqnhj2Ybk/s1600/Gasp.png'/><span class='codesmiley'>:o</span></span>
<span class='iconsmiley'><img src='http://2.bp.blogspot.com/-4-8Hq6_iFQ4/U4jdViYr6ZI/AAAAAAAADEg/nqdICJcxvG4/s1600/Glasses.png'/><span class='codesmiley'>8)</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-rGV8novn0NQ/U4jdVwy5FCI/AAAAAAAADEM/qX16fQQ70_Y/s1600/Grin.png'/><span class='codesmiley'>:D</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-Ocz64gKC_d8/U4jdWQLik9I/AAAAAAAADEY/GBMVHPIbQZ4/s1600/Grumpy.png'/><span class='codesmiley'>&gt;.&lt;</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-MVmrNlLc8W4/U4jdWsotxeI/AAAAAAAADEc/xFbuBu5l-6s/s1600/Heart.png'/><span class='codesmiley'>&lt;3</span></span>
<span class='iconsmiley'><img src='http://3.bp.blogspot.com/-gYMMmzdAZzQ/U4jdXWIYBuI/AAAAAAAADEk/I-MhVvkXTOU/s1600/Kiki.png'/><span class='codesmiley'>^_^</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-bSys2Th4TSk/U4jdZX5kf9I/AAAAAAAADFQ/MhE6p30qV58/s1600/Tounge.png'/><span class='codesmiley'>:p</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-TJlk4bJYuHk/U4jdXjImqXI/AAAAAAAADE0/fGRQinbnP80/s1600/Kiss.png'/><span class='codesmiley'>:*</span></span>
<span class='iconsmiley'><img src='http://4.bp.blogspot.com/-IcoBjFNimoE/U4jdXgCU6oI/AAAAAAAADEw/iHls7V3xIRw/s1600/Pacman.png'/><span class='codesmiley'>:v</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/><span class='codesmiley'>=))</span></span>
</div></b:if>
<!-- List End -->
Setelah itu simpan template Anda dan sekarang coba lihat apakah ada perubahan pada blog Anda. Selamat mencoba, dan semoga berhasil.