Nam Ròm




Hình xưa VNCH
Tin tức đó đây
Sách xưa thời VNCH
Hình vui Ảnh đẹp
Thơ vui, chuyện tiếu mẹo vặt linh tinh ....

Thứ Năm, 24 tháng 1, 2013

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)

4 nhận xét:

  1. Chị già làm rồi, dễ lắm. Trong code hướng dẫn chỉ có 15 hình, sau đó mình đưa thêm hình mình vào code ấy.

    Trả lờiXóa
  2. Nhỏ vào Thiết kế, vào Customize, rồi click vào Page, tăng size của font lên từ 13px lên 16px cho lớn chút coi Ròm ui! người đã Ròm, chữ lại nhỏ xíu, chán.!!

    Trả lờiXóa
  3. Ròm làm thử trước cho bà con chiêm ngưỡng thành quả cái đã chứ lị ! :))

    Trả lờiXóa
  4. Hiểu được, chết liền.

    Trả lờiXóa

Bấm vào dưới avata "Tham gia trang web này " để có thể biết bài mới của Ròm