Blog DX

Chèn biểu tượng mặt cười (Emoticons) vào bài viết cho Blogger (Blogspot)

13 tháng 6, 2015
Như các bạn đã biết, để thêm một hình ảnh bất kì vào bài viết chúng ta sẽ dùng thẻ <img src="link_anh" />. Tuy nhiên, khi bạn muốn chèn biểu tượng mặt cười vào bài viết thì việc làm trên sẽ khiến bạn tốn nhiều thời và hình ảnh cũng không đồng bộ. Do vậy, bài viết này sẽ giúp các bạn chèn biểu tượng mặt cười dễ dàng, thuận tiện hơn rất nhiều, khiến việc chèn biểu tượng mặt cười trở lên thích thú với bạn qua từng bài viết.



Cách 1: Sử dụng CSS

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn css này vào trước thẻ đóng ]]></b:skin> rồi Lưu Mẫu lại
.icon1{background:url(https://lh5.googleusercontent.com/-87_myPLEwtM/VXuYAf5n1LI/AAAAAAAAAgs/bUmwp3cgsp4/s48-no/Tuzki1-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon2{background:url(https://lh5.googleusercontent.com/-TfQ06Oj3ndE/VXuYBF-P-GI/AAAAAAAAAgk/I-q9ZDuBDpQ/s48-no/Tuzki2-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon3{background:url(https://lh5.googleusercontent.com/-sH1B4sFTzaQ/VXuYBpKa8iI/AAAAAAAAAg0/jpC80N9Ajn8/s48-no/Tuzki3-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon4{background:url(https://lh5.googleusercontent.com/-S0_9_sC5NJA/VXuYCsTFC2I/AAAAAAAAAhA/n-YHgCradGI/s48-no/Tuzki4-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon5{background:url(https://lh5.googleusercontent.com/-Pj0wrvvlJdo/VXuYDg8vJsI/AAAAAAAAAhM/KL6K8hmlGxI/s48-no/Tuzki5-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon6{background:url(https://lh5.googleusercontent.com/-M5nhTz2bPrs/VXuYEJZi12I/AAAAAAAAAhY/jwtHoS52DeA/s48-no/Tuzki6-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon7{background:url(https://lh5.googleusercontent.com/-EE9LIG5aYag/VXuYE6fEfzI/AAAAAAAAAhk/jaToX3cOLEw/s48-no/Tuzki7-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon8{background:url(https://lh5.googleusercontent.com/-BouWRPBFbg4/VXuYFu0oY-I/AAAAAAAAAhw/24jjSASchZ0/s48-no/Tuzki8-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon9{background:url(https://lh5.googleusercontent.com/-KN67aavbhCw/VXuYGKitbMI/AAAAAAAAAh8/cfq6YrliEIY/s48-no/Tuzki9-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon10{background:url(https://lh5.googleusercontent.com/-2poADFhS8HA/VXuYG4_D0zI/AAAAAAAAAiM/kbQaEw93AdA/s48-no/Tuzki10-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon11{background:url(https://lh5.googleusercontent.com/-52TgeW-F9T0/VXuYHRpiiYI/AAAAAAAAAiU/5bfaM1GSGz4/s48-no/Tuzki11-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon12{background:url(https://lh3.googleusercontent.com/-tbfXmHy0mvY/VXuYH6rzDMI/AAAAAAAAAig/81_5avjQLaY/s48-no/Tuzki12-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon13{background:url(https://lh3.googleusercontent.com/-KwK-UwgxJ7A/VXuYImD8wvI/AAAAAAAAAis/x4ith_iijhw/s48-no/Tuzki13-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon14{background:url(https://lh5.googleusercontent.com/-C_y7hZhVs9U/VXuYJgkPdmI/AAAAAAAAAi4/v-YcC_Dqzj8/s48-no/Tuzki14-dxoan.com.gif) no-repeat;display:inline-block;width:48px;height:48px}
.icon15{background:url(https://lh4.googleusercontent.com/-yBlhIVOMJoM/VXuYKGDvnHI/AAAAAAAAAjM/1W_clAGiFjw/s50-no/Tuzki15-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon16{background:url(https://lh6.googleusercontent.com/-PpalBHoGcP4/VXuYK2u7QdI/AAAAAAAAAjQ/hE35IloVMqE/s50-no/Tuzki16-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon17{background:url(https://lh6.googleusercontent.com/-py2OBaYgXAs/VXuYLZqWWaI/AAAAAAAAAjc/_RUzoMne0TE/s50-no/Tuzki17-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon18{background:url(https://lh4.googleusercontent.com/-XkRV2ClOfRs/VXuYMHIGNWI/AAAAAAAAAjo/YdzCW_9ftys/s50-no/Tuzki18-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon19{background:url(https://lh6.googleusercontent.com/-iNjtb-Su1Lw/VXuYNLiOn8I/AAAAAAAAAj8/su066-klhYs/s50-no/Tuzki19-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon20{background:url(https://lh6.googleusercontent.com/-z1sJpNJxPgE/VXuYN2hgCUI/AAAAAAAAAkA/S90eeHYozjw/s50-no/Tuzki20-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon21{background:url(https://lh6.googleusercontent.com/-vpo3m-Dglvk/VXuYOej_2QI/AAAAAAAAAkM/ERGsXoGKmEk/s50-no/Tuzki21-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon22{background:url(https://lh6.googleusercontent.com/-4ls71l-iISw/VXuYPa1EbJI/AAAAAAAAAkY/0oWgxH8FVOI/s50-no/Tuzki22-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon23{background:url(https://lh4.googleusercontent.com/-MlZXEW3GZbc/VXuYQOS6AOI/AAAAAAAAAkk/-Y7ftWTo4oU/s50-no/Tuzki23-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon24{background:url(https://lh4.googleusercontent.com/-Oe6Ra-DR6oM/VXuYQ9CcKfI/AAAAAAAAAkw/4VzPBD0W3gY/s50-no/Tuzki24-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon25{background:url(https://lh6.googleusercontent.com/-iRC2laLBWXI/VXuYRpWvJlI/AAAAAAAAAk8/8HstDesYPIs/s50-no/Tuzki25-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon26{background:url(https://lh6.googleusercontent.com/-vBvdjYHIYac/VXuYSYMlb8I/AAAAAAAAAlI/Sf9hSKtTCko/s50-no/Tuzki26-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon27{background:url(https://lh4.googleusercontent.com/-5WXXrk6tOIw/VXuYTBSDdhI/AAAAAAAAAlc/t5hesS9kIHc/s50-no/Tuzki27-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon28{background:url(https://lh4.googleusercontent.com/-UWLfyt7gCJk/VXuYTlDxNSI/AAAAAAAAAlk/klFuAQpDnH8/s50-no/Tuzki28-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon29{background:url(https://lh4.googleusercontent.com/-6ff3kA8ONpM/VXuYUb53-6I/AAAAAAAAAls/qicf8yZILrc/s50-no/Tuzki29-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon30{background:url(https://lh4.googleusercontent.com/-6qKRt3-qA_c/VXuYVJ766pI/AAAAAAAAAl4/dNM2HbGYoFs/s50-no/Tuzki30-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon31{background:url(https://lh4.googleusercontent.com/-910gxYUIP2A/VXuYV2EWk2I/AAAAAAAAAmE/8r16TgMGxnE/s50-no/Tuzki31-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon32{background:url(https://lh4.googleusercontent.com/-x2I7NhUggtQ/VXuYWVQs3gI/AAAAAAAAAmQ/KDB47VWS77k/s50-no/Tuzki32-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon33{background:url(https://lh6.googleusercontent.com/-TmsGgzkBD0I/VXuYW4MaU5I/AAAAAAAAAmc/RP-jn2mwzeQ/s50-no/Tuzki33-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon34{background:url(https://lh4.googleusercontent.com/-eGVbVPwVNOc/VXuYX_NfqWI/AAAAAAAAAmo/BNNDnwYBiVU/s50-no/Tuzki34-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon35{background:url(https://lh4.googleusercontent.com/-BqTU3IDzOPs/VXuYYq8OCSI/AAAAAAAAAm0/0tj-ENXqHb8/s50-no/Tuzki35-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon36{background:url(https://lh4.googleusercontent.com/-quIR3uqBya8/VXuYZgtLbSI/AAAAAAAAAnA/oLmyOCUGnP0/s50-no/Tuzki36-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon37{background:url(https://lh6.googleusercontent.com/-kMrc08yHpHQ/VXuYaUk78qI/AAAAAAAAAnM/u_JfZZNzW-c/s50-no/Tuzki37-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon38{background:url(https://lh6.googleusercontent.com/-Mda5pjVpNV8/VXuYa5RN8LI/AAAAAAAAAnY/vsUMAv9JBn8/s50-no/Tuzki38-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon39{background:url(https://lh6.googleusercontent.com/-OY9H6cClCbQ/VXuYba8i0PI/AAAAAAAAAnk/a2ttjuo8ysY/s50-no/Tuzki39-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}
.icon40{background:url(https://lh6.googleusercontent.com/-YaQkL-Va1mw/VXuYcGbBjtI/AAAAAAAAAnw/pNzbaBacf0Q/s50-no/Tuzki40-dxoan.com.gif) no-repeat;display:inline-block;width:50px;height:50px}

Bây giờ khi viết bài, bạn muốn thêm biểu tượng mặt cười nào thì chỉ cần chuyển bài viết sang chế độ HTML rồi thêm thẻ <span class="icon1"></span> (hoặc <div class="icon1"></div>)
Thay đổi icon1 thành icon2, icon3,... để được biểu tượng mặt cười bạn muốn
Ở đây mình dùng Tuzki Rabbit Emoticons, bạn nào không thích có thể thay link ảnh khác

Cách 2: Sử dụng JavaScript

Cách này làm gần tương tự với cách chèn Emoticons vào phần bình luận

Bước 1: Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn code này vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("emoticons-post");
theText = bodyText.innerHTML;
theText = theText.replace(/=\)\)/gi, "<img src='http://4.bp.blogspot.com/_U0QaeycS3vw/TTXulAkWoKI/AAAAAAAAAFQ/dBLny2PpNZ8/sexy_girl.gif'/>");
theText = theText.replace(/:\)\)/gi, "<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXudYbX_ZI/AAAAAAAAAE0/b5kV-RL7vwg/haha.gif'/>");
theText = theText.replace(/X-\(/gi, "<img src='https://lh3.googleusercontent.com/-fBRlYmjPLOg/T5KRehNSRgI/AAAAAAAADCo/FxXOJp_ptpA/angry.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXupiotYpI/AAAAAAAAAFg/9CubAStMFH8/too_sad.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXuWVpzsQI/AAAAAAAAAEc/qFPgHPVhHkU/beat_brick.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXuWs6VdyI/AAAAAAAAAEg/z8NtmON52NY/beauty.gif'/>");
theText = theText.replace(/b-\)/gi, "<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuW1baGrI/AAAAAAAAAEo/VbqO1JJKWC4/boss.gif'/>");
theText = theText.replace(/:D/gi, "<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuWpEsR_I/AAAAAAAAAEk/Sk9k2jnuoBg/big_smile.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuddaxMVI/AAAAAAAAAEw/_aCzrN-ygWY/doubt.gif'/>");
theText = theText.replace(/:-&gt;/gi, "<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXudk-h5SI/AAAAAAAAAE4/i_BBD1qO0zs/look_down.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXueYItRjI/AAAAAAAAAFA/YwowCynCRzc/oh.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://4.bp.blogspot.com/_U0QaeycS3vw/TTXulENdJ0I/AAAAAAAAAFU/5f5vHw6N44c/smile.gif'/>");
theText = theText.replace(/\[-\(/gi, "<img src='http://4.bp.blogspot.com/_U0QaeycS3vw/TTXueJ3uwII/AAAAAAAAAE8/_pyiQFH9hi0/nosebleed.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXukiq6NWI/AAAAAAAAAFE/cW28bc76C_k/ops.gif'/>");
theText = theText.replace(/:-s/gi, "<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXuk5-M_AI/AAAAAAAAAFI/BUtKFeXapyk/pudency.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXukyT1l7I/AAAAAAAAAFM/DaidYAxkiNE/sad.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXupTbDhqI/AAAAAAAAAFY/t2FEzBP2o_8/still_dreaming.gif'/>");
theText = theText.replace(/:\*/gi, "<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXupgwmyLI/AAAAAAAAAFc/jOuRJF9qUbU/sweet_kiss.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Bước 2: Sửa thẻ <data:post.body/> thành:
<div id='emoticons-post'>
<data:post.body/>
</div>

<data:post.body/> là thẻ hiển thị nội dung bài viết, thẻ này nằm trong <b:includable id='post' var='post'>
Nếu bạn tìm thấy 2 hay 3 cái thẻ <data:post.body/> và không biết đâu là thẻ hiển thị nội dung bài viết thì bạn cứ thay lần lượt từng thẻ một đến khi nào thành công thì thôi ^^

Xong xuôi thì Lưu Mẫu lại.

Giờ khi bạn viết bài, nếu bạn viết những kí tự như :)) :D thì nó sẽ chuyển thành biểu tượng mặt cười tương ứng.
Bạn có thể thay thế kí tự và ảnh icon ở Bước 1 thành những gì bạn muốn (Đọc qua phần mở rộng của bài viết này để biết cách thay nhé: Chèn biểu tượng mặt cười (emoticons) cho phần nhận xét của blogspot)

Nhanh tay thêm biểu tượng mặt cười vào bài viết nhé các bạn. Ngày mới vui vẻ

10 nhận xét:

  1. Công nhận mới thấy lần đầu tiên.
    Cho hỏi xí:
    Cái Ads của cậu là của blog này à?
    Nâng cấp tên miền lại phải nâng cấp ads lên content à ?nếu như tôi thì cứ để miền blogspot.
    Nhưng công nhận tên miền cấp cao dễ seo hơn.

    Trả lờiXóa
    Trả lời
    1. ukm, ads của cháu lúc đầu là hosted giờ đổi tên miền sang .com nên nó không hiện nữa, đang phải chờ nâng cấp lên content nhưng mà nghe trừng khó quá :(

      Xóa
    2. Tôi cũng có cái hosted từ yt(hosted của yt thì quá đơn giản chỉ cần có vài cái video post rồi quên sau khi có tổng cộng 1k view là dk dc)
      Nhưng nó ko cho đặt ads trên blog bắt nâng cấp tên miền,tôi vừa nc dc 1 tháng chờ dk nhưng thấy khó quá chả hy vọng.
      Blog cũ của cậu có khoảng gần 2k view/ngày có ăn thua gì ko.
      Tôi thì thực lòng ko nhắm tới xiền mà thấy đeo ads nhìn khoai khoái
      ads quyền quá rộng nên nó xét ghê lắm.

      Xóa
    3. Do là Việt Nam nhiều người cheat ads nên nó mới khó đăng kí và nâng cấp đến vậy. Blog của cháu cũng chỉ có 300-400 view/ngày thôi không được nhiều như vậy đâu nên cũng khó nâng cấp.

      Xóa
    4. Blog cậu mới nc tên miền nên chưa ổn định đấy chứ blog cũ có thứ hạng alexa khoảng dưới 600k và 1 ngày có khoảng 700 lượt người ghé thăm và có khoảng gần 2k lượt xem trang.
      Ads cũ là cậu dk từ blog nên sau khi nc tên miền dk lại chắc là sẽ dc thôi vì blog của cậu dã dc thì nc nó vẫn là blog cũ chỉ đổi tên miền.nhưng ko biết 3 tháng hay 6 tháng thì mới dc nc

      Xóa
    5. Thật hả chú @Dauto Crazy ?
      Không cần nâng cấp lên content vẫn hiện được GA ak :O

      Xóa
    6. Dùng tên miền .com chắc là phải dk lại(nc) còn theo tôi nghĩ nếu quay lại tên miền blogspot .com chắc nó lại hiện Ads nếu muốn thử là biết.
      Tôi ko xui đâu nhé
      Thử thì cũng dễ thôi vào cài đặt tắt chuyển hướng tới .com
      còn muốn chuyển hướng thì lại check lại :D

      Xóa
    7. ukm, để blogspot.com thì nó hiện. chắc phải đăng kí mới quá :3

      Xóa