Note Thông báo: Từ ngày 25/05/2021 hệ thống ngừng hoạt động, mọi vấn đề hay thắc mắc trên đây sẽ không được giải quyết. Hãy truy cập Code Pro để được hỗ trợ!

Chèn Nhãn Dán Facebook Vào Bài Viết Blog | Facebook Stickers GIF

Loading...

LỜI MỞ ĐẦU

Chào mừng tất cả các bạn đã đến với bài viết tiếp theo của mình! Hôm nay, lang thang trên Pinterest mình bắt gặp 2 bộ nhãn dán Facebook rất dễ thương, liền nảy ra ý tưởng đem nó về blog ?

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_ảnh" />. Tuy nhiên, khi bạn muốn chèn icon/nhãn dán vào bài viết (cho bài viết trở nên sinh động) thì việc làm này sẽ khiến bạn mất nhiều thời và hình ảnh cũng không đồng đều về kích thước. Do vậy, bài viết này sẽ giúp các bạn chèn biểu icon/nhãn dán thật dễ dàng và thuận tiện hơn rất nhiều =))
Dưới đây là tổng hợp 32 nhãn dán (2 bộ). Các bạn xem trước !



BỘ NHÃN DÁN THỨ NHẤT

16 Funny Tuzki Bunny Workaholic Gifs Emoji
Các bạn copy toàn bộ Css phía dưới rồi thêm vào trước thẻ </body> trong HTML
<!-- 16 Funny Tuzki Bunny Workaholic Gifs Emoji -->
<style type="text/css">
.anhduc_icon1{background:url(https://1.bp.blogspot.com/-5sF8_if87oM/XXNSBGy9EDI/AAAAAAAAEaY/KkJkHUmvJD4XSnVeBWIizrXKL702_9btACLcBGAs/s1600/00.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon2{background:url(https://1.bp.blogspot.com/-A5xAton8oi4/XXNSBE162bI/AAAAAAAAEac/Avh0qS5NwX8S6Bj9bYCecbK9e0cASmnrwCLcBGAs/s1600/01.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon3{background:url(https://1.bp.blogspot.com/-9EYNdDZ68zM/XXNSBS7ksLI/AAAAAAAAEag/HBofL6hbllUzyZ7xSqaZWtEMRqpvT7A7QCLcBGAs/s1600/02.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon4{background:url(https://1.bp.blogspot.com/-_WHto4gnhig/XXNSCGl7t2I/AAAAAAAAEak/zAkmAdV819MeiCl3qldxlstVNQ7UjthIgCLcBGAs/s1600/03.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon5{background:url(https://1.bp.blogspot.com/-2XGJ2q2dnlo/XXNSCc2sfLI/AAAAAAAAEao/wqkvjvPCTcAbp0ITnVX-1BlL1rIyXe5TACLcBGAs/s1600/04.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon6{background:url(https://1.bp.blogspot.com/-uglqjzkunVA/XXNSCsk75HI/AAAAAAAAEas/BOideNwSJ-A9HLEVuTZb6aKDIvOo37EKACLcBGAs/s1600/05.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon7{background:url(https://1.bp.blogspot.com/-3IllSqaG4zU/XXNSDHb_9dI/AAAAAAAAEaw/arDj5xWS0YsV640DC1Nm9oSNGUjkyMs3ACLcBGAs/s1600/06.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon8{background:url(https://1.bp.blogspot.com/-AD4FUeWu9PA/XXNSDbBNTZI/AAAAAAAAEa0/x79olH4MriUDjEeZlOk82ast-_vpg6gnwCLcBGAs/s1600/07.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon9{background:url(https://1.bp.blogspot.com/-k8DQvh-hNiY/XXNSDnrUfRI/AAAAAAAAEa4/hqdOQZvx1n4t8p5HiRVG0cenr-76SDStACLcBGAs/s1600/08.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon10{background:url(https://1.bp.blogspot.com/-vQoPaWlx9i8/XXNSDxS_GTI/AAAAAAAAEa8/DS_5by-vrukuEpnp3PlBFXiWWeT3Znn3QCLcBGAs/s1600/09.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon11{background:url(https://1.bp.blogspot.com/-uNQcnIttEEE/XXNSEHxSdhI/AAAAAAAAEbA/WxkAm9Dx_9IJBQaGfaGN9psNyyFhMvM-ACLcBGAs/s1600/10.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon12{background:url(https://1.bp.blogspot.com/-YjnZCmifxxk/XXNSEVt8-cI/AAAAAAAAEbE/NNof1jUq1CIg0HAydZEdyMK7GJpAFm0TgCLcBGAs/s1600/11.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon13{background:url(https://1.bp.blogspot.com/-4HNGsl4ZhnQ/XXNSEsrskbI/AAAAAAAAEbI/NQa3VrvSrZYDfIcwq15_FXd8EnS1owD7QCLcBGAs/s1600/12.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon14{background:url(https://1.bp.blogspot.com/-FnZZuADqx6o/XXNSEgDppFI/AAAAAAAAEbM/EDv5cqPn56YdhjSF-HI9WQehBmyRsl4pACLcBGAs/s1600/13.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon15{background:url(https://1.bp.blogspot.com/-0Cx64S2_V9A/XXNSFEAvJ6I/AAAAAAAAEbQ/eVP5yXHj0Ao7mDumzHuD_Gjqtk9OieXzQCLcBGAs/s1600/14.gif) no-repeat;display:inline-block;width:150px;height:150px}
.anhduc_icon16{background:url(https://1.bp.blogspot.com/---RSuHFoDd8/XXNSFaab6mI/AAAAAAAAEbU/K776TcQzxQwXyJCiN_YEEc1Yc_16CrBGQCLcBGAs/s1600/15.gif) no-repeat;display:inline-block;width:150px;height:150px}
</style>
<!-- End 16 Funny Tuzki Bunny Workaholic Gifs Emoji -->
Bây giờ khi viết bài, bạn muốn thêm nhãn dán nào thì chỉ cần chuyển bài viết sang chế độ HTML rồi thêm thẻ bên dưới ! (ở đây mình lấy ví dụ cả 16 nhãn dán, còn các bạn muốn dùng nhãn nào thì thêm nhãn đó)
<!-- Bắt đầu hiển thị -->
<div class="anhduc_icon1"></div>
<div class="anhduc_icon2"></div>
<div class="anhduc_icon3"></div>
<div class="anhduc_icon4"></div>
<div class="anhduc_icon5"></div>
<div class="anhduc_icon6"></div>
<div class="anhduc_icon7"></div>
<div class="anhduc_icon9"></div>
<div class="anhduc_icon10"></div>
<div class="anhduc_icon11"></div>
<div class="anhduc_icon12"></div>
<div class="anhduc_icon13"></div>
<div class="anhduc_icon14"></div>
<div class="anhduc_icon15"></div>
<div class="anhduc_icon16"></div>
<!-- Kết thúc hiển thị -->

BỘ NHÃN DÁN THỨ HAI

16 Crazy Happy Bunny Emoji Gif
Các bạn copy toàn bộ Css phía dưới rồi thêm vào trước thẻ </body> trong HTML
<!-- 16 Crazy Happy Bunny Emoji Gif -->
<style type="text/css">
.leanhduc_icon1{background:url(https://1.bp.blogspot.com/-9-Uw4VE5lU0/XXNV7xcWkZI/AAAAAAAAEb8/xBnO-8RYNH4DUV_DBtsZsyeO0jq_najnACLcBGAs/s1600/01.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon2{background:url(https://1.bp.blogspot.com/--Is4eU5h5M8/XXNV7_bILUI/AAAAAAAAEcA/ALbYFYj4-RsgWuQr4p-gj_mZIq3pIjnagCLcBGAs/s1600/02.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon3{background:url(https://1.bp.blogspot.com/-qy1aejJps5s/XXNV7xZnNdI/AAAAAAAAEb4/6LvBMVJHTckpKw3PQP6-32FO019OvmckgCLcBGAs/s1600/03.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon4{background:url(https://1.bp.blogspot.com/-ow9Cvr3AB0Q/XXNV8x8o_RI/AAAAAAAAEcE/ttzM-k9GRsQJwXOkB2rRHhGSmaJ8Kkw0QCLcBGAs/s1600/04.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon5{background:url(https://1.bp.blogspot.com/-SE67hS8MfRo/XXNV9J6m8OI/AAAAAAAAEcI/On-Q6O_38wAcEsYaxKE088U0qvFxb2stgCLcBGAs/s1600/05.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon6{background:url(https://1.bp.blogspot.com/-9-L5TyCLoEs/XXNV9YK-ndI/AAAAAAAAEcM/c1yJyGFSNygB9AnbfVfrsKAsNnYAGDZSgCLcBGAs/s1600/06.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon7{background:url(https://1.bp.blogspot.com/-qfiGhnt2GHM/XXNV9VUHGmI/AAAAAAAAEcQ/_-K4gEdW-Qc5jBLVaSA5lVgaLUtDZS74wCLcBGAs/s1600/07.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon8{background:url(https://1.bp.blogspot.com/-g5nfiIBd8t0/XXNV9hlp3KI/AAAAAAAAEcU/ksmdZ6E5fcohpVztHu5Mc5MkHu7EJHmhgCLcBGAs/s1600/08.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon9{background:url(https://1.bp.blogspot.com/-LYC5AWH2nRA/XXNV-A6oLlI/AAAAAAAAEcY/Mf72i3QdtqYCDdvv6iuD4gz7-IXcFZMvACLcBGAs/s1600/09.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon10{background:url(https://1.bp.blogspot.com/-jmWMFIJWie4/XXNV-Dfb-PI/AAAAAAAAEcc/j38T607U7IghXYwFON48byq0mwboa5ebQCLcBGAs/s1600/10.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon11{background:url(https://1.bp.blogspot.com/-FTs1McjP_QI/XXNV-fiRPGI/AAAAAAAAEcg/WJca-eslSygqMOx8VLyZwyE__KHK01EDwCLcBGAs/s1600/11.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon12{background:url(https://1.bp.blogspot.com/-6nQ_U6BztnA/XXNV-vyYGuI/AAAAAAAAEck/Lb4NplmndmoYt56v22Su87cZfvUbgjFDwCLcBGAs/s1600/12.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon13{background:url(https://1.bp.blogspot.com/-KAFfvv1DC98/XXNV_C8KOuI/AAAAAAAAEco/zOUtM0Gsbokxvog7q2rpt1QuuzgLDsSJQCLcBGAs/s1600/13.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon14{background:url(https://1.bp.blogspot.com/-fnTvPMDdxqk/XXNV_L3OWaI/AAAAAAAAEcs/37zvUG0N43cxNVmevf51m6T4jYx4wB42QCLcBGAs/s1600/14.gif) no-repeat;display:inline-block;width:240px;height:150px}
.leanhduc_icon15{background:url(https://1.bp.blogspot.com/-slwhkIm6dTA/XXNV_QkTxpI/AAAAAAAAEcw/T1lMiXKcQE4rVTl6s8lc3Rq6c1ZGef6gACLcBGAs/s1600/15.gif) no-repeat;display:inline-block;width:240px;height:240px}
.leanhduc_icon16{background:url(https://1.bp.blogspot.com/-1Mva1K-VFRE/XXNV_raWIkI/AAAAAAAAEc0/SPmK9gGadFsr-4s_prxcLj2l3wAqw-ewACLcBGAs/s1600/16.gif) no-repeat;display:inline-block;width:240px;height:240px}
</style>
<!-- End 16 Crazy Happy Bunny Emoji Gif -->
Bây giờ khi viết bài, bạn muốn thêm nhãn dán nào thì chỉ cần chuyển bài viết sang chế độ HTML rồi thêm thẻ bên dưới ! (ở đây mình lấy ví dụ cả 16 nhãn dán, còn các bạn muốn dùng nhãn nào thì thêm nhãn đó)
<!-- Bắt đầu hiển thị -->
<div class="leanhduc_icon1"></div>
<div class="leanhduc_icon2"></div>
<div class="leanhduc_icon3"></div>
<div class="leanhduc_icon4"></div>
<div class="leanhduc_icon5"></div>
<div class="leanhduc_icon6"></div>
<div class="leanhduc_icon7"></div>
<div class="leanhduc_icon8"></div>
<div class="leanhduc_icon9"></div>
<div class="leanhduc_icon10"></div>
<div class="leanhduc_icon11"></div>
<div class="leanhduc_icon12"></div>
<div class="leanhduc_icon13"></div>
<div class="leanhduc_icon14"></div>
<div class="leanhduc_icon15"></div>
<div class="leanhduc_icon16"></div>
<!-- Kết thúc hiển thị -->
Lưu ý: Các bạn có thể sử dụng đồng thời cả 2 bộ nhãn dán này =))

LỜI KẾT

Trên đây là toàn bộ code & hướng dẫn sử dụng bộ nhãn dán facebook cho blogspot. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!

Copyright © Lê Anh Đức