Cara Membuat Emoticon Di Komentar Blogger #2

Posted in Labels: Blog Code | Wednesday, March 7, 2012 [ 7:00 AM ]

Home » Blog Code » Cara Membuat Emoticon Di Komentar Blogger #2

Melanjutkan postingan saya sebelumnya tentang memasang emoticon di komentar blogger, pada postingan kali ini saya mencoba untuk menyederhanakan cara pemasangan trik ini sehingga lebih mudah untuk diaplikasikan dan juga bisa berhasil untuk pemasangan emoticon di komentar blogger. Postingan kali ini juga untuk menggantikan postingan yang lama dikarenakan banyak kegagalan dalam menerapkan pemasangan emoticon di komentar blogger, tapi postingan lama tetap saya pasang karena cara yang lama masih cocok digunakan untuk template blog yang masih menggunakan versi lama.

Memasang Emoticon Yahoo pada kotak komentar blog Blogger bermaksud untuk membuat tampilan komentar para komentator/pengunjung menjadi lebih menarik, selain itu dengan adanya fasilitas penambahan emoticon pada kotak komentar ini menjadikan para pengunjung blog kita bisa mengekpresikan emosi mereka dalam mengomentari postingan kita.

Memang banyak sekali cara untuk trik pemasangan emoticon di komentar blog apabila kita cari melalui search engine google, kebanyakan dari para blogger yang membuat postingan trik pemasangan emoticon di komentar blogger ini masih menggunakan cara lama yang kebanyakan gagal untuk diaplikasikan, kalo ga percaya coba tes dikotak komentar blogger yang membuat postingan pemasangan emoticon di komentar pasti kebanyakan tidak keluar emoticonnya alias gagal. Biasanya yang gagal cuma copy-paste (copas) doank... alias tidak di coba dahulu sebelum membuat postingan artikel pemasangan emoticon di komentar... Semoga sobat blogger yang membaca postingan artikel ini bukan termasuk orang suka copas postingan artikel orang lain tanpa seizin yang punya... hehehe :):) oke sob... langsung aja kita ke TKP...

Cara Pemasangan :

Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

Cari kode <p class='comment-footer'> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode <p class='comment-footer'> tersebut. Jika kode <p class='comment-footer'> ada dua maka pilih yang kedua atau yang ada di bawah.

<hr/>
<div align='center'><span><a href="javascript:animatedcollapse.toggle('cemo')"><span style='color: #ffffff;'><b>Yahoo Emoticon</b></span></a></span><b style='color: #ffffff;'> | </b><a href="javascript:animatedcollapse.toggle('uiemo')"><span style='color: #ffffff;'><b>Upin&Ipin Emoticon</b></span></a><b style='color: #ffffff;'> | </b><a href="javascript:animatedcollapse.toggle('kkemo')"><span style='color: #ffffff;'><b>KasKus Emoticon</b></span></a></div>

<br/>

<center>
<div id='cemo' style='border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ebe9da; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 50px;'><center>
<b>
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))

</b></center></div></center>

<center>
<div id='uiemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 110px;'><center>
<b><img height='50' src='http://lh5.googleusercontent.com/-0n2cpDdK2os/Tz4AI_R7UTI/AAAAAAAAA_M/BnRcao-IwHU/s800/ehsan01.gif' width='50'/>
:a:
<img height='50' src='http://lh5.googleusercontent.com/-mCQ8cZ4yC2w/Tz4Adaz50AI/AAAAAAAAA_g/3hSH4T0ludY/s800/ehsan02.gif' width='50'/>
:b:
<img height='50' src='http://lh6.googleusercontent.com/-JeWZ9SuEl3I/Tz4AdfXqxtI/AAAAAAAAA_k/bRuWwS40qbg/s800/fizi01.gif' width='50'/>
:c:
<img height='50' src='http://lh4.googleusercontent.com/-6mKK55Etzcw/Tz4AdZ-42gI/AAAAAAAAA_o/W5dAjrP2BYg/s800/ipin01.gif' width='50'/>
:d:
<img height='50' src='http://lh3.googleusercontent.com/-ToHD6mdqv6g/Tz4Aep8-1uI/AAAAAAAAA_w/S5ACTAENsKk/s800/ipin02.gif' width='50'/>
:e:
<img height='50' src='http://lh3.googleusercontent.com/-ywRCTv7chXA/Tz4AevsyowI/AAAAAAAAA_0/xg7vya2vtvA/s800/kakros01.gif' width='50'/>
:f:
<img height='50' src='http://lh3.googleusercontent.com/-ydaj69VDdlU/Tz4Aey6BEnI/AAAAAAAAA_4/uvq3GU3v3Eg/s800/kakros02.gif' width='50'/>
:g:
<img height='50' src='http://lh6.googleusercontent.com/-xXDkjM8SNKM/Tz4AgAW3BqI/AAAAAAAABAM/BvrkzDUUtaY/s800/mail01.gif' width='50'/>
:h:
<img height='50' src='http://lh3.googleusercontent.com/-M83gze63Ecg/Tz4Af-QFh3I/AAAAAAAABAY/ZVhNb62CAcg/s800/upin01.gif' width='50'/>
:i:
<img height='50' src='http://lh5.googleusercontent.com/-RV7AvDrQBIg/Tz4AgFP6TDI/AAAAAAAABAU/baVU339IpcQ/s800/upin02.gif' width='50'/>
:j:
</b></center></div></center>

<center>
<div id='kkemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 150px;'><center>
<b><img src='http://lh4.googleusercontent.com/-elteyu9j0ZA/T0DJ4ZPOPEI/AAAAAAAABE0/V164S3vG2Es/s800/sundul.gif' width='40'/>
:ka:
<img src='http://lh4.googleusercontent.com/-kfpB6BSl6L8/T0DHBGQPvXI/AAAAAAAABEc/09bf8p8ilgA/s800/s_big_cendol.gif' width='40'/>
:kb:
<img src='http://lh6.googleusercontent.com/-6aweKr9ee1g/T0DKdz_ubLI/AAAAAAAABE8/Lm05aw2WulQ/s800/shakehand2.gif' width='40'/>
:kc:
<img src='http://lh5.googleusercontent.com/-UGl56_JqXyI/T0DG9YM_ckI/AAAAAAAABD8/cAMkupClLKg/s800/ngakak.gif' width='40'/>
:kd:
<img src='http://lh4.googleusercontent.com/-KKRlwKznE44/T0DNePlvN7I/AAAAAAAABFI/mK-hYCJSeQA/s800/pertamax.gif' width='40'/>
:ke:
<img src='http://lh4.googleusercontent.com/-02G-YphioXQ/T0DOuYYOpuI/AAAAAAAABFQ/2oSLOlYjITU/s800/mewek.gif' width='40'/>
:kf:
<img src='http://lh4.googleusercontent.com/-JLQ6VLH_8eQ/T0DPBxzIdTI/AAAAAAAABFY/DGR2Z1-mIhI/s800/siul.gif' width='40'/>
:kg:
<br/><img src='http://lh6.googleusercontent.com/-NuLf-BR5G6s/T0DPbNElt0I/AAAAAAAABFg/kLUppnbhq-c/s800/nosara.gif' width='40'/>
:kh:
<img src='http://lh6.googleusercontent.com/-G8IStEoj5nA/T0DG-37KP1I/AAAAAAAABEM/yKosc-fG74g/s800/takut.gif' width='40'/>
:ki:
<img src='http://lh3.googleusercontent.com/-h46OZLQh1O0/T0DR2RiRkYI/AAAAAAAABFo/1BzbpPNoi20/s800/tkp.gif' width='40'/>
:kj:
<img src='http://lh4.googleusercontent.com/-1dkfWvZdWMI/T0DG8O8_yWI/AAAAAAAABDc/_AkfKeuYKqo/s800/marah.gif' width='40'/>
:kk:
<img src='http://lh4.googleusercontent.com/-fF0HMqivVyo/T0DSUGEritI/AAAAAAAABFw/PXHJoVAUVj4/s800/I-Luv-Indonesia.gif' width='40'/>
:kl:
<img src='http://lh3.googleusercontent.com/-o_sl8EExmy4/T0DSjQrp8xI/AAAAAAAABF4/aFVdE7pcYaw/s800/hoax.gif' width='40'/>
:km:
<img src='http://lh4.googleusercontent.com/-tlF97MhC7qA/T0DG6Br_JaI/AAAAAAAABDA/bRohHV6W7xQ/s800/berduka.gif' width='40'/>
:kn:
<img src='https://lh5.googleusercontent.com/-0HyrFtM0xY4/TtIYkw07p4I/AAAAAAAAAic/9XBkBP4peOE/s800/ngacir2.gif' width='40'/>
:km:
<img src='https://lh3.googleusercontent.com/-kAjMVdQiNi4/TtIYwDokFDI/AAAAAAAAAik/crirrAjPFpQ/s800/bis.gif' width='40'/>
:ko:
</b></center></div></center>

<div style="text-align: center;">
<script type="text/javascript">

</script><a href="http://www.blogger.com/page-edit.do?blogID=7105494544424735270&amp;pageID=1647161614117998862">
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></a></div>

- Keterangan :
- Fungsi dari pemasangan kode ini adalah untuk menyediakan preview dari emoticon yang disediakan pada komentar blogger yaitu emoticon yahoo, upin & ipin dan kaskus.

Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode</Head> tersebut.

<script src='http://7startmenu.googlecode.com/files/jquery_vstart.js' type='text/javascript'/>
<script src='http://7startmenu.googlecode.com/files/animatedcollapse.js' type='text/javascript'/>
<script type='text/javascript'>
animatedcollapse.addDiv('cemo', 'fade=1')
animatedcollapse.addDiv('uiemo', 'fade=1')
animatedcollapse.addDiv('kkemo', 'fade=1')
animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>

- Keterangan :
- Kode script diatas merupakan kode untuk mengatur preview emoticon dan animasi saat memilih preview emoticon yang ingin digunakan.
- Kode yang berwana biru merupakan kode script jquery jika sudah memasang jquery di blognya silakan sobat hapus kode di atas yang berwarna biru.

Cari kode </Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Body> tersebut.

<script>
tag="p";
clas="comment";
</script>
<script src="http://monozcore-project.googlecode.com/files/MonozCore%20Emoticon%20Script.js" language="javascript"></script>

- Keterangan :
- Kode yang berwana biru merupakan kode variabel tag dan class yang akan digunakan untuk merubah teks menjadi emoticon dimana teks tersebut merupakan lokasi yang ada di dalam tag dan class. Harap jangan dirubah kecuali emoticon tidak berhasil terlihat maka silakan ikuti langkah berikutnya.

Klik "Save" untuk menyimpan template blog, dan lihat hasilnya...

Langkah Berikutnya Jika Emoticon Tidak Terlihat :

Oke...sob silakan ikuti langkah-langkah di bawah ini jika dan hanya jika prosedur diatas tidak berhasil, hehehe :):) sedikit dramatisir biar tambah seru....

Silakan sobat test di kotak komentar dengan menuliskan karakter yang akan dirubah menjadi emoticon, contoh: tuliskan teks ==> :)) :a: :ka:

Lihat apakah teks tersebut berubah menjadi emoticon ???. Jika tidak maka kita edit teks tersebut dengan cara men-select (memilih) teks tersebut mulai dari atas avatar sampai teks karakter tersebut, kemudian klik kanan ==> klik "View Selection Source" ==> cari teks karakter emoticon (:a: :ka: atau yang karakter emoticon yang diketik pada saat mau men-test dalam contoh ini karekter yang digunakan adalah :ka: ) pada kode HTML yang ditampilkan saat page editor ditampilkan.

