Cara pasang Emoticons/Smiley di comment blogger

Emoticon atau smiley hampir semua orang biasa menggunakannya. Emoticon atau smiley adalah kombinasi dari simbol-simbol yang selalu digunakan untuk menggambarkan wajah manusia atau prasaan dalam bentuk pesan.

Gaya Dalam penggunaan emoticon.

Gaya Emoticon Barat

Untuk emoticon gaya barat ini biasanya di tulis dari kiri ke kanan, karena sebagian besar budaya barat dalam gaya penulisannya dari kiri ke kanan. Jadi dalam bentuk penulisan emoticon gaya barat ini biasanya mata di sebelah kiri kemudian di ikuti hidung dan mulut. Berikut adalah contoh emoticon dalam gaya barat. :)   :(   :P dan seterusnya.

Gaya Emoticon Timur

Untuk emotikon gaya timur ini dalam penulisannya tidak seperti gaya barat yang harus di mulai dari kiri ke kanan. Emoticon gaya timur ini tegak dan langsung dapat di lihat karakternya tanpa harus di miringkan terlebih dahulu. untuk contoh dari penulisan emoticon gaya timur adalah sebagai berikut. (*_*) untuk keterangan penulisan tersebut, bintang di gambarkan mata, garis bawah di gambarkan sebagai mulut sedangkan untuk tanda kurung sendiri digambarkan sebagai garis muka. (T_T)   \ (^ o ^) /   (^.^)

Emoticon Gaya campuran Barat dan Timur

Gaya emoticon campuran ini pertama kali di adopsi oleh forum anime berbahasa Inggris dan mengadopsi emoticon dari Asia Timur yang dapat digunakan dengan karakter ASCII yang ada pada keyboard barat. Emoticon ini sekarang telah mulai banyak digunakan dalam pada game online, chat dan forum selain forum online. Emoticon ini umumnya lebih mirim dengan emoticon gaya timur, namun dalam penggunaan tanda kurung pada penggunaan emoticon gaya campuran ini sudah tidak dipergunakan lagi berikut adalah contoh dari penggunaan emoticon gaya campuran. ^___^   > o <;

Memasang Emoticon pada Komentar blogger

Setelah menyinggung sedikit tentang emoticon, mulai dari penggunaan dan gaya dari emoticon itu sendiri. sekarang saya akan sedikit memberikan tips bagai mana caranya memasang emoticon/smile di comentar blogger.

Langkah 1

Pertama-tama tentunya sobat harus masuk dulu ke dasbor blogger, kemudian Design-Edit HTML jangan lupa untuk mencentang expand widget template.

Langkah 2

Cari kode <body> Untuk mempermudah pencarian bisa menggunakan Ctrl+F atau bisa juga menggunakan F3. Setelah menemukan kode <body> taruh kode berikut diatas kode tadi
<!--emoticon-->
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
<!--emoticon-->

Langkah 3

Pada langkah 3 ini sobat cari kode berikut.
<b:loop values='data:post.comments' var='comment'>
Setelah sobat menemukan kode ditas kemudian sobat tempelkan kode berikut tepat diatas kode tadi.
<div id='smileys'>

Langkah 4

Dilangkah 4 ini sekarang sobat cari kode berikut, biasanya kode ini tidak jauh letaknya dengan yang sobat cari di langkah 3
</b:loop>
Setelah menemukan kode diatas selanjutnya sobat tempatkan kode berikut dibawah kode tadi.
</div>

Langkah 5

Di bagian ini sobat cari kode berikut
<data:blogTeamBlogMessage/>
Dibeberapa template sobat akan menemukan kode tersebut lebih dari satu, jika menemukan kode tersebut lebih dari satu sobat tinggal ambil kode yang kedua saja, dan letakan kode berikut dibawah kode tadi.
<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/>:)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/sad3.gif'/>:(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/laugh.gif'/>:))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cray-1.gif'/>:((
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/rofl-1.gif'/>=))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/suicide-1.gif'/>=D&gt;
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/biggrin2.gif'/>:D
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/blum.gif'/>:P
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/shok.gif'/>:-O
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/eusa_think.gif'/>:-?
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/unsure.gif'/>:-SS
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/flowers1-1.gif'/>:-f
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/doh-1.gif'/>d(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/air_kiss3.gif'/>:-*
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/threaten-1.gif'/>b-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/help2.gif'/>h-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/good-1.gif'/>g-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/beee-1.gif'/>5-p
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/yahoo2-1.gif'/>y-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/crazy3-1.gif'/>c-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/spiteful.gif'/>s-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/drinks-1.gif'/>d-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cheer-1.gif'/>w-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/hi-1.gif'/>:-h
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/give_heart-1.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/></div></a></span>
</div>

Langkah 6

Ini adalah langkah yang terakhir, di langkah terakhir ini sobat cari kode berikut.
]]></b:skin>
Setelah menemukan kode tadi sobat letakan kode berikut tepat diatas kode tadi
.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}
Setelah selesai sobat jangan lupa simpan dan coba lihat hasilnya :)
Sumber kode : HelpBlogger
Cukup sampai disitu untuk langkah demi langkah memasang emoticon dibawah di kotak komentar blogger dan sekilas tentang emoticon itu sendiri, Jika sobat Ingin melihat atau mengkoleksi emoticon dalam bentuk boneka silahkan sobat lihat di : EMOTICON BONEKA

Sobat suka tulisan ini..?

Dapatkan Tulisan Gratis Via Email!

Follow Fajar345!

8 komentar:

  1. Mangtabs gan Tutorialnya...
    Gan saya mau tanya tentang psang feedburner,kok statistik readers saya gak muncul2 ya. Mohon klo ada waktu dibalas ya gan

    BalasHapus
    Balasan
    1. Mungkin belum ada yang berlangganan via email,coba masukin alamat email sendiri,setelah emailnya didaftarin jangan lupa buka emailnya buat konfirmasi

      Hapus
  2. bisa dicoba nih sob tutorialnya, nanti kpn2 bisa aku coba... :)

    BalasHapus
    Balasan
    1. Ok sob,silahkan biar komentar di blognya semakin menarik dengan menambahkan emoticon :)

      Hapus
  3. Ngga membuat bog jd lama kan

    BalasHapus
    Balasan
    1. Tergantung sob, Jika tema yang digunakan ringan ga begitu mempengaruhi,...
      Lalu dari kode javaScript yang lain juga bila udah terlalu banyak script mungkin akan berat,tapi jika tidak masih ringan ko sob

      Hapus
  4. disini kok gak ada :)

    BalasHapus
    Balasan
    1. Sengaja sob, biar ga ngeberatin pengunjung :P

      Hapus

 

Like This yo

Recommended Post Slide Out For Blogger
© Copyright 2010. Fajar345 Blog . All rights reserved | Fajar345 Blog is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com