Blogspot comment - Emoticons
Trước khi bước bào ứng dụng, chúng ta sẽ học chút replace() trong JavaScript
<script>
function doi()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace(/Việt/g,"Việt Nam");
document.getElementById("demo").innerHTML=n;
}
// g: phân biệt ký tự thường hay HOA. gi: không phân biệt ký tự
</script>
<p id="demo">Tôi là người Việt!</p>
<button onclick="doi()">Đổi ký tự</button>
Tôi là người Việt!
Như vậy đơn giản chỉ là vùng comment của bạn có định danh là emocomments
ta sẽ viết đoạn javacript tương tự như trên, sẽ thay thế những từ bạn muốn trong vùng emocomments thành ký tự khác.
Đây là kỹ thuật cơ bản mà các blog đang áp dụng, có chăng chỉ là các biểu tượng, ký tự viết tắt có khác nhau.
Bước 1: Mở template và chèn đoạn mã JS dưới đây trước thẻ </body>
<script type='text/javascript'>Bước 2: Thêm
//<![CDATA[
function replaceText()
{
if(!document.getElementById){return;}
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;
theText = theText.replace(/8bi-thuong/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/you_make_me_hurt.png'/>");
theText = theText.replace(/8choi-ban/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/follow_the_sign.png'/>");
theText = theText.replace(/8o-hay/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/eh.png'/>");
theText = theText.replace(/8cay-cu/gi, "<img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/to_sulk.png'/>");
theText = theText.replace(/8yeu-qua/gi, "<img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/in_love.png'/>");
theText = theText.replace(/8cam-mom/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/feel_sick.png'/>");
theText = theText.replace(/8leu-leu/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/make_fun.png'/>");
theText = theText.replace(/8to-mom/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/to_yawn.png'/>");
theText = theText.replace(/8buc-tuc/gi, "<img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/uhh.png'/>");
theText = theText.replace(/8buon-ghe/gi, "<img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/sad.png'/>");
theText = theText.replace(/8he-he/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/he_he.png'/>");
theText = theText.replace(/8nguy-hiem/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/ate_someting_bad.png'/>");
theText = theText.replace(/8mom-roi/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/dazzled.png'/>");
theText = theText.replace(/8hay-hay/gi, "<img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/you_like_my_teeths.png'/>");
theText = theText.replace(/8om-roi/gi, "<img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/i_am_tired.png'/>");
theText = theText.replace(/8them-ghe/gi, "<img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/laughter.png'/>");
theText = theText.replace(/8whoa/gi, "<img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/whoa.png'/>");
bodyText.innerHTML = theText;
}
replaceText();
//]]>
</script>
<b:loop values='data:post.comments' var='comment'>Thành:
...
</b:loop>
<div id='emocomments'>
<b:loop values='data:post.comments' var='comment'>
...
</b:loop>
</div>
Bước 3: Chú thích cho người dùng
Tìm đến thẻ <data:blogTeamBlogMessage/> thứ 2 và chèn đoạn mã dưới đây vào sau nó:
<style>
.emo{position: relative;}
.emo input{display: none; position: absolute;}
.emo:hover input{display: block;z-index:29; top:5px;width:75px;opacity: 1;background:#E4F1F1;box-shadow:5px 5px 20px 2px #999999;text-align:center;border:0;}
</style>
<details>
<summary title='Click vào ký tự tắt -> nhấn Ctrl + C -> dán vào khung nhập. Như vậy! bạn không cần gõ lại ký tự tắt nữa!'>Biểu tượng cảm xúc</summary>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/you_make_me_hurt.png'/> <input value='8bi-thuong' onclick='this.select()'/> </span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/follow_the_sign.png'/> <input value='8choi-ban' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/eh.png'/> <input value='8o-hay' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/to_sulk.png'/> <input value='8cay-cu' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/in_love.png'/> <input value='8yeu-qua' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/feel_sick.png'/> <input value='8cam-mom' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/make_fun.png'/> <input value='8leu-leu' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/to_yawn.png'/> <input value='8to-mom' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/uhh.png'/> <input value='8buc-tuc' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-1.findicons.com/files/icons/350/aqua_smiles/48/sad.png'/> <input value='8buon-ghe' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/he_he.png'/> <input value='8he-he' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/ate_someting_bad.png'/> <input value='8nguy-hiem' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/dazzled.png'/> <input value='8mom-roi' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-5.findicons.com/files/icons/350/aqua_smiles/48/you_like_my_teeths.png'/> <input value='8hay-hay' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-2.findicons.com/files/icons/350/aqua_smiles/48/i_am_tired.png'/> <input value='8om-roi' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-3.findicons.com/files/icons/350/aqua_smiles/48/laughter.png'/> <input value='8them-ghe' onclick='this.select()'/></span>
<span class='emo'><img src='http://png-4.findicons.com/files/icons/350/aqua_smiles/48/whoa.png'/> <input value='8whoa' onclick='this.select()'/></span>
</details>
Ghi chú:- Nhược điểm của đoạn code trên là có sử dụng chút HTML5 và CSS3 nên với trình duyệt cũ hiển thị sẽ không đẹp. Bạn có thể bỏ thẻ details và css đi là được
- Có thể ứng dụng vào việc ngăn từ dung tục.
- Có thể ứng dụng vào bài viết, bạn chỉ cần thay emocomments thành ID của vùng bài viết là được.
- Bản thân mình là người nhớ kém và ngại gõ nên đã nghĩ ra cách này. Bạn chỉ cần di chuột vào các biểu tượng sẽ xuất hiện input -> click vào input -> Ctrl+C -> Ctrl+V. vậy là ta không phải gõ ký tự cảm xúc nữa!
TTTj
Chủ đề: b. Blog b.Blogger b.Blogger comment