Pada gambar ke-3 perhatikan pada kode yang terpilih, karakter emoticon diapit oleh tag "p" di dalam class "comment-content" (<p class="comment-content" id="bc_0_0MC">:ka:</p>). Kode tersebut bisa berbeda-beda tergantung template yang digunakan.

Sekarang kita kembali pada kode script diatas :

<script>
tag="p";
clas="comment";
</script>

Silakan dirubah variabelnya pada kode script di atas menjadi

<script>

tag="p";
clas="comment-content";
</script>

Klik "Save" dan coba lihat hasilnya...

Wuiihhh cape juga bikin postingan ini, oke.. bro jangan lupa cendolnya dan saya mohon jika ingin menggunakan artikel ini atau meng-copas seluruh postingan artikel ini harap sumber dari artikel dicantumkan. Selamat mencoba...jika ada pertanyaan silakan tulis di kolom komentar...

.: Semoga Bermanfaat :.

FB Users () Comment | Read Users (35) Comment

Comments

35 Comments

♥VPie◥♀◤MahaDhifa♥ says:
March 7, 2012 at 8:38 AM

. . aq jadi yg pertama ne. he..86x. GudLuck ya?!? . .
M.Fhandika Rafif says:
March 7, 2012 at 6:35 PM

keduaxxx :)) :ka:
M.Fhandika Rafif says:
March 7, 2012 at 6:47 PM

monozcore kok saya lihat script aneh ya..!! :d :-/
M.Fhandika Rafif says:
March 10, 2012 at 10:56 AM

ERORR NIH http://fhandikainternet.blogspot.com/ :(
Monoz Core says:
March 10, 2012 at 11:45 AM

M.Fhandika : ya terang aja error scriptnya belom dipasang.... coba tutorialnya dibaca dulu ikuti langkah demi langkah... jangan terburu2... oke sob
ndy says:
March 11, 2012 at 8:31 PM

dah aku test tanpa rubah script tetep hasilnya galat, langkah yang ke tiga tuh mas, yg pertama dan ke 2 gk ada masalah saat pratinjau, aku sengaja buat blogs baru cuma buat test emo doank, biar tau template apa yang support sama emo, kalau blogs yang lama takutnya berantakan gonta ganti template, kalau boleh saran, minta template yang cocok donk buat emo, ok om :D :a:
Monoz Core says:
March 11, 2012 at 9:48 PM

Bisa koq tadi saya dah mampir dan test di blog sobat... gimana kerenkan... jangan lupa supportnya ya...
NDY says:
March 17, 2012 at 7:30 PM

ok ty, ak dah join ke blog km, visit back ya n join jg di blog saya... ;)
Muhammad harish Abdurrahim says:
April 2, 2012 at 2:02 PM

waw .. =))
Faisal Efendi says:
April 24, 2012 at 9:38 PM

gan, ada msalah sdikit ni..??
kotak gambar nya gk poll di template blog ane..
jd gambarnya kgak kliatan smua..
g mna cara ngatur ukuran nya...
trs gi mana ngilangin tlisan di bawah nya tu..??
tolong pencerahannya...
Faisal Efendi says:
April 24, 2012 at 11:08 PM

oke bang..
mkasih atas pencerahan nya.. udah bisa ..

:kc:
Admin_rifersgothicz says:
April 29, 2012 at 4:38 PM

gan pnya sya kok gak muncul yah?
mohon pncerahannya dong..
:kf:.

ini blog saya rifgimbal.blogspot.com
Monoz Core says:
April 29, 2012 at 4:59 PM

@rifersgothicz: seperti yang sering saya bilang jangan gunakan kode jquery lebih dari satu karena bisa mengakibatkan konflik pada script atau widget yang lain. Apabila anda menggunakan jquery lebih dari satu coba gunakan kode no-conflict supaya scriptnya bisa berjalan normal.
rifersgothicz says:
April 29, 2012 at 7:20 PM

