Thủ thuật chèn biểu tượng cảm xúc vui vào comment cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Thời gian qua có một số bạn yêu cầu mình hướng dẫn cách để chèn biểu tượng cảm xúc cho Blogger, nên hôm nay mình xin chia sẻ cùng các bạn thủ thuật này. Thật ra thì thủ thuật này đã được một số Blogspot hướng dẫn cách chèn biểu tượng này cho phần comments của Blogspot như Blog Nhật Hà hay Blog Fandung. Mỗi blog có một cách chèn khác nhau và nó cũng có những ưu điểm riêng và cách trình bày các biểu tượng khác nhau. Để giúp những bạn chưa biết cách thực hiện việc này mình xin chia sẻ thủ thuật này với cách trình bày các biểu tượng dạng ẩn hiện khi click vào more hay less.

Hình ảnh minh họa

Kết quả sau thủ thuật này

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào trước thẻ </body>

<script type='text/javascript'>
/* <![CDATA[ */
function moreEmotion() {
document.getElementById('emotion-more').style.display = 'inline';
document.getElementById('emotion-toggle').innerHTML = '<a href="javascript:lessEmotion()">« less</a></span>';}
function lessEmotion() {
document.getElementById('emotion-more').style.display = 'none';
document.getElementById('emotion-toggle').innerHTML = '<a href="javascript:moreEmotion()">more »</a>';
}
/* ]]> */
</script>
<script src='http://data-traidatmui.appspot.com/scripts/emotion_comment.js' type='text/javascript'/>

6. Tiếp theo bạn tìm đến code bên dưới hoặc tương tự

<data:blogTeamBlogMessage/>

7. Sau đó chèn code bên dưới vào ngay sau code vừa tìm được

<div style='width:410px;text-align: left; font-weight:bold;color:#000;border: 1px solid #cccccc; padding: 2px; background: #eeeddf;'>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :<strong/>))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;<strong/>))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;<strong/>)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :<strong/>D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;<strong/>)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :<strong/>p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :<strong/>((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :<strong/>)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :<strong/>(<span id='emotion-more' style='display:none'>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :<strong/>X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =<strong/>((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :<strong/>-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :<strong/>-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :<strong/>-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :<strong/>|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8<strong/>-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :<strong/>)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~<strong/>x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :<strong/>-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b<strong/>-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :<strong/>-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x<strong/>(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =<strong/>))</span> <span id='emotion-toggle'><a href='javascript:moreEmotion()'>more »</a></span></div>

8. Cuối cùng save template lại

Bạn chú ý để các biểu tượng cảm xúc vui này hiển thị trong comment của bạn thì nội dung comment phải được bao bởi class="comment-body" trong thẻ <dd> </dd> tương tự như bên dưới (Trong đó dấu (---) là còn những code khác tùy mỗi template, mình chỉ cho bạn thấy cơ bản cần phải có code bao quanh phần nội dung comment như vậy), nếu trong template của bạn chưa có bạn có thể thêm vào class="comment-body".

<dd class='comment-body'>
------------------------
<data:comment.body/>
-----------------------
</dd>

Như vậy là xong, nếu bạn không rỏ thì bạn có thể để lại comment bên dưới để thảo luận thêm nhé!

Chúc bạn thành công

Tổng hợp

Chuyên mục: Blogspot nâng cao