Tạo biểu tượng mặt cười cho Blogspot?

2 Th4

(ChipKool)-Blogspot luôn bị so sánh với WordPress bởi đây là 2 nền tảng blog hàng đầu hiện nay. Ngoài khả năng SEO như mình đề cập đến trong bài trước thì hệ thống Nhận xét của blogspot cũng bị chê bai rất nhiều và điều nhận thấy rõ nhất là hiện nay một số blogger đã chuyển sang dùng Nhận xét bên ngoài như của Disqus, IntenseDebate… Lý do có lẽ là việc reply lại Nhận xét trên blogspot khó khăn và không trực quan như WordPress, đến giờ cũng chỉ hiển thị được avatar cho tài khoản Google, không chỉnh sửa được khung Đăng Nhận xét…

Khung Đăng Nhận xét của blogspot là một trang riêng được chèn vào blog thông qua thẻ iframe và Google không cho ta quyền can thiệp vào khung Đăng Nhận xét này. Đó là lý do mà không đưa được bộ gõ riêng cũng như emoticons vào khung Đăng Nhận xét. Với bộ gõ thì dường như không thể cho đến khi nào Google tích hợp thêm vào. Còn với emoticons thì thật may là có hàm replace, sử dụng hàm này để thay đổi ký tự thành hình ảnh và blogspot đã có emoticons cho dù việc nhập emoticons không thể theo kiểu click.

Emoticons cho blogspot đã được giới thiệu khá lâu rồi, trong bài này mình sẽ hướng dẫn các bạn tạo emoticons cho khung Nhận xét sao cho hiển thị được cả trên các phiên bản trình duyệtInternet Explorer (IE).

Giờ chúng mình cùng thực hiện:

1. Mở template và chèn đoạn mã dưới đây trước thẻ </body>

<script type=’text/javascript’>

//<![CDATA[

function replaceText(){if(!document.getElementById){return;}

bodyText = document.getElementById(“emocomments”);

theText = bodyText.innerHTML;

theText = theText.replace(/:\)\)/gi, “<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif’/>&#8221;);

theText = theText.replace(/=d&gt;/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif’/>&#8221;);

theText = theText.replace(/:d/gi, “<img src=’http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif’/>&#8221;);

theText = theText.replace(/:p/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif’/>&#8221;);

theText = theText.replace(/:\(\(/gi, “<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif’/>&#8221;);

theText = theText.replace(/:\)/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif’/>&#8221;);

theText = theText.replace(/:\(/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif’/>&#8221;);

theText = theText.replace(/:-\?/gi, “<img src=’http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif’/>&#8221;);

theText = theText.replace(/\[\-\(/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif’/>&#8221;);

theText = theText.replace(/:-o/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif’/>&#8221;);

theText = theText.replace(/:-t/gi, “<img src=’http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif’/>&#8221;);

theText = theText.replace(/:-ss/gi, “<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif’/>&#8221;);

theText = theText.replace(/b-\(/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif’/>&#8221;);

theText = theText.replace(/@-\)/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif’/>&#8221;);

theText = theText.replace(/=\)\)/gi, “<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif’/>&#8221;);

bodyText.innerHTML = theText;

}replaceText();

//]]>

</script>

2. Tìm đến thẻ

<b:loop values=’data:post.comments’ var=’comment’>

và thêm trước nó thẻ <div id=’emocomments’>. Tìm thẻ đóng</b:loop>và thêm sau nó thẻ </div>

3. Bước này là hiển thị những ký tự tắt và emoticons tương ứng với nó cho người đọc có thể biết được để chèn vào khung Nhận xét.

Emoticons for Blogspot (work in IE)

Đến bước này Chip lưu ý cho các bạn là:trong nhiều loại temple blogspot có đến 4 thẻ

<data:blogTeamBlogMessage/> này cơ.các bạn bên chèn vào cái thẻ thứ 3 thì nó sẽ hiện như trên trang của Chip.! lưu ý nữa là các bạn chền thật chính xác các thẻ nếu không sẽ rất khó hiện thủ thuật đó’;

Tìm đến thẻ <data:blogTeamBlogMessage/> và chèn đoạn mã dưới đây vào sau nó:

<script type=”text/javascript”>

//<![CDATA[

function moreSmilies() {

document.getElementById(‘smiley-more’).style.display = ‘inline’;

document.getElementById(‘smiley-toggle’).innerHTML = ‘<a href=”javascript:lessSmilies()”>←</a></span>’;

}

function lessSmilies() {

document.getElementById(‘smiley-more’).style.display = ‘none’;

document.getElementById(‘smiley-toggle’).innerHTML = ‘<a href=”javascript:moreSmilies()”>→</a>’;

}

//]]>

</script>

<div class=’emoticons’>

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif’/&gt;:)

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif’/&gt;:(

<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif’/&gt;:))

<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif’/&gt;:((

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif’/>=))

<span id=’smiley-more’ style=’display: none;’>

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif’/>=D&gt;

<img src=’http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif’/&gt;:D

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif’/&gt;:P

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif’/&gt;:-O

<img src=’http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif’/&gt;:-?

<img src=’http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif’/&gt;:-SS

<img src=’http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif’/&gt;:-t

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif’/>%5B-(

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif’/>@-)

<img src=’http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif’/>b-(

</span>

<span id=’smiley-toggle’><a href=”javascript:moreSmilies()”>→</a></span>

</div>

4.Thêm một class emoticons. Chèn đoạn mã dưới vào trước thẻ ]]></b:skin>

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;}

.emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}

5. Lưu template lại và xem kết quả.

Mở rộng:

Các bước trên là chèn 15 emoticons của Zing với ký tự tắt theo phong cách Yahoo. Bạn hoàn toàn có thể thêm emoticons mới nữa và tự đặt ký tự tắt theo ý mình bằng cách chỉnh sửa code javascript ở bước 1.

Ký tự tắt nằm giữa 2 ký tự /

  • Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + * ^ $ thì phải thêm \ trước nó.
  • Với ký tự < phải đổi thành <
  • Với ký tự > phải đổi thành >
  • Với ký tự & phải đổi thành &

Hình ảnh emoticons nằm trong thẻ img, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt.

Lưu ý là với những ký tự tắt bao gồm của nhau như :))🙂 thì bạn phải đặt :)) lên trước🙂 nếu không chỉ ký tự ít hơn được hiện lên.

Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn.

Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).
►►►Vì không thể chèn emoticons theo kiểu click do đó chúng ta chỉ nên sử dụng những ký tự tắt thông dụng để không gây khó khăn cho người đọc.

Cũng đừng nên tham lam chèn nhiều emoticons dẫn đến trình duyệt phải xử lý nhiều thông tin khiến blog tải chậm hơn.

Giờ thì khách thăm blog của bạn thoải mái Nhận xét với những emoticon ngộ nghĩnh cho dù họ có đang dùng trình duyệt bị giới web development ghét nhất mang tên IE 6.

Cảm ơn Noct đã giúp sửa lỗi không hiển thị avatar của tài khoản Blogger.

Theo blog.duypham.info

Advertisements

9 phản hồi to “Tạo biểu tượng mặt cười cho Blogspot?”

  1. ChipKool Tháng Tư 2, 2011 lúc 11:09 sáng #

    Chip đã thực hiện rất thành công thủ thuật này đó,hihi:)

  2. MoigioiForex.Com Tháng Năm 19, 2011 lúc 12:54 sáng #

    Hình ảnh ghi chú có cây bút chì đó là hiệu ứng Blockquote thì phải. Chỉnh lại thuộc tính Blockquote là đc ùi. Bác chèn related post có cả thời gian cụ thể như thế nào zị !? :))

  3. ChipKool_Online Tháng Năm 19, 2011 lúc 2:56 sáng #

    hihi.Mình là gà vườn có biết gì đâu.Thủ thuật này là của bác Bloggerism.Nếu bạn thích mình cũng xin chia sẻ và hướng dẫn bạn 1 số chỗ.hihi.có gì bạn góp ý nhé.:D

  4. MoigioiForex.Com Tháng Năm 19, 2011 lúc 7:36 sáng #

    🙂 uh, tui cũng thuộc gà công nghiệp , hân hạnh làm wen, tên thủ thuật này lag ji nhỉ !?

  5. ChipKool_Online Tháng Năm 19, 2011 lúc 9:30 sáng #

    Tên thủ thuật này là Tạo biểu tượng mặt cười cho Blogspot? mà.bạn định hỏi thủ thuật nào.Tớ thì nghiện Blogspot từ 1 năm về trước cơ.Thấy thủ thuật nào hay cũng sưu tầm về,và áp dụng blog của tớ.hihi.Blog của bạn là moigioiforex.com ak.:) cùng trao đỏi kinh nghiệm nhé bạn.có gì sai xót mong bạn chỉ giáo:))

  6. MoigioiForex.Com Tháng Năm 20, 2011 lúc 4:44 sáng #

    🙂 rảnh nên đi giao lưu zậy thôi, thấy tiện ích bài viết liên quan hiển thị cả thời gian chi tiết nên mún chèn

  7. ChipKool_Online Tháng Năm 20, 2011 lúc 5:05 sáng #

    hihi.bạn làm thử đi.hay lắm.MÀ cái thủ thuật đó tớ hì hục mãi mới tìm ra trên bác Google.hứt hứt:( :(:D

  8. Ko0ny Sr Tháng Bảy 29, 2011 lúc 10:05 sáng #

    🙂

  9. A3FC Tháng Chín 21, 2011 lúc 5:30 chiều #

    :))

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s

%d bloggers like this: