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

0

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.

: 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
Leave A Reply

Your email address will not be published.