• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Cài đặt Bộ Yahoo Emoticons cho Comments

33
27/03/2011

Tại Bloggerism, qua nhãn Emoticons, bạn có thể tìm hiểu về cách cài đặt biểu tượng cảm xúc trên nhận xét blogspot. Bài viết này xin hướng dẫn cách cài đặt bộ biểu tượng cảm xúc Yahoo Messenger trong đó Bloggerism đã bổ sung thêm một số biểu tượng ngộ nghĩnh. Đặc biệt là có tạo thêm hiệu ứng ẩn hiện bảng biểu tượng cảm xúc.

Trước khi cài đặt cho blogspot của mình, bạn có thể xem Demo.



Để cài đặt, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates.

Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function emoticonCommentha(replace) {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById(replace);
replacetheText = bodyText.innerHTML;
replacetheText = replacetheText.replace(/:\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" />');
replacetheText = replacetheText.replace(/:\)\]/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" />');
replacetheText = replacetheText.replace(/;\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" />');
replacetheText = replacetheText.replace(/;\;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" />');
replacetheText = replacetheText.replace(/:D/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" />');
replacetheText = replacetheText.replace(/;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" />');
replacetheText = replacetheText.replace(/:p/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" />');
replacetheText = replacetheText.replace(/:\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" />');
replacetheText = replacetheText.replace(/:\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" />');
replacetheText = replacetheText.replace(/:\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" />');
replacetheText = replacetheText.replace(/:X/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" />');
replacetheText = replacetheText.replace(/=\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" />');
replacetheText = replacetheText.replace(/:\-\o/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" />');
replacetheText = replacetheText.replace(/:-\//g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" />');
replacetheText = replacetheText.replace(/:-\*/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" />');
replacetheText = replacetheText.replace(/:\|/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" />');
replacetheText = replacetheText.replace(/8\-\}/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" />');
replacetheText = replacetheText.replace(/~x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" />');
replacetheText = replacetheText.replace(/b-\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" />');
replacetheText = replacetheText.replace(/:-\L/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" />');
replacetheText = replacetheText.replace(/x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" />');
replacetheText = replacetheText.replace(/=\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" />');
replacetheText = replacetheText.replace(/:\P/g,'<img src="http://lh6.ggpht.com/_qadpUUgfbYI/Sd4rapzVY2I/AAAAAAAAAtU/BYi7ipMmloE/tongue.png" />');
replacetheText = replacetheText.replace(/:\mj/g,'<img src="http://lh4.ggpht.com/_qadpUUgfbYI/SkdDCxq5nSI/AAAAAAAABU4/eEEj7ZUjuZc/MJ.gif" />');
bodyText.innerHTML = replacetheText;
}
//]]>
</script>

Bước 2. Đặt khung Biểu tượng cảm xúc. Tìm đến dòng <b:includable id='comment-form' var='post'> và đặt sau nó bằng đoạn code bên dưới.

<script language="javascript">
//<![CDATA[
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Emoticons";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Emoticons";
}
}
//]]>
</script>
<a href="javascript:toggle();" id="displayText">[&#9660;/&#9650;] Emoticons</a>
<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>
<div id="toggleText" style="display: none;">
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
<img border='0' height='18' src='http://lh6.ggpht.com/_qadpUUgfbYI/Sd4rapzVY2I/AAAAAAAAAtU/BYi7ipMmloE/tongue.png' width='18'/> :P
<img border='0' height='22' src='http://lh4.ggpht.com/_qadpUUgfbYI/SkdDCxq5nSI/AAAAAAAABU4/eEEj7ZUjuZc/MJ.gif' width='50'/> :mj
</b>
</div>
</div>

Đoạn Javascript ở trên sẽ giúp tạo hiệu ứng ẩn hiện khung Biểu tượng cảm xúc. Trước đây blog Fandung.com đã giới thiệu một cách ẩn hiện khung Biểu tượng cảm xúc song cách cài đặt có phần khó cho các newbie blogspotist cho nên Bloggerism mới giới thiệu cách này để bạn đọc chia sẻ.

Bước 3. Để biểu tượng cảm xúc hiển thị trên phần Comment Body thì bạn hãy tìm đến đoạn code tương tự bên dưới.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Hoặc:

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Đối với một số Template là đoạn code:

<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

Thay dòng <p><data:comment.body/></p> bằng đoạn code:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p><script type='text/javascript'> replace = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;; emoticonCommentha(replace);</script>

Lưu Template là OK.

Lưu ý: Bài viết này giới thiệu chung cách cài đặt cho tất cả blogspot, khi áp dụng thì bạn nên download các emoticon về rồi upload lên blogspot của bạn để lấy URL rồi thay thế lần lượt các URL tương ứng trong code, nhằm tránh tình trạng load trang chậm.

{33 bình luậnAdd yours ?}

23:06:00, 27 thg 3, 2011

code này ngày xưa bác fandung đã chia sẻ thì phải?

Reply
07:03:00, 28 thg 3, 2011

tôi nhớ có lần ban đã giới thiệu rồi

Reply
07:15:00, 28 thg 3, 2011

@FRIENDS-PC Script thì giới thiệu rồi, nhưng bộ Yahoo Emoticons thì mới, thêm cái hiệu ứng ẩn hiện. :71)

Reply
07:16:00, 28 thg 3, 2011

@Rùa Biển Code của FD khác Ruabien à, cũng là bộ Yahoo Emoticons nhưng script thì khác.

Reply
14:08:00, 31 thg 3, 2011

muốn thay đổi kí tự để hiển thị emo thì sao hả anh ?

Reply
14:13:00, 31 thg 3, 2011

E phải ngâm cứu sâu hơn tí, ví dụ trong nhóm ký tự (/:\)\)/ thì em chỉ được phép thay các dấu : ) ) còn các dấu như ( / \ \ / là các ký tự dùng cho script để thay thế nhóm ký tự bằng emo.

Reply
02:26:00, 5 thg 4, 2011

CÀi rồi mà ko thấy chạy :(

Reply
17:48:00, 25 thg 4, 2011

Sao mình cũng cài rồi nhưng vẫn ko thấy chạy !

Reply
09:57:00, 3 thg 5, 2011

hay lắm! cảm ơn bạn nha! :63)

Reply
03:24:00, 9 thg 5, 2011

Cám ơn bạn nha :55)

Reply
20:56:00, 31 thg 5, 2011

Chào bạn Huỳnh Nhật Hà :63) , hồi trước các dạng emo mình đã thử quá nhưng đều phải gỡ đi và dùng cái hiện tại. Lý do : trên ie6 phải load xong trang thì script mới bắt đầu replace để hiện emo

Cái hiện tại mình đang dùng khắc phục đc nhược điểm đó, nhưng mà nó lại lagg vô cùng

Cho mình hỏi code này của bạn chạy trên IE6 và 7 ra sao ?? Mình cài Win7 cách đây ko lâu nên trong máy đang là bản IE9, không test được

Reply
Bloggerism
AUTHOR
22:23:00, 31 thg 5, 2011

Chạy tốt trên mọi trình duyệt bạn à.

Reply
22:27:00, 31 thg 5, 2011

Bạn test chưa ?? mình biết là chạy tốt, mình chỉ quan tâm tới tóc độ thực thi thôi, vì IE6 hơi ngu nên mấy script replace này thường chỉ được thực thi khi không còn gì trong trang đang chờ load nữa

Reply
04:02:00, 1 thg 6, 2011

Thanks nhé. Mình làm được rồi. :) Mà sao Emoticons của bạn mình bấm vào không thấy gì hết vậy? Bấm hok được

Reply
03:24:00, 5 thg 7, 2011

Cái này hay nhưng hơi bất tiện ở chỗ muốn thêm mặt cười nào vào comments lại phải trỏ vào hình mới biết được mã , các bác thử tham khảo bộ mặt cười cửa em xem thế nào :)
http://huycovip-net.blogspot.com/2011/06/them-bo-mat-cuoi-cho-comments-cua.html

Reply
09:42:00, 5 thg 7, 2011

@ Huy Cò Víp: Emo của bạn đâu nhìn thấy mặt đâu mà cười được. Lần sau k được PR kiểu đó nha bạn :53)

Reply
18:53:00, 28 thg 7, 2011

Bác Huỳnh Nhật Hà cho em hỏi tí sao em add bộ emoticon vào đc rồi, nhưng khi cm thì không hiện cái icon đó nhỉ ?

Reply
18:55:00, 28 thg 7, 2011

Có j bác cho em xin cái Y!M để tiện làm phiền luôn nhé :53

Reply
18:56:00, 28 thg 7, 2011

Test icon phát :74) :75)

Reply
20:30:00, 28 thg 7, 2011

Hiện làm sao được bởi vì e chưa làm Bước 3 cơ mà :54)

Reply
10:54:00, 29 thg 7, 2011

Chắc chắn là làm rồi mà bác
bác xem thử này :
http://i961.photobucket.com/albums/ae100/tranvuhoanglongoops/untitled-27.jpg
Với các bác cho em xin cái Y!M hỏi cho dễ đi nào :D

Reply
11:09:00, 29 thg 7, 2011

E gửi Template .xml qua email webmaster@thuthuatblogger.info nhé. Hiện tại do bận nhiều việc nên chưa hỗ trợ Y!M

Reply
11:34:00, 29 thg 7, 2011

Check mail dùm em nhé bác :53)

Reply
13:57:00, 29 thg 7, 2011

Anh đã xem code trong Template của e rồi. Do Bước 3 em thay sai nên k hoạt động. Kết quả sau khi thay thế của em là thế này:

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p><script type='text/javascript'> replace = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;; emoticonCommentha(replace);</script></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Rõ ràng là sai. Phải thế này mới đúng nè:


<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p><script type='text/javascript'> replace = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;; emoticonCommentha(replace);</script>
</b:if>
</dd>

E đã thay vào chỗ comment-body của các nhận xét bị xóa, còn cái của k bị xóa thì em lại k thay, làm sao nó hoạt động cho được. Chỉnh lại nhé em. :51)

Reply
16:46:00, 29 thg 7, 2011

Chạy ổn lắm, thanks bác nhiều nhiềuuuuuu :63

Reply
11:53:00, 3 thg 9, 2011

:51) Thử rùi

Reply
11:57:00, 3 thg 9, 2011

Làm sau cho nó hiện được trong khung Comments đây bạn, giúp dùm, xin cảm ơn. Bài viết rất hay:
http://phuchungca.blogspot.com/2011/09/thu-ro-ma-giang-luoc.html?showComment=1315025762110#c2151748244490680786

Reply
22:13:00, 6 thg 9, 2011

Anh ơi em chèn đc bộ mặt cười của yahoo rồi nhưng em muốn nó là một số icon khác như của anh bên dưới.. em có thay đổi thử nhưng mà khi viết kí tự để ra thì nó vẫn ra mặt yahoo là sao >
?

Reply
22:27:00, 6 thg 9, 2011

To Kiều Hải Vân: Phải lần lượt thêm hoặc thay các URL đến icon ở cả bước 1 và bước 2 mới được.

Reply
21:50:00, 9 thg 10, 2011

@Huỳnh Nhật Hàko thể dùng số hay chữ để thay các ký tự được sao bạn ?

Reply
22:00:00, 9 thg 10, 2011

@Huỳnh Nhật Hààh mình đã làm được rồi bạn

Reply
14:44:00, 21 thg 11, 2011

Anh hà ơi. em làm và thử nhiều cách chèn rồi mà ko đc. em muốn chèn Emoticon của yahoo giống của duyblog.com, anh giúp em đc ko, cái template của em nó kén quá. em hỏi duyblog rồi nhưng bạn ấy bảo lâu quá rồi nên ko nhớ. mong anh giúp em

Reply
00:16:00, 24 thg 11, 2011

Dear HNH, cho mình hỏi nếu đã chèn emoticons này vào khung Nhận Xét mà bây giờ lại muốn chuyển qua dạng Phân Cấp thì làm sao. Mình đã chuyển thử. Kết quả là không hiển thị mặt cười nữa.

Xin cám ơn,
XP

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn