Cara Membuat Emoticon pada Komentar Blogger


Cara Membuat Emoticon pada Komentar BloggerEmoticon yang merupakan gabungan kata dari "emotion" dan "icon" yang berarti icon yang digunakan untuk mengekspresikan emosi sebuah pernyataan tertulis, dengan memasang emoticon di blog, maka blog akan lebih terlihat berwarna dan juga hidup, kenapa hidup ?, karena ikon gambarnya bukan berformat JPG, melainkan Gif (gambar gerak), tutorial kali ini mungkin sudah banyak mengetahuinya, namun ada pula yang hanya bisa menggunakannya saja, dan tidak bisa memasangnya, oke langsung saja tutorialnya.


  • Masuk ke Blogger.com
  • Masuk ke Template -> klik edit HTML
  • 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>
Perhatikan kode yang bercetak tebal dan ada garis bawah, Karena manipulasi ini menggunakan jQuery maka setidaknya ditemplate anda harus ada jQuery library [baris-1]. Jika sudah ada jQuery library di template anda maka kode pada baris-1 jangan disalin[dicopy].

  • 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>
  • Jika sudah selesai, klik Simpan Template dan lihat hasilnya.
Ingat sebelum memasang/melakukan pengeditan pada template sebaiknya dibackup terlebih dahulu. Selamat mencoba.
Source : MKR-Site

17 komentar untuk "Cara Membuat Emoticon pada Komentar Blogger"

  1. Makasih sob, tapi saya sudah punya emoticon sendiri :-d .
    Blognya makin keren aja nih :d

    BalasHapus
    Balasan
    1. haha makasih sob, blog saya biasa-biasa aja kok sob, saya masih memilliki jiwa simple :)

      Hapus
    2. bentar ya saya buatkan dulu penjelasannya dengan gambar, ditunggu saja cheer

      Hapus
    3. http://i.imgur.com/mWtvICW.png
      simak gambar di atas, pada komentar dan emoticon sama lebarnya, jadi emoticon mengikuti besarnya si komentar-komentar, bukan sama besar dengan pesan komentar :D

      Hapus
    4. Aku pikir ngiikutin dengan pesan kmentar

      Hapus
    5. engga sob, klo mau pakai emoticon supaya muncul sempurna ganti template aja sob :D

      Hapus
    6. tapi ada juga sih yang ngikutin pesan komentar, tergantung kode-kode anehnya :-?

      Hapus
    7. Mungkin kalo Ngikutin pesan komentar , pake kode threath aja ya? Nanti pas di script emorange diatas ditambahin # threath . . mungkin :>)

      Hapus
  2. thanks tutornya sob :)

    BalasHapus
  3. Sudah dipasang :D Kalo di blog ini ada caranya Bikin ini ngga?

    Catatan:
    Untuk menyisipkan kode, gunakan tag KODE
    Untuk menyisipkan kode panjang, gunakan tag KODE
    Untuk menyisipkan gambar, gunakan URL GAMBAR
    ========================================================
    |KONVRENSI KODE| |EMOTICON|

    BalasHapus
    Balasan
    1. klo untuk menyisipkan kode, gambar, video youtube ada nih : http://yoga-tc.blogspot.com/2013/08/cara-memasukan-gambar-youtube.html tapi klo untuk, Konversi Kode sama Emoticon itu cuman memakai CSS :
      /* Tombol Kecil */
      #tombol {
      margin-bottom:10px}
      .tombol,.tombolkecil,.home-link{background-color:#0070b0;color:#fff!important;cursor:pointer;font:bold 12px Offside,Sans-Serif;padding:5px 10px 5px 10px;text-shadow:0 -1px 0 rgba(0,0,0,0.3);white-space:nowrap;margin:0 0.2em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-transform:uppercase;font-weight:bold}
      .tombol:hover,.tombolkecil:hover{-webkit-transition:all 0.2s linear 0s;-moz-transition:all 0.2s linear 0s;-o-transition:all 0.2s linear 0s;transition:all 0.2s linear 0s;background-color:#333;color:#fff;box-shadow:inset 0.86em 0 0 rgba(0,112,176,0.5),inset 0 0.86em 0 rgba(0,112,176,0.5),inset -0.86em 0 0 rgba(0,112,176,0.5),inset 0 -0.86em 0 rgba(0,112,176,0.5);}
      }

      klo masih kurang mengerti bisa baca tutorialnya di Blog Kang Ismet, disana lengkap tutorialnya : http://blog.kangismet.net/2013/05/membuat-judul-pada-pesan-formulir-kommentar.html

      Hapus
  4. Hello, i am glad to read the whole content of this blog and am very excited and happy to say that the webmaster has done a very good job here to put all the information content and information at one place.

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top