Cara Membuat Emoticon komentar di blog

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat Emoticon komentar di blog dan semoga artikel ini bermanfaat.

Cara Membuat Emoticon komentar di blog ini adalah kelanjutan dari postingan sebelumya yaitu Mengatur Pesan Komentar blog, dimana pada postingan tersebut sudah saya janjikan untuk membuat tutorial Membuat Emoticon, Ok sobat tidak usah panjang lebar kita langsung saja pada pokok bahasan.

Sebelumnya saya sampaikan terlebih dahulu apa yang akan saya bagikan buat sobat semua, saat ini saya akan menyampaikan Cara Membuat Emoticon komentar yang mungkin berbeda dengan sobat bloger yang lain yang telah terlebih dahulu membuat tutorial ini. disini saya akan sampaikan cara yang mungkin dapat sobat kembangkan dalam penerapannya sehingga sobat sendiri bisa berkreasi menurut selera sobat.

Dalam pembuatan emoticon ada beberapa cara namun pada kesempatan kali ini saya akan sampaikan dengan 2 cara saja, yaitu dengan menggunakan kode javascript dan yang kedua menggunakan JQuery.

Saya akan sampaikan dengan contoh yang simple saja dan silahkan sobat sendiri yang nantinya menambahkan sesuai keinginan.

1. "Cara membuat Emoticon" dengan javascript

Dalam membuat emotion ini terkadang mememui kegagalan, dan kegagalan tersebut dikarenakan tidak cocoknya script yang digunakan dengan template yang mau dipasangnya. dan ini di akibatkan beberapa faktor ketidak cocokan namun menurut saya faktor tersebut adalah karena template tersebut sudah mengalami perubahan/telah diedit sehingga sudah tidak asli lagi sebagai template bawaan. kalau ini dipasang pada template bawaan maka tutorial dibawah ini akan bekerja baik tanpa merubah hal lainnya yang ada di template. yang paling utama untuk keberhasilan membuat emoticon ini yaitu penentuan kode yang berwarna pink dibawah (comment-holder), dimana kalau pada template sobat ada kode tersebut maka dijamin ini akan berhasil.

sengaja saya buat cara seperti ini agar sobat bisa lebih jauh mengenai pemasangan emoticon di kotak komentar ini, kenapa? karena cara ini bisa kita kembangkan bukan hanya menggunakan emoticon saja untuk meletakannya pada komentar tapi bisa kita pasang banner atau gambar lain, nah agar sobat bisa mengkreasikannya sendiri maka saya bikin tutorial seperti ini.

Berikut cara lebih rincinya:

seperti biasa Login ke blogger
klik Layout/ template
Pada tab menu pilih Edit HTML
Centang kotak kecil Expand Template Widget
Sekarang cari kode </body> ingat bukan <body>
Tempatkan kode berikut di atas kode </body> tersebut

