Biểu tượng cảm xúc cho bình luận blogspot

Thêm biểu tượng cảm xúc cho bình luận blogspot giúp người bình luận có thể dễ dàng bày tỏ cảm xúc khi muốn hỏi hay trả lời về một vấn đề nào đó hay đơn giản là những cuộc nói chuyện vu vơ.

Vì blogspot không hỗ trợ tiện ích emoticon cho phần bình luận như WordPress hay Yahoo nên các bạn phải tự thêm một cách thủ công. Ở hướng dẫn trước mình đã hướng dẫn thêm tiện ích emoticon cho blogspot nhưng có một số bất cập như phải trỏ chuột vào icon mới thấy được kí tự nên ở bài hướng dẫn này mình sẽ khắc phục sự bất tiện này.

Hướng dẫn thêm biểu tượng cảm xúc cho bình luận blogspot

I. Thêm CSS

- Tìm đến thẻ ]]></b:skin> và thêm css sau vào trước nó.

.emoticons-v2 {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;}
.emoticons-v2 a, .emoticons-v2 a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}
.emoticons-v2 .emo_icon {float: left;text-align: center;height: 40px;width: 41px;margin: 0 0 10px;}
.emoticons-v2 span {display: block;font-weight: 400;font-size: 11px;letter-spacing: 1px;color: #444;}

II. Thêm Javascript

- Tìm đến thẻ </body> và thêm js sau vào bên trên.

<script type="text/javascript">
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z4c/1/16/1f642.png'/>");
theText = theText.replace(/:D/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z4f/1/16/1f601.png'/>");
theText = theText.replace(/:P/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/za1/1/16/1f61d.png'/>");
theText = theText.replace(/:\*/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/zf6/1/16/1f619.png'/>");
theText = theText.replace(/:\`/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/zd0/1/16/1f602.png'/>");
theText = theText.replace(/:\♥/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z2/1/16/1f60d.png'/>");
theText = theText.replace(/:O/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/zc1/1/16/1f62e.png'/>");
theText = theText.replace(/-\_\-/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/zee/1/16/1f611.png'/>");
theText = theText.replace(/:\"\(/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z40/1/16/1f62d.png'/>");
theText = theText.replace(/:H/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z32/1/16/1f637.png'/>");
theText = theText.replace(/:\(/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z22/1/16/1f61e.png'/>");
theText = theText.replace(/:Z/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/zaf/1/16/1f634.png'/>");
theText = theText.replace(/:T/gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z55/1/16/1f607.png'/>");
theText = theText.replace(/:\</gi, "<img src='https://www.facebook.com/images/emoji.php/v5/z95/1/16/1f629.png'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Xem thêm: Làm nổi bật bài viết mong muốn cho blogspot

III. Thêm khung hiển thị icon

- Tìm đến <data:blogTeamBlogMessage/> (có 4 đoạn) và thêm HTML sau vào trên nó

<div class='emoticons-v2'>
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z4c/1/16/1f642.png'/><span>:)</span></div>
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z4f/1/16/1f601.png'/><span>:D</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/za1/1/16/1f61d.png'/><span>:P</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/zf6/1/16/1f619.png'/><span>:*</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/zd0/1/16/1f602.png'/><span>:`</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z2/1/16/1f60d.png'/><span>:&#9829;</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/zc1/1/16/1f62e.png'/><span>:O</span></div>
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/zee/1/16/1f611.png'/><span>-_-</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z40/1/16/1f62d.png'/><span>:&quot;(</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z32/1/16/1f637.png'/><span>:H</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z22/1/16/1f61e.png'/><span>:(</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/zaf/1/16/1f634.png'/><span>:Z</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z55/1/16/1f607.png'/><span>:T</span></div> 
<div class='emo_icon'><img src='https://www.facebook.com/images/emoji.php/v5/z95/1/16/1f629.png'/><span>:&lt;</span></div>
</div>

- Tiếp theo tìm đến <b:loop values='data:post.comments' var='comment'>  thu gọn thẻ này lại sau đó thêm thẻ <div id='emocomments'> bao lấy nó, nhớ đóng bằng </div> nhé (hình dưới).

IV. Tùy chỉnh

- Các kí tự đặc biệt [ ] { } \ / ( ) . ? + * ^ $ phải thêm / trước nó.

- Các kí tự < > ' " & phải Convert (Convert TẠI ĐÂY)

- Thay đổi link ảnh mong muốn.

Xem thêm: Sửa lỗi ảnh blogspot không hiển thị như thế nào?

V. Lưu ý khi cài đặt

- Nếu kí tự lặp lại dạng :)) và :) thì :)) phải đặt trước :) nếu không sẽ hiển thị lỗi.
- Các kí tự dạng số như :1 :2 :3 nên đặt là ;1 ;2 ;3 vì icon sẽ hiện ở phần timestamp.

- Muốn ẩn nội dung tục tĩu thì thay kí tự bằng chữ và thay hình ảnh bằng ***. 

Ví dụ: theText = theText.replace(/dm/gi, "<b>***</b>");

Thật dễ dàng đúng không nào, chúc các bạn thành công !