cara nya make kode no-conflict nya gmn yah gan?? d:
Monoz Core says:
April 29, 2012 at 11:20 PM

@rifers: coba nich...
<script>jQuery.noConflict();</script>
rifersgothicz says:
April 30, 2012 at 9:46 AM

penempatannya dmn ya gan??? :i:
Monoz Core says:
April 30, 2012 at 11:04 AM

taruh diatas kode jquery atau diatas </Head>
rifersgothicz says:
April 30, 2012 at 12:09 PM

tetap gak mau niih gan??
gimana yah??
niih contohnya gan:
http://rifgimbal.blogspot.com/2012/04/cool-pool-portable.html?showComment=1335762494492#c2205651686189343866
Monoz Core says:
April 30, 2012 at 1:18 PM

coba gunakan variabel
<script>
tag="div";
clas="comment-body-author";
</script>

oh ya hapus juga kode no-conflict... dan juga hapus kode link berikut:

https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
http://code.jquery.com/jquery-latest.js
http://7startmenu.googlecode.com/files/jquery_vstart.js
var jQuery = $.noConflict(true);
http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
$.noConflict(true);
http://sites.google.com/site/epgstudiosite/javascript/jquery.min.js

pasang satu jquery saja :
http://code.jquery.com/jquery-latest.js

di coba dulu...
rifersgothicz says:
April 30, 2012 at 2:06 PM

SUKSES gan ..
Oke skrg ane udh ngerti THANKS Banget ..

Gan Join di blog ane dong,entar ane follback..
sekalian tukeran link gan...he
:kc:
M.Fhandika Rafif says:
June 8, 2012 at 9:55 PM

aneh sob
yg nomor 3
error pas di save template
:kn:
Rizal Surya says:
June 11, 2012 at 3:28 PM

wah, ini yang saya cari bro
mullsi says:
June 14, 2012 at 5:42 PM

Sip!!!!
đĩţħ ĵã¥å™ says:
June 19, 2012 at 3:21 PM

sob kok template nya error ketika save template ???? ~x(
Madjongke says:
June 19, 2012 at 4:57 PM

Bagus sob. Semoga adsnya lancar ya. hehehe
M.Fhandika Rafif says:
June 21, 2012 at 11:15 AM

Sob,email nya apa .. saya gagal trus tiap masang emoticon :kn: :kn:
Anang Irawan says:
July 16, 2012 at 11:11 AM

malah muncul tulisan gini " Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "language".
Error 500

apanya itu gan??? :kk:
Anang Irawan says:
July 16, 2012 at 12:14 PM

Gan kenapa ga muncul ya??
coba dicek anangirawan.co.cc :i:
Anang Irawan says:
July 17, 2012 at 10:46 PM

gan kog emoction kaskusnya ga bisa dipake ya?
padahal uda nongol di Pos komentar tuh...
klo di pake cuma muncul kode emoction nya doank tuh apanya gan??? :kf:
coba komen/cek bang anangirawan.co.cc

#Thanks Before
Aldhy says:
July 25, 2012 at 1:53 PM

:)
Abhista Rizqi Ramadhan says:
July 28, 2012 at 12:19 PM

:))
Anang Irawan says:
August 1, 2012 at 2:54 AM

penyebabnya apa gan kog emoctiona ga muncul tuh padahal uda bisa kepasang di blog ane . . . coba dicek dong gan . . .
anangirawan.co.cc :kg:
Muhammad Hendry Prasetya says:
August 26, 2012 at 11:01 AM

~x( Puyeeeng
Imanuel Suluh says:
November 12, 2012 at 6:20 PM

Gan...code pertama sih bisa tapi code
Head ama Body...Gimana nih Gan...
dang murganto says:
December 26, 2012 at 7:22 PM

makasih sob..berhasil sob....