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>
)
Ở đây mình dùng Tuzki Rabbit Emoticons, bạn nào không thích có thể thay link ảnh khác