Hướng dẫn chèn biểu tương cảm xúc (emoticons) vào Blogspot

Thấy chị huynhtran giới thiệu ,rinh bài này về trước ,khi rảnh Ròm sẽ thử làm sau .
 ____________________________________

Hướng dẫn chèn biểu tương cảm xúc (emoticons) vào Blogspot

Nội dung của thủ thuật này hiệu chỉnh bên trong Template nên trước khi làm các bạn nên backup lại Template của mình.  Mẫu Demo tại đây

1- Đăng nhập (login) vào Blog



2- Vào Mẫu (Template)



3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)



4- Chèn code sau trước thẻ </body>

Vì đoạn mã này dài, đưa vào đây nhìn rối mắt nên mình chép thành một file TXT. Các bạn click vào đây để tải về:

http://sokyha.googlecode.com/files/codeemoticon.txt 

Sau khi tải về máy các bạn chép copy và pass toàn bộ đoạn mã trong file này vào vào trước thẻ </body> như trong hình:

5 - Tìm đoạn mã sau đây:


<data:blogTeamBlogMessage/>

Đoạn mã này bắt nằm trong hai thẻ <b:includable id='threaded-comment-form' var='post'> và </b:includable>.

Để tìm được đoạn mã này bạn có thể nhờ duyệt tìm với từ khóa là: <data:blogTeamBlogMessage/> (thường bạn sẽ tìm được nó ở 4 vị trí khác nhau) bạn cũng có thể nhờ trình duyệt tìm giúp với từ khóa <b:includable id='threaded-comment-form' var='post'> (chỉ có duy nhất 1 kết quả)


<b:includable id='threaded-comment-form' var='post'>

  <div class='comment-form'>

    <a name='comment-form'/>

    <b:if cond='data:mobile'>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

    <b:else/>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

    </b:if>

      <data:post.friendConnectJs/>

      <data:post.cmtfpIframe/>

      <script type='text/javascript'>

      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');

      </script>

   </div>

</b:includable>



Sau khi tìm được đoạn mã phía trên lưu ý hai thẻ tô màu vàng trong đoạn mã này; copy đoạn mã sau vào dưới thẻ thứ 2 trong đoạn trê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'/>:)

<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>

<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()">→</a></span>

</div>


6 - Thêm một class emoticons .

Tương tự như ở trên các bạn tìm thẻ thẻ: ]]></b:skin> rồi copy đoạn mã phía sau vào trước nó!


.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;}


Vậy là xong rồi!.

Trình bày tuy dài dòng nhưng ngoài trừ các bước đăng nhập thì chỉ có 3 bước chính thôi. Giờ lưu mẫu của bạn lại và xem kết quả nào. Với thủ thuật này không chỉ có chèn emoticon vào thôi đâu bạn còn có thể thêm hình, phim vào nữa đó.

(Namka)