Memasang Emoticon Murni Pakai Kode CSS

Koben mau mengangkat lagi tutorial lawas nih. Tut's yang membicarakan bagaimana blog kita terlihat lebih atraktif dengan memakai emoticon. Untuk lebih jauh melihat macam-macam hack seputaran smiley silahkan search pada kotak pencarian dengan keyword EMOTICON ;)
Kesempatan sekarang gue mau berbagi bagaimana cara memasang smiley si emoticon ke dalam blog kalian murni 100% menggunakan CSS. Apakah sobat tidak peracaya emoticon sekarang ini bisa dibuat dengan variabel CSS? Namanya juga skill dan tentunya ide dalam brekreasi ;)) Lihat screenshot berikut setelah penanaman ke dalam template blog

Berikut live demo pada blog aku yg keren jg demo css emoticon :D Sebelum masuk pada bumbu CSS, ada cerdiknya kalian pilah-pilih jenis emoticon apa saja yang mau ditampilkan. Ada 26 jenis karakter emoticons loh! Biar ngirit coding and loading blog :P

Bumbu CSS Emoticon

Ambil deh itu bumbu²nya dan simpan diatas kode </b:skin> Setelah terpasang kode CSS, untuk pemakaiannya ada dua cara:
1. Langsung tanam syntax didalam template.
Carilah syntax yg mirip-mirip dengan ini

<div class='post-body' id='PRET'>

Fokus pada unik id post-body Kemudian sisipkan didalamnya kode class='smiley' Ex jd spt brkt

<div class='post-body smiley' id='PRET'>

2. Menulis langsung ketika mosting.
Ketika sobat mau mosting postingan, langsung pasangkan di awal paragraf dengan tagging berikut

<div class="smiley">



--------- ISI POSTINGAN ---------



</div>

Apakah setelah melakukan langkah² diatas emotikon akan muncul? Ya tidak akan muncul, wong itu mah baru memasang tag agar kode CSS emot bisa muncul. Berikut ini ke 26 markup HTML emoticonnya

Markup HTML Emoticon

Agar lebih jelas silahkan lihat pembagian-bagiannya di jsfiddle.net/bebenkoben/sgZ6h/embedded/result,html,css
Inspired by http://cssdeck.com/labs/full/one-div-text-smileys
Jika kepengen yg lebih keren, silahkan sobat coba memasang tutorial berikut ke dalam blog codepen.io/TimPietrusky/pen/ylkFs
Enjoy it :)
Happy coding \m/