Cách cài đặt thật quá đơn giản.
Khi chỉnh sửa Template, bạn hãy dán toàn bộ đoạn mã dưới đây vào trước thẻ </body> (nên ở chế độ chọn Expand Widget Templates) là OK.
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Posts and Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById('main-wrapper');
theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');
theText = theText.replace(/:2\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" />');
theText = theText.replace(/:3\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" />');
theText = theText.replace(/:4\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" />');
theText = theText.replace(/:5\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" />');
theText = theText.replace(/:6\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" />');
theText = theText.replace(/:7\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" />');
theText = theText.replace(/:8\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" />');
bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
//<![CDATA[
//Emoticons for Blogger Posts and Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById('main-wrapper');
theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');
theText = theText.replace(/:2\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" />');
theText = theText.replace(/:3\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" />');
theText = theText.replace(/:4\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" />');
theText = theText.replace(/:5\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" />');
theText = theText.replace(/:6\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" />');
theText = theText.replace(/:7\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" />');
theText = theText.replace(/:8\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" />');
bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
Bây giờ tôi xin hướng dẫn thêm một số điều cơ bản để bạn có thể tự làm thêm với thủ thuật này.
Bạn cần biết toàn bộ phần nội dung bài viết (post-body) và nhận xét (comments-block) nằm trong phần main của Template. Xét về yếu tố HTML thì post-body là class trong khi comments-block lại là id. Nếu muốn đưa biểu tượng cảm xúc vào cả bài viết lẫn nhận xét thì ta chỉ cần gán chức năng biểu tượng cảm xúc cho một id chứa cả post-body và comments-block. Id đó chính là main-wrapper hoặc content (có thể với mỗi Template sẽ có tên khác nhau do người tạo Template đặt ra). Id này nằm trước dòng
<b:section class='main' id='main' showaddelement='yes'>
cũng có thể là:
<b:section class='main' id='main' showaddelement='no'>
Như vậy trong phần code ở trên, bạn cần thay thế tên id tương ứng cho Blog của bạn.
Bạn có thể tự tăng thêm biểu tượng cảm xúc cho danh mục thật dễ dàng. Chú ý đến dòng code sau đây:
theText = theText.replace(/:1\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" />');
Bạn hãy tìm biểu tượng cảm xúc trên mạng Internet (quá dễ mà), lấy đường link hoặc lưu vào máy tính rồi upload lên webhost nào đấy hoặc lên chính Blogger để lấy đường link. Sau đó lần lượt gán theo thứ tự như thế này:
theText = theText.replace(/:9\)/g,'<img src="URL_9" />');
theText = theText.replace(/:10\)/g,'<img src="URL_10" />');
theText = theText.replace(/:11\)/g,'<img src="URL_11" />');
…
…
Cứ theo thứ tự như thế bạn sẽ thêm vào đoạn code nêu trên để tăng số lượng biểu tượng cảm xúc theo ý thích của bạn.
Sau khi cài đặt thành công, mỗi khi muốn chèn biểu tượng cảm xúc vào bài viết và nhận xét thì chỉ cần đánh nhóm ký tự gồm dấu : và một số thứ tự bất kỳ (từ 1 đến 99) thì sau khi xuất bản bài viết, biểu tượng cảm xúc sẽ hiển thị ngay trên tất cả các công cụ trình duyệt.
Nếu bạn thấy thủ thuật này bổ ích thì bạn cứ thử nhé, và đừng quên để lại một nhận xét thật chân thành cho kỳ công này của tác giả.
Nguồn http://huynh-nhat-ha.blogspot.com
Phan Nguyễn Mai Ly - Simple Is My BLog
Thanks For Reading
Thanks For Reading
