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.
Cara Membuat Emotion komentar di blog
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

Masukan Alamat Email Sobat:

Delivered
feedburner

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

12 komentar :

  1. 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
  2. Balasan
    1. iya bener mba sekarang udah dirubah posisi jadi 16 lumayan hehehe

      Hapus
  3. 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
  4. wah, panjang juga tutorialya
    simpan dolo buat ntar ah, walking-walking lageee \m/

    BalasHapus
  5. gan tolong follow blog gue dong, lagi belajar ngeblog nih bro. nih alamatnya www.teguhdwisantoso.blogspot.com.

    BalasHapus
  6. Mas Bloggernya Bagus,,, Postingannya Kepake Banget Makasih Ya Mas...

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

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |