Salah satu hal yang dapat menambah ketertarikan seseorang untuk berkomentar yaitu adanya sebuah emoticon. Emoticon ini dapat pula dipasang di thread comments dari blogspot. Nah lewat tulisan ini akan menjelaskan cara pemasangan emoticon pada komentar blogspot.

Memasang Emoticon pada Komentar Blogspot - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Salah satu hal yang dapat menambah ketertarikan seseorang untuk berkomentar yaitu adanya sebuah emoticon. Emoticon ini dapat pula dipasang di thread comments dari blogspot. Nah lewat tulisan ini akan menjelaskan cara pemasangan emoticon pada komentar blogspot.

Memasang Emoticon pada Komentar Blogspot

Memasang Emoticon pada Komentar Blogspot

Emoticon yang merupakan gabungan kata dari "emotion" dan "icon" yang berarti icon yang digunakan untuk mengekspresikan emosi sebuah pernyataan tertulis, dan bisa mengubah serta meningkatkan interpretasi terhadap tulisan tersebut. Jika anda melihat template-template yang saya buat, saya sering menambahkan manipulasi seperti ini.
Mungkin ada yang penasaran bagaimana cara memasang emoticon seperti itu. Nah kali ini saya akan membagikan cara memasang emoticon seperti pada template yang saya buat.

Cara Pemasangan di Blogspot

  1. Masuk ke halaman editor HTML
  2. Salin kode di bawah ini, kemudian letakkan tepat sebelum/di atas kode </head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://ivyth.googlecode.com/svn/js/emoticon.min.js" type="text/javascript"></script>

    NB:Karena manipulasi ini menggunakan jQuery maka setidaknya ditemplate anda harus ada jQuery library [line-1]. Jika sudah ada jQuery library di template anda maka code pada line-1 jangan dicopy.
  3. Salin kode di bawah ini, kemudian letakkan tepat sebelum/di atas kode </body>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(document).ready(function () {emoticonx({
    emoRange:"#comments p, div.emoWrap",
    putEmoAbove:"iframe#comment-editor",
    topText:"Klik untuk melihat code!",
    emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
    })
    });
    //]]>
    </script>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(document).ready(function () {emoticonx({
    emoRange:"#comments p, div.emoWrap",
    putEmoAbove:"iframe#comment-editor",
    topText:"Klik untuk melihat code!",
    emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
    })
    });
    //]]>
    </script>
    </b:if>
  4. Jika sudah selesai, klik Simpan Template dan lihat hasilnya
Ingat sebelum memasang/melakukan pengeditan pada template sebaiknya dibackup terlebih dahulu.

Keterangan-Keterangan

Opsi
Keterangan
emoRange
Tempat dimana gambar emoticon mau dimunculkan.
putEmoAbove
Tempat dimana gambar sampel emoticon akan diletakkan.
topText
Tulisan tebal/bold dibawah gambar sample emoticon
emoMessage
Pesan pada saat kotak peringatan/alert dan tulisan dibawah tulisan tebal dibawah gambar sample .


Selamat mencoba.

Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