<script type='text/javascript'>
//<![CDATA[ /* Iseng-iseng
* bY KHR
* Url:http://azzam10.blogspot.com
*/
a = document.getElementById('comment-holder');
if (a) {
    b = a.getElementsByTagName("p");
    for (i = 0; i < b.length; i++) {
        if (b.item(i).getAttribute('CLASS') == 'comment-content') {
            bh_b_smly = b.item(i).innerHTML.replace(/:aa:/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='isengsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:bb:/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' class='isengsmly'/>");
            bh_b_smly = bh_b_smly.replace(/:cc:/ig, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='isengsmly'/>")
            b.item(i).innerHTML = bh_b_smly;
        }
    }
}

//]]>
</script>

Selanjutnya sobat cari kode dibawah ini dan cari yang paling bawah

<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' width='100%'/>

letakan kode dibawah ini tepat diatas kode diatas

<div style='border: 2px solid #CCC; margint: 0px; overflow: auto; padding: 0px; text-align: center; min-width: 450px;'>
<img alt='' class='isengsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :aa:
<img alt='' class='isengsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :bb:
<img alt='' class='isengsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> :cc:
</div>

Simpan template sobat.

Sobat perhatikan warna merah itu adalah URL emoticon sedangkan yang berwarna biru adalah kode yang dimasukan disaat berkomentar. Sobat bisa mengganti gambar dan kode tersebut namun perlu diperhatikan adalah posisi peletakan kode dan URL emotionnya antara yang atas dengan yang bawah. URL emoticon dapat diganti dengan gambar apapun sesuai dengan keinginan sobat. sedangkan apabila sobat mau menambahkan emoticonnya maka sobat tinggal menambahkannya pada kode atas dan bawah, caranya sobat tinggal mengcopy saja kode tersebut kemudian letakan dibawahnya dan ganti YRL emoticon dan kodenya contoh:

Bila sobat tidak mau repot dengan membuat sendiri sobat bisa pasang kode berikut pada template sobat.

Letakan kode berikut diatas kode </body>

<script src='http://mygambar.googlecode.com/files/Emo.js' type='text/javascript'/>

cari kode berikut dan cari yang paling bawah;

<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' width='100%'/>

Letakan kode berikut tepat diatas kode diatas;

<div style='border: 2px solid #CCC; margint: 0px;height:80px; overflow: auto; padding: 10px; text-align: center; min-width: 500px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> ;-;;
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
<img alt='' class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!
</div>

Nah selesai Cara Membuat Emoticon komentar di blog dengan menggunakan javascript, apabila mau mengatur tata letak posisinya silahkan baca di Mengatur Pesan Komentar blog, selanjutnya saya akan sampaikan cara membuat emoticon dengan menggunakan JQuery, namun berhubung postingan ini terlalu panjang maka lanjutkan di Cara Membuat Emoticon Komentar JQuery

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Emoticon komentar di blog kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 17:44

12 komentar :

Desa CilayungKamis, 30 Agustus 2012 pukul 17.49.00 WIB
buat sahabat yang berkomentar di halaman ini mohon maaf terhapus otomatis.. karena postingan ini saya perbaharui judulnya,,, yang asalnya kata emotion jadi emoticon.. yang akibat salah penulisan judul tersebut postingan ini berada di urutan 30 lebih di posisi SERP sehingga saya rubah judulnya namun karena tak bisa manual maka postingan ini saya copy paste ke postingan baru... mohon maaf buat sahabat yang telah berkomentar di halaman ini... terima kasih atas pengertiannya.
BalasHapus
Balasan
Vpie ◥TwekzLibz◤ MahaDhifaKamis, 30 Agustus 2012 pukul 19.58.00 WIB
. . jiachhhhhhhh,, he..86x . .
BalasHapus
Balasan
kliping kitaSabtu, 08 September 2012 pukul 12.47.00 WIB
Salam kenal sobat.. blog nya bagus..
Oh ya Yuk Mari kita Galakkan tukeran link di blog, oh ya ada 2000 link dofollow gratis disini.. mampir ya..
salam kenal dan sukses selalu..
Hidup blogger indonesia
BalasHapus
Balasan
UnknownSabtu, 08 September 2012 pukul 14.19.00 WIB
test dulu aghh....
@@,
BalasHapus
Balasan
AnonimRabu, 12 September 2012 pukul 12.54.00 WIB
~x(
BalasHapus
Balasan
AnonimRabu, 12 September 2012 pukul 12.55.00 WIB
=D
BalasHapus
Balasan
fianRabu, 12 September 2012 pukul 12.56.00 WIB
:waaa:
BalasHapus
Balasan
AnonimKamis, 13 September 2012 pukul 07.47.00 WIB
~x(
BalasHapus
Balasan
Izul FarrachmanJumat, 14 September 2012 pukul 23.31.00 WIB
wah, panjang juga tutorialya
simpan dolo buat ntar ah, walking-walking lageee \m/
BalasHapus
Balasan
UnknownSenin, 24 September 2012 pukul 12.09.00 WIB
gan tolong follow blog gue dong, lagi belajar ngeblog nih bro. nih alamatnya www.teguhdwisantoso.blogspot.com.
BalasHapus
Balasan
MUSIKFILEMinggu, 15 Mei 2016 pukul 08.42.00 WIB
Mas Bloggernya Bagus,,, Postingannya Kepake Banget Makasih Ya Mas...
BalasHapus
Balasan

Tambahkan komentar

Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

Belajar Komputer Melalui Internet

Cara Membuat Emoticon komentar di blog

1. "Cara membuat Emoticon" dengan javascript

12 komentar :

Tutorial Populer▼

Kategori Tutorial▼

Link sahabat Ter-Update▼

Komentar Terbaru▼

Belajar Komputer Melalui Internet

Cara Membuat Emoticon komentar di blog

date_replace("8.30.2012");

1. "Cara membuat Emoticon" dengan javascript

12 komentar :

Tutorial Populer▼

Kategori Tutorial▼

Link sahabat Ter-Update▼

Komentar Terbaru▼