rss

Menampilkan Emoticon Sendiri di Atas Kotak Komentar

Jumat, 27 November 2009

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui emoticon. Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di kotak komentar. Cara mengakalinya sebagai berkut:

1. Login --->>> Tata Letak --->>> Edit HTML.

2. Centang "Expand widgets template".

3. Tekan ctrl + F cari kode </body> dan letakkan kode dibawah ini diatas kode </body>


<script type='text/javascript'>

//<![CDATA[



a = document.getElementsByTagName('LABEL');

if(a) {

for(i=0; i < a.length; i++) {

_str = a.item(i).innerHTML.replace(/:\)\)/gi, "<img
src='http://img198.imageshack.us/img198/2177/ngakakn.gif' alt=''
class='smiley'/>");

_str = _str.replace(/x\(/gi, "<img
src='http://img691.imageshack.us/img691/2395/teriak.gif' alt=''
class='smiley'/>");

_str = _str.replace(/~\x\(/gi, "<img
src='http://img691.imageshack.us/img691/3571/stres.gif' alt=''
class='smiley'/>");

_str = _str.replace(/x\D/gi, "<img
src='http://img688.imageshack.us/img688/2440/sebel.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\@/gi, "<img
src='http://img198.imageshack.us/img198/2442/puyeng.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\)/gi, "<img
src='http://img514.imageshack.us/img514/959/baguus.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:x/gi, "<img
src='http://img695.imageshack.us/img695/8913/marah.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\|/gi, "<img
src='http://img517.imageshack.us/img517/2529/maluku.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\$/gi, "<img
src='http://img8.imageshack.us/img8/4081/lovewb.gif' alt='' class='smiley'/>");

_str = _str.replace(/:f/gi, "<img
src='http://img8.imageshack.us/img8/765/kringet.gif' alt='' class='smiley'/>");

_str = _str.replace(/;\;\)/gi, "<img
src='http://img23.imageshack.us/img23/8230/yesxp.gif' alt='' class='smiley'/>");

_str = _str.replace(/:\*/gi, "<img
src='http://img8.imageshack.us/img8/2043/kagum.gif' alt='' class='smiley'/>");

_str = _str.replace(/=\(/gi, "<img
src='http://img196.imageshack.us/img196/8930/jongkok.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:D/gi, "<img
src='http://img196.imageshack.us/img196/3552/hihihiu.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\?/ig,"<img
src='http://img517.imageshack.us/img517/4159/mangu.gif' alt=''
class='smiley'/>")

a.item(i).innerHTML = _str;

}

}



a = document.getElementById('comments');

if(a) {

b = a.getElementsByTagName("DD");

for(i=0; i < b.length; i++) {

if (b.item(i).getAttribute('CLASS') == 'comment-body')
{

_str = b.item(i).innerHTML.replace(/:\)\)/gi, "<img
src='http://img198.imageshack.us/img198/2177/ngakakn.gif'
alt='' class='smiley'/>");

_str = _str.replace(/x\(/gi, "<img src='http://img691.imageshack.us/img691/2395/teriak.gif'
alt='' class='smiley'/>");

_str = _str.replace(/~\x\(/gi, "<img
src='http://img691.imageshack.us/img691/3571/stres.gif' alt=''
class='smiley'/>");

_str = _str.replace(/x\D/gi, "<img
src='http://img688.imageshack.us/img688/2440/sebel.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\@/gi, "<img
src='http://img198.imageshack.us/img198/2442/puyeng.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\)/gi, "<img
src='http://img514.imageshack.us/img514/959/baguus.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:x/gi, "<img
src='http://img695.imageshack.us/img695/8913/marah.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\|/gi, "<img
src='http://img517.imageshack.us/img517/2529/maluku.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\$/gi, "<img
src='http://img8.imageshack.us/img8/4081/lovewb.gif' alt='' class='smiley'/>");

_str = _str.replace(/:f/gi, "<img
src='http://img8.imageshack.us/img8/765/kringet.gif' alt='' class='smiley'/>");

_str = _str.replace(/;\;\)/gi, "<img
src='http://img23.imageshack.us/img23/8230/yesxp.gif' alt='' class='smiley'/>");

_str = _str.replace(/:\*/gi, "<img
src='http://img8.imageshack.us/img8/2043/kagum.gif' alt='' class='smiley'/>");

_str = _str.replace(/=\(/gi, "<img
src='http://img196.imageshack.us/img196/8930/jongkok.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:D/gi, "<img
src='http://img196.imageshack.us/img196/3552/hihihiu.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\?/ig,"<img
src='http://img517.imageshack.us/img517/4159/mangu.gif' alt=''
class='smiley'/>")

b.item(i).innerHTML = _str;

}

}

}



a = document.getElementById('comments');

if(a) {

c = a.getElementsByTagName("DD");

for(i=0; i < c.length; i++) {

if (c.item(i).getAttribute('CLASS') == 'komentarku-Body')
{

_str = c.item(i).innerHTML.replace(/:\)\)/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'
alt='' class='smiley'/>");

_str = _str.replace(/x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'
alt='' class='smiley'/>");

_str = _str.replace(/:\)/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:p/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt=''
class='smiley'/>");

_str = _str.replace(/\;\)/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\(/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:d/gi, "<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt=''
class='smiley'/>");

_str = _str.replace(/:\?/ig,"<img
src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt=''
class='smiley'/>")

c.item(i).innerHTML = _str;

}

}

}



//]]>

</script>


Kode yang berwarna merah adalah kode id CSS untuk menampilkan komentar di template saya. Karena di settingan template ku, saya pasang Author Comment Highlight (lihat artikel ini) maka ada dua tampilan komentar, yaitu komentar pengunjung blog dan pemilik blog. Untuk pengunjung blog saya pasang head onion emoticon (class comments-body), sedangkan untuk pemilik blog saya pasang yahoo emoticon (class komentarku-Body).

Kode yang berwarna hijau adalah kode alamat url hosting image saya. Untuk mencegah kelebihan bandwith di hostingan saya, silahkan ganti kode warna hijau dengan alamat url hostingan sobat blogger. O ya.. sobat blogger bisa memasang emoticon apa saja, tidak harus pasang head onion emoticon dan yahoo emoticon seperti punya saya. Silahkan ekspresikan emoticon kalian sendiri.

Kode yang berwarna biru adalah kode pemanggilan emoticonnya. Silahkan ganti dan expresikan pemanggilan emoticon kalian sendiri.

Jika Sudah Sekarang Cari kode yang mirip di bawah ini


<p
class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>


Nah Kalau Sudah Ketemu masukkan kode berikut di bawah kode <p class='comment-footer'>


<p
class='comment-footer'>

<div style='-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial; -moz-background-inline-policy:
-moz-initial; width: 200; text-align: center; border: 0px solid #90be35;
padding: 5px; background: #ffffff; height:350'>


<b>

<img src="mem-poskan-komentar-di-blog_files/ngakakn.gif" border="0">

:))

<img src="mem-poskan-komentar-di-blog_files/teriak.gif" border="0">

x(

<img src="mem-poskan-komentar-di-blog_files/stres.gif" border="0">

~x(

<img src="mem-poskan-komentar-di-blog_files/sebel.gif" border="0">

x((

<img src="mem-poskan-komentar-di-blog_files/puyeng.gif" border="0">

:@

<img src="mem-poskan-komentar-di-blog_files/baguus.gif" border="0">

:)

<img src="mem-poskan-komentar-di-blog_files/marah.gif" border="0">

:x

<img src="mem-poskan-komentar-di-blog_files/maluku.gif" border="0">

:|

</b>

<br>

<b>


<img
src="mem-poskan-komentar-di-blog_files/lovewb.gif" border="0">

:$

<img src="mem-poskan-komentar-di-blog_files/kringet.gif" border="0">

:f

<img src="mem-poskan-komentar-di-blog_files/kagum.gif" border="0">

:*

<img src="mem-poskan-komentar-di-blog_files/jongkok.gif" border="0">

=(

<img src="mem-poskan-komentar-di-blog_files/hihihiu.gif" border="0">

:D

<img src="mem-poskan-komentar-di-blog_files/mangu.gif" border="0">

:?

<img src="mem-poskan-komentar-di-blog_files/yesxp.gif" border="0">

;;)

</b>


</div>


<b:if
cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>



Langkah terakhir tinggal SIMPAN
Diposting oleh kupas-blogger di 19.39
Label:

0 komentar:


Posting Komentar

Jika sobat blogger menyukai artikel ini atau mempunyai pertanyaan ttg artikel diatas, silahkan poskan komentar sobat blogger. Respon kalian sangat berarti untuk blog ini. Cara mem poskan komentar silahkan KLIK disini...

Komentar SPAM di larang masuk!!
:)) x( ~x( x(( :@ :) :x :| :$ :f
:* =( :D :~ :s 8) =(( x) :? :t :o ;;( ;;)

Langganan: Posting Komentar (Atom)
 

Recent Comment

Memuat...