Cara Memasang Emoticon Facebook di Blog

10 min


0

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.


Like it? Share with your friends!

0

What's Your Reaction?

Bangga Bangga
0
Bangga
Keren Keren
0
Keren
Lucu Lucu
0
Lucu
Sedih Sedih
0
Sedih
Wow Wow
0
Wow
Marah Marah
0
Marah
Takut Takut
0
Takut

Legend

Comments

comments

11 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  1. saya pake template bikinan mas adhy suryadi mas.. jadi sudah ada emoticonnya hehehe saya save dulu deh mas tutornya saya mau pasang di blog saya yang satunya saja hehehe makasih mas nazar

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format