111 comments:

  1. mas sering nemu kode yang kaya gini ada ada dua, di template buatan mas, apa memang disengaja :-?

    BalasHapus
    Balasan
    1. klo template yang lama memang saya sering buat 2 kali tapi di bungkus dengan 2 tag kondisional yang beda yaitu item dan static page.. Sehingga yang terpanggil tetap satu saja..

      Tapi template2 yang baru saya sering menggunakan cara seperti diatas..
      jadi saya membuat JS manipulasi utama dibagian atas.(no.2 line_1-2)
      kemudian untuk JS memanggilnya saya letakkan dibawah lalu dibungkus dengan tag kondisional (no.3)..
      metode membuat manipulasi utama saya dapat dari membongkar file JS dari SelectNav..
      sehinnga penggunaan inline JSnya dapat saya kurangi..

      Hapus
    2. mas pengen tanya maas ,
      cara menganti emoticonnya dengan gambar yang kita miliki dan juga dengan pemanggilan code di emoticonnya berbeda gimana mas...?
      mohon bantuannya..? :)

      Hapus
    3. jadi memang disengaja dibikin dua toh kodenya :-)

      oiya pak, kapan kapan kasi tau cara bikin grid dan list kaya di template JPstation ya pak (p) udah make kode yang ada tapi gak mau jalan @-)

      Hapus
  2. Aku memakai versi ini :

    <style type='text/css'>
    .emoWrap {
    background-color:#EEDE86;
    border:2px solid #D3BA59;
    padding:10px 14px;
    color:black;
    font:bold 12px Tahoma,Arial,Sans-Serif;
    text-align:center;
    }

    img.emo, input.emoKey {
    display:inline-block; /* Penting! */
    *display:inline;
    vertical-align:middle;
    }

    input.emoKey {
    border:1px solid #ccc;
    background-color:white;
    font:bold 11px Arial,Sans-Serif;
    padding:1px 2px;
    margin:0px 0px 0px 2px;
    color:black;
    }
    </style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    //<![CDATA[
    var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
    //]]>
    </script>
    <script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script>


    dengan emotikon yang imut, dan bisa tertutup otomatis. :)

    BalasHapus
    Balasan
    1. makasih , nie mah saya sudah mengetahuinya ,
      Dari DTE:].

      Hapus
  3. mas kalo buat pesan warna merah diatas emot kayak blog ini gimana ? :-?

    BalasHapus
  4. Balasan
    1. apanya yg tidk bisa??
      kalau tdk muncul di kotak komentar mungkin nilai dari emoRange nya perlu dirubah..

      Hapus
    2. mas, kalo ngatur lebar nya gimana ? :-? maklum newbie.. mas hehe :d

      Hapus
  5. Makasih gan :D work nih di blog ane :)
    salam saya http://nandarious.blogspot.com

    BalasHapus
  6. sangat bermanfaat kawan..
    kunjung balik ya..

    adimbahgahol.blogspot.com
    adimbahgahol.blogspot.com

    di FOLLOW ya blog ane,,kalo udah di follow,nanti ane follow balik..

    BalasHapus
  7. gk bisa mas.. ;(( gk muncul emot nya.. @-) cuman muncul poskan komentar.. :-s
    gimana caranya mas biar muncul? :-?

    Just for info.
    aku make template tema agan yg DarkRed..

    kereeeennnn (h)

    BalasHapus
    Balasan
    1. klo tdk muncul itu mungkin karena struktur html dari kotak komentar yang beda..
      jadi nilai pada emoRange nya harus dirubah..
      pada contoh diatas yaitu pada tag p yang ada elemen dengan ID comments. dan juga tag div dengan class emoWrap..

      Hapus
    2. cara merubahnya seperti apa?
      di blogku selalu aja bertuliskan poskan komentar, setelah di klik muncul pop up blogger baru bisa komentar. tidak seperti punya anda yg menurut saya sangat kereeeen bangeettt (h).
      klo ada link tutornya mohon di bantu mas? ;-(

      Hapus
    3. berhasil gan.... :-) makasih tutornya.. (h)

      Hapus
    4. mungkin harus rubah bentuk komentarnya jadi embedded/tersemat..
      masuk di settings - post and comments: pada comment location pilih tersemat/embedded..

      Hapus
    5. ia mas sudah saya rubah dan work 1000%. =))

      Hapus
  8. kang cara bikin kotak keterangan https://lh6.googleusercontent.com/-nZGiL9S54DA/UVFBAogK5eI/AAAAAAAAA9c/k0gEGd7OChw/h120/8hIxJdp.png gmn mas ?

    BalasHapus
  9. mas, pas di klik kok gak ada codenya misalnya :>) nah pas di klik gambarnya gak keluar codenya mas! blog ane: http://free3allpengetahuanku.blogspot.com

    BalasHapus
  10. keren gan tapi sayang koq ngga muncul emo nya @-)

    BalasHapus
  11. keren gan , minta konversi kodenya donk 8-)

    BalasHapus
  12. oiya mas, kalo mau nambah emoticon tanpa harus utak atik javascriptnya bisa ga..? :-?
    misalnya emoticon tambahannya diletakkan di bawah kode js
    <script src="https://ivyth.googlecode.com/svn/js/emoticon.min.js" type="text/javascript"></script>

    BalasHapus
    Balasan
    1. bisa saja..
      tapi ada kemungkinan akan konflik..
      klo mau menambahkan sebaiknya yang di tambahkan regexnya saja..

      Hapus
    2. regex? saya tidak paham mass.. [-( apa harus menambahkan langsung di javascriptnya..?
      saya coba menggandakan 1 emoticon yang ada di jsnya
      "https://lh3.googleusercontent.com/-Em3lvBgvYlI/T2WElbV0BaI/AAAAAAAACdI/ApynphQdka8/s36/7.gif",":d");i(/\s:-d/ig,
      bisa tapi merepotkan juga.. mau yg simple-simple :d
      kalau dengan menambahkan regex'a bagaimana caranya?? :-?

      Hapus
    3. iya harus di tambahkan langsung..
      yang agan coba itulah dikatakan regex..

      Hapus
    4. terima kasih mas infonya.. :)
      baru tau saya regex itu apa ,, eheheh :d

      Hapus
  13. Ko ga bsa diklik emoticonya??? Muy Blog: http://free3allpengetahuanku.blogspot.com

    [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-( [-(

    BalasHapus
  14. kok gag bisa ya ?? ;-(


    http://annasmukhlisuddin.blogspot.com

    BalasHapus
  15. Thank's Mas, sangat membantu, jadi terharu =))

    BalasHapus
  16. karena bertentangan dengan semua slide, memiliki solusi, ketika saya menempatkan emoction tersebut, slider tidak bekerja untuk blog saya ;-(

    BalasHapus
    Balasan
    1. kata siapa slide'a tidak bekerja, kalau di kasih emotion

      semua'a berjalan dengan baik meskipun di kasih macam'' widget atoupun kode html...

      kalo gk percaya silahkan cek di sini http://prasetya-computer.blogspot.com

      Hapus
    2. itu dikarenakan jquery di blog agan ada 2, pastikan jquery hanya 1 diblog agan.. :)

      Hapus
  17. So many question had no answer

    BalasHapus
  18. mantap gan!!!!! berhasil yohoo!!!

    BalasHapus
  19. Sama nih gan, di klik ga keluar kodenya, tapi emot bisa muncul di kota komen ;(( catatanomjon blogspot

    BalasHapus
  20. Mantap gan, sudah saya pasang dan "BERHASIL". Terima Kasih gan!! (h) :-d :d

    BalasHapus
  21. ini baru manteb mastahh... (h) Tapi lebih simple lagi mending cari template bawaan yg udh support ginian aja deh :-#

    BalasHapus
  22. (h) hebat gan , saya akan pakai . kunjungan balik http://ediztian.blogspot.com/

    BalasHapus
  23. oke deh.. aku cobain dulu ya? ntar kalo gagal aku mampir lagi hihihihi

    BalasHapus
  24. asyiiiikkk sukses... tapi kok malah letak emoticon ku di bawah kotak komentar ya? :-?

    BalasHapus
  25. ;( Hi, I am testing these emotions (o) [-( x-)

    BalasHapus
  26. gan, saya mau tanya nih, cara agar emoticonnya sesuai dengan lebar form kotak komentar gimana ? kaya punya agan :)

    BalasHapus
  27. widget ini berpengaruh pada loading blog gak mas ??? :-#
    + apakah orang yang menggunakan hp dapat menyisipkan emotion seperti di atas. THX 8-)
    8-)

    BalasHapus
  28. sukses sih, tp kok malah letaknya di bawah kolom komentar y mas ? :-?
    jwb ya :>)

    BalasHapus
  29. Masalah saya kya agan di atas mas :(
    mohon bantuannya mas...

    BalasHapus
    Balasan
    1. coba kesini: http://www.dte.web.id/2012/05/masalah-pesan-formulir-komentar-yang.html

      Hapus
    2. akhirnya jadi juga,
      makasih mas, salam kenal yaa?
      (p)

      Hapus
  30. hhohohohoho dahsyat brooo !!! thanks banyak x-)

    BalasHapus
  31. wah keren mas . ijin copy ya :)

    BalasHapus
  32. testing dulu ah :) https://lh3.googleusercontent.com/-Em3lvBgvYlI/T2WElbV0BaI/AAAAAAAACdI/ApynphQdka8/s36/7.gif https://lh3.googleusercontent.com/-xbWqvOWJNE0/T2WEZM-VLTI/AAAAAAAACak/8dLATIlXRDk/s36/12.gif
    please visit back my blog and give me a comment about my blog https://lh4.googleusercontent.com/-cguZVxYzR3o/T2WEZSgFvUI/AAAAAAAACas/nDJgr6YcuaI/s36/13.gif

    joemulyono.blogspot.com

    BalasHapus
  33. izin praktek ya.!
    jangan lupa follow blog saya...mksh

    BalasHapus
  34. bro kalo kotak komentar aku berdampingan ama facebook berpengaruh ga ?? soalnya blog aku emotnya gak muncul cuman code emoticonnya aja :-? cek ya gan di http://fendevils.blogspot.com

    BalasHapus
  35. Saya ingin menanyakan beberapa pertanyaan bang:

    1. Darimana Anda mendapatkan script "Konversi Kode Otomatis" itu?
    2. Darimana Anda mendapatkan script emoticon beserta manipulasi komentar itu?
    3. Darimana Anda mendapatkan inspirasi desain untuk pesan komentar itu?

    BalasHapus
  36. thanks ya bro :)
    visit my blog ya (o)
    imanyusufbidin.blogspot.com

    BalasHapus
  37. OKE MAS WORK !!

    jangna lupa visit blog ane http://parminum-tuak.blogspot.com/

    BalasHapus
  38. mas makmur, saya sudah terapkan emoticon pda komentar blogspot..
    saya mw tanya, knapa form komentar di postingan yg belum ada komentar, dgn yg sudah ada komentar beda lebarnya ?
    padahal semua sudah saya buat 100% widthnya..
    tapi tetap yg belum ada komentar, kotak formnya ga lebar 100%, dimana kelirunya ya mas ?
    tolong dibantu ya mas, trmakasih byk (o)

    BalasHapus
  39. Trimkisi, sekarang kolom komentar blog saya ada emot-nya :)

    BalasHapus
  40. Gan Gimna Nie?
    Semuanya Udh Saya Ikutin Tpi Koq Ndak Keluar Emotionnya? :-?

    BalasHapus
  41. Kok gagal ya? Knp nih?

    Coba cek deh komentar di http://mahografauzan.blogspot.com/2013/08/asal-usul-peniti.html emoticonnya gagal alias gk muncul.

    Mohon solusinya ;-(

    BalasHapus
  42. (h)thanks usulnya gan.... 8-) (b)

    BalasHapus
  43. keren... berhasil berhasil horeeey..

    BalasHapus
  44. aq udh pasang di blogq dan hasilnnya berhasil... Triksih kk, tp aq mau nanya klo mau hilangin pesan (emoMessage) itu gimana caranya? maksudnya biar klo ada yang mau klik icon emonya langsung jd... Maaf kk seblmya n mohon bantuannya kk.. (f)

    BalasHapus
  45. makasih juragan,, berhasil!! (h) :)

    BalasHapus
  46. THANKS THANKS THANKS BERHASIL :d :-d :) :)

    BalasHapus
  47. gan ane gak pernah ketemu kode body nya
    gimana cara carinya gan ?
    mohon bantuannya :)

    BalasHapus
  48. [-( ga bisa gan http://ghostnet-crew.blogspot.com

    BalasHapus
  49. tes (h)mau izincoba memakai diblogku mas (h) (h)

    BalasHapus
  50. Postingannya Mantap Baget Gan......
    Visit Back Ya -> Tenshi Crew Atau http://tenshicrew.blogspot.com/

    BalasHapus
  51. MKR-SITE Kok punya ane nggak muncul ya emoticonnya,,, pisss mohon bantuannya liat aja di blog saya http://blanter-forever.blogspot.com Aneh ;-(

    BalasHapus
    Balasan
    1. kalau gagal coba pake cara yang ada di blog ane gan

      ngudang.blogspot.com

      Hapus
  52. Tutorialnya mantab (o) tapi sayang ga [-( mau muncul di blog saya gan ;-( . kocrot-kecret.blogspot.com sebelumnya saya pernah meletakkan komentar facebook. apa itu juga penyebab tidak munculnya? kemudian saya masih bingung dengan kode yang di letakkan di atas saya punya ini sebelumnya di atas kode kemudian saya letakkan kode agan di atasnya juga |




    $(function () {

    // TinyNav.js 1
    $('#topnav').tinyNav({
    active: 'current'
    });


    // TinyNav.js 2
    $('#navigation').tinyNav({
    active: 'current'
    });

    });




    solusinya gan :-? .. thanks

    BalasHapus
  53. Ane gak bisa pasang gan, minta masukin username ama password? :-?

    BalasHapus
  54. terima kasih banyak gan karena telah berbagi info yang sangat menarik
    Cara Mengobati Penyakit Kista

    BalasHapus
  55. yang sya klo di klik emot nya gk kluar kode nya
    gmna sulosi nya gan ??

    BalasHapus
  56. walah ini harus segera saya coba gan
    visit juga di www.webpratama.blogspot.com

    BalasHapus
  57. wah saya coba tp belum sukses

    BalasHapus
  58. Kaka saya pernah lihat ada blog yang emoticonnya Kaskus, kalau mau begitu, gimana ya caranya Kak?

    Salam,
    Juragan obat penambah gemuk badan & obat herbal atasi jerawat

    BalasHapus
  59. Balasan
    1. ;-( kenapa di kolom komentar blogku ga berhasil

      Hapus
  60. untuk blogspot yg terbaru sama aja ya min? Website Gratis

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP