Add Emoticon to Blogger Template Designer Comment Box

Komunikasi antar blogger, pembaca atau pengunjung blog memang seringkali terasa tak cukup jika hanya menggunakan kata-kata. Sebuah gambar dalam bentuk emoticon, yang diikut sertakan dalam sebuah komentar, sekalipun hanya berupa sebuah gambar yang tak seberapa besar (icon), namun justru bisa menjadi "ungkapan bagi sebuah ekspresi jiwa/perasaan" yang jika dituliskan perlu begitu banyak kata atau kalimat.

Agar pengunjung atau siapapun pemberi komentar dapat dengan mudah menyisipkan satu atau beberapa buah emoticon, seorang pemilik blog dapat menambahkan sebuah javascript yang disertai kode css dan xHTML. Ketiga elemen kode HTML ini akan membentuk sebuah fungsi yang memberi layanan berupa kemudahan bagi pengunjung untuk menambahkan emoticon pada sebuah komentar. Dengan menuliskan kode yang telah ditentukan, sebuah gambar emoticon akan ditampilkan bersamaan dengan diterbitkanya komentar.

Kode CSS :

img.myGRemo{width:24px;height:18px;padding:2px;border:1px solid #666;background:#ddd;float:left;box-shadow:2px 2px 2px #000;margin:2px;}
#GRemobox{border:2px solid #777;background:#aaa;padding:2px;float:left;width:760px;height:104px;}
.comments{position:relative;}
.comments #GRfloatico{position:fixed;bottom:10px;left:-820px;}
.comments:hover #GRfloatico{left:20%;z-index:999;}
.GRemokode{display:inline-block;width:36px;height:50px;font-size:12px;font-weight:bold;color:#000;line-height:20px;text-align:center;border:1px solid #555;float:left;}

Javascript-1 :

<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment.js' type='text/javascript'></script>

Javascript-2 :

<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment-thumb.js' type='text/javascript'></script>

Cara menggunakan kode :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)". Tunggu beberapa saat hingga sebuah halaman baru terbuka.
3. Cari dan klik "Edit HTML". Halaman baru yang berisi sebuah box "Edit Template" terlihat.
4. Lakukan backup template.
   
   • Klik "Download Template Lengkap (Download Full Template)".
   • Simpan file template dio folder PC.
   • Kembali ke box "Edit Template".
5. Cari kode ]]></b:skin>.
6. Copy dan paste kode CSS di atas ]]></b:skin>.
7. Cari kode </body>.
8. Copy dan paste javascript-1 di atas </body>.
9. Klik "Simpan Template/Save Template".
10. Klik "Expand Widget Template".
11. Cari kode :
    <div class='comment-form'>. Kode seperti ini ada 2 buah.
12. Copy dan paste javascript-2 di bawah <div class='comment-form'> (kedua-duanya!).
13. Klik "Simpan Template/Save Template".
14. Buka blog dan coba hasilnya dengan membuat komentar yang menyertakan emoticon.
15. Selesai !!!