"Những con đường anh đi rồi cũng đưa anh về bên em"

Thứ Sáu, 11 tháng 10, 2013

Chèn 3D smiley động cho Threaded comments

Những smiley này Chân Tình rất thích và đang được sử dụng tại blog của Chân Tình. Nhìn chúng thật là đáng yêu phải không nào? Nếu bạn cũng nghĩ vậy thì chúng ta bắt tay vào việc .



Bước 1:  Dashboard → Template → Edit HTML → Proceed → Expand Widget Template. 
 (Vào Thiết kế-> Chỉnh sửa HTML )


Bước 2: Sử dụng tổ hợp phím Ctrl+F để tìm đến khóa </body> và ngay trên nó, chèn đoạn mã dưới đây vào:


<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='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();//]]>
</script>
Bước 3: Tìm đến thẻ <b:loop values='data:post.comments' var='comment'> và thêm trước nó thẻ <div id='comment-holder'>. Tìm thẻ đóng </b:loop> và thêm sau nó thẻ </div>.
Bước 4: Tìm đến thẻ <data:blogTeamBlogMessage/> thứ 2 (thuờng thì có 4 cái như vậy) 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()">&#8592;</a></span>';}
function lessSmilies() {document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">&#8594;</a>';}//]]>
</script>
<div class='emoticons'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>:)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>:(
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>:))
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>:((
<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'/>:D
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>:P
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>:-O
<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>:-?
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>:-SS
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>:-t
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>[-(
<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()">&#8594;</a></span>
</div>
Đoạn mã trên 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. Vị trí của nó sẽ ở ngay trên hộp ký tự nơi bạn gõ nhận xét.
Bước 5: Tìm đến khóa ]]></b:skin> và chèn ngay trước nó đoạn mã sau:
.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;}
Bước 6: Lưu mẫu lại

P/s: Bạn kích vào hình ảnh để xem ảnh lớn nhé!

19 nhận xét:

  1. cho nhiều thứ quá vào blog có sợ nặng máy không em?

    Trả lờiXóa
    Trả lời
    1. Dạ cũng không sao đâu chị ạ, em vào blog bằng ĐT vẫn không sao mà! chúc chị ngủ ngon nha

      Xóa
  2. cuối tuần blog vắng lặng như tờ.chẳng biết làm gì HAI qua nhà ÚT đọc thơ củ, vủa về đã thấy bài hiện lên,anh vui lắm, nhưng kg hoàn toàn vì bài mới xuất hiện...mà biết là bên kia màn hình em đang hiện diện cùng anh....chúc em an vui với đêm cuối tuần ÚT nhé!

    Trả lờiXóa
  3. Cuối tuần vui vẻ , hp bên những người thân em gái nhé :x >:D<

    Trả lờiXóa
    Trả lời
    1. Eg cảm ơn chị yêu nhiều nè! chúc chị yêu một ngày đong đầy yêu thương chị nhé!

      Xóa
  4. Trả lời
    1. CT cảm ơn anh Ba, anh ba cũng ngủ ngon nhé!

      Xóa
  5. Thấy đẹp quá, BLT cũng muốn rinh về lắm chị CT à, nhưng ngặt nỗi hôm trước cũng tha về một ít ...kết quả: tất cả biến mất! chắc là em phải từ từ ngâm cứu kỹ. cảm ơn chị nhiều nhé.
    Ngày mới sắp đến an lành và hăng say công tác chị nhé!

    Trả lờiXóa
    Trả lời
    1. Sang bên này mới mẻ lắm BLL ạ. chỉ cũng có lúc làm hỏng hết blog... rồi tiêc hùi hụi, tốt nhất là làm blog phụ rồi thử trước cho chắc ăn em ạ

      Xóa
  6. entry rất hữu ích nè, thank em. hehe

    Trả lờiXóa
    Trả lời
    1. dạ có gì đâu ạ, em chia sẻ chút gì em học hỏi được thôi! cảm ơn anh nhé!

      Xóa
  7. Sang thăm em. Chúc em luôn vui và thành công trong cuộc sống nhé.

    Trả lờiXóa
    Trả lời
    1. Eg cảm ơn anh trai thật nhiều nhé! Công việc anh trai chắc bận lắm ạ? lâu lắm rồi mới thấy anh ghé qua

      Xóa
  8. Anh thăm em đây -Chân Tình ơi -Chúc em luôn bình an nhé -

    Trả lờiXóa
    Trả lời
    1. Em cảm ơn anh, chúc anh ngủ ngon nhé!

      Xóa
  9. Em ơi! Mấy ngày hôm nay anh bị đau mắt nên không sang thăm em được.
    Hôm nay đã đỡ nhiều rồi nên anh sang thăm em nè – Chúc em chiều thứ 5 nhiều niềm vui và có một buổi tốt thật ngọt ngào

    Trả lờiXóa
    Trả lời
    1. Dạ không sao đâu ạ, đang có dịch đau mắt đỏ mà, anh nhớ ggsk ạ, em cảm ơn anh luôn ghé thăm, chúc anh ngủ ngon nha!

      Xóa

  10. Trao đổi link, nếu bạn đồng ý thì pm qua cho mình nhé: http://thegioiblogs.blogspot.com/2007/01/trao-doi-lien-ket-trong-cong-dong-blogger.html

    - Link blog: http://thegioiblogs.blogspot.com
    - Tên blog: Thế Giới Blog
    - Link Favicon: http://www.iconj.com/ico/2/q/2qvewewx5p.ico
    - Mô tả: Thế Giới Blog - Chia Sẻ Cùng Bạn

    Trả lờiXóa