Tạo widget bạn bè giống facebook tuyệt đẹp

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

Xem toàn trang

Nếu muốn xem bài viết một kích thước lớn hãy click xem toàn trang nhé!

Xin chào tất cả các bạn, hôm nay mình xin chia sẻ cách tạo Widget bạn bè giống facebook đến 99% tuyệt đẹp!

Code này được thiết kế bởi anh Khanh Blogger và được mình đưa về viết bài cho các bạn đây.

BẮT ĐẦU NÀO:

Bước 1: các bạn chèn đoạn CSS này trước thẻ ]]></b:skin :

.fr-tkn {border: 0px; font-family: inherit; margin: 0px; padding: 0px;} .link-fr-tkn {color: #365899; cursor: pointer; display: block; float: left; font-family: inherit; margin-right: 8px; text-decoration: none;} .img-fr-tkn {border-radius: 50%; border: 0px; display: block; height: 50px; overflow: hidden; width: 50px;} .fr-tkn-abf {font-family: inherit; overflow: hidden;} .fr-tkn-abt {font-family: inherit; line-height: inherit;} .fr-tkn-frt {font-family: inherit; font-weight: 500; line-height: inherit; max-width: 162px; word-wrap: break-word;} .link2-fr-tkn {color: #365899; cursor: pointer; font-family: inherit; text-decoration: none;} .fr-tkn-adsstf {font-family: inherit; margin-top: 2px;} .fr-tkn-button-addfr {-webkit-font-smoothing: antialiased; background-color: #f2f3f5; border-radius: 2px; border: 1px solid rgb(206, 208, 212); box-sizing: content-box; color: #4b4f56; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: bold; justify-content: center; letter-spacing: inherit; line-height: 22px; margin: 0px; max-width: 177px; overflow: hidden; padding: 0px 8px; position: relative; text-overflow: ellipsis; transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1), box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1), transform 200ms cubic-bezier(0.08, 0.52, 0.52, 1); vertical-align: middle; white-space: nowrap; margin-top: -2px} .fr-tkn-logo-addfr {background-image: url(https://www.facebook.com/rsrc.php/v3/yZ/r/O6FcXnFs8nG.png); background-position: 0px -298px; background-repeat: no-repeat; background-size: auto; bottom: 1px; display: inline-block; height: 12px; margin-right: 4px; position: relative; vertical-align: middle; width: 12px;} .sddd {color: #90949c; font-family: inherit;} .fr-tkn-lua {color: #90949c!important; cursor: pointer; font-family: inherit; text-decoration: none!important;} .socialContext {margin-top: -2px} .del-fr-tkn {padding: 7px}

Bước 2: Chèn code này vào nơi bạn muốn nó hiển thị:

<div class="fr-tkn"> <a class="link-fr-tkn" aria-hidden="true" href="https://phucuongblogger.blogspot.com/" target="_blank"><img class="img-fr-tkn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArjIf2AJdy3HyCGsduK6d6HtDIYXuBb3arTzxnkUXCOwTnoWBDgEQjiyF9D7RsQyx-sj8If77N-TIzCrZVLEZEjQTs-HoyiPMrTjWtuy9CUqKoucZWY6gBtsDTovG92mzl3F_wDRLIIA/s1600/optimized-af6s.png" /></a> <div class="fr-tkn-abf"> <div class="fr-tkn-abt"> <div class="fr-tkn-frt"> <a class="link2-fr-tkn" href="https://phucuongblogger.blogspot.com/" target="_blank"><div style="display: inline; font-family: inherit;"> <span class="nameText" style="display: inline-block; font-family: inherit;">Phú Cường Blogger</span></div> </a></div> <div class="socialContext" style="font-family: inherit;"> <div style="font-family: inherit;"> <span class="sddd"><a class="fr-tkn-lua">1 bạn chung</a></span></div> </div> <div class="fr-tkn-adsstf"> <a class="link2-fr-tkn" href="https://phucuongblogger.blogspot.com/lienket" target="_blank"> <button class="fr-tkn-button-addfr" type="submit" value="1"> <i class="fr-tkn-logo-addfr"></i>Thêm bạn bè</button></a></div> </div> </div> </div> <div class="del-fr-tkn"></div> <div class="fr-tkn"> <a class="link-fr-tkn" aria-hidden="true" href="https://www.niemstyle.com/" target="_blank"><img class="img-fr-tkn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuxtwopC05ybJvx3sY8lVOujF_51ex-30qPJubI339ZcSfIW8LWTf5DBHhFAlKkfyM0HklT1QSzby_HbbuxmW6r5CPjk8c-gufULbiiiIMNGwlpFWtBx0jVsKSn5CeXgMPJUbXtzRgi8/s1600/ni%25E1%25BB%2587m+style+logo+%25C4%2591%25C3%25A3+n%25C3%25A9n.png" /></a> <div class="fr-tkn-abf"> <div class="fr-tkn-abt"> <div class="fr-tkn-frt"> <a class="link2-fr-tkn" href="https://www.niemstyle.com/" target="_blank"><div style="display: inline; font-family: inherit;"> <span class="nameText" style="display: inline-block; font-family: inherit;">Niệm Style Blog</span></div> </a></div> <div class="socialContext" style="font-family: inherit;"> <div style="font-family: inherit;"> <span class="sddd"><a class="fr-tkn-lua">1 bạn chung</a></span></div> </div> <div class="fr-tkn-adsstf"> <a class="link2-fr-tkn" href="https://www.niemstyle.com/p/contact.html" target="_blank"> <button class="fr-tkn-button-addfr" type="submit" value="1"> <i class="fr-tkn-logo-addfr"></i>Thêm bạn bè</button></a></div> </div> </div> </div> <div class="del-fr-tkn"></div> <div class="fr-tkn"> <a class="link-fr-tkn" aria-hidden="true" href="http://www.linkthuthuat.com/" target="_blank"><img class="img-fr-tkn" src="https://uphinhnhanh.com/images/2017/12/14/TCS.jpg" /></a> <div class="fr-tkn-abf"> <div class="fr-tkn-abt"> <div class="fr-tkn-frt"> <a class="link2-fr-tkn" href="http://www.linkthuthuat.com/" target="_blank"><div style="display: inline; font-family: inherit;"> <span class="nameText" style="display: inline-block; font-family: inherit;">Star Sơn IT</span></div> </a></div> <div class="socialContext" style="font-family: inherit;"> <div style="font-family: inherit;"> <span class="sddd"><a class="fr-tkn-lua">99 bạn chung</a></span></div> </div> <div class="fr-tkn-adsstf"> <a class="link2-fr-tkn" href="http://www.linkthuthuat.com/p/contact.html" target="_blank"> <button class="fr-tkn-button-addfr" type="submit" value="1"> <i class="fr-tkn-logo-addfr"></i>Thêm bạn bè</button></a></div></div></div></div></div> </div> 

Bước 3: Lưu template lại.

LỜI KẾT:

Vậy là chỉ với vài dòng code và CSS, các bạn đã tạo được cho mình một widget tuyệt đẹp cho blog của các bạn phải không nào. Nhớ bình luận nhiệt tình và ủng hộ để mình viết thêm nhiều thủ thuật hay hơn nữa nhé.

Chúc các bạn thành công!

Chia sẻ lên Facebook

Chia sẻ lên Zalo

Lưu ý:
Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

Trịnh Công Sơn

“Đừng so sánh mình với bất cứ ai trong thế giới này. Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.”

Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin