Tạo widget bạn bè giống facebook tuyệt đẹp - Thích Chia Sẻ Blog
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://3.bp.blogspot.com/-uM9FsgRwsMY/WhLo2KpANnI/AAAAAAAAByA/5NYanUbCmU455oQS97fFONmEoT8WoReCQCLcBGAs/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://1.bp.blogspot.com/-gB9OHpf_Km8/WhPP1TWULJI/AAAAAAAAByg/LH4EViTAqRIFnf5UocVXUsL-y3s_kPJxQCLcBGAs/s1600/ni%25E1%25BB%2587m%2Bstyle%2Blogo%2B%25C4%2591%25C3%25A3%2Bn%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!
avatar

Nhớ áp dụng cho blog của mình nhé Bảo

delete 09:04 25 tháng 5, 2018
avatar

Cái rate star hình như cho đẹp chứ không có tác dụng gì cả.

delete 10:26 25 tháng 5, 2018
avatar

Hiện tại nó chỉ để trang trí thôi anh

delete 02:59 1 tháng 6, 2018

- Không spam link bừa bãi.

- Không nói tục, chửi bậy.

- Không bình luận mang tính chính trị.

- Hãy là một độc giả có ý thức!

Nội quy chung Phú Cường Blogger

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Phú Cường Blogger - Life Is Share
- Thành lập: 22/09/2017
- Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Team Solomid...
- Tác giả blog: Nguyễn Phú Cường hiện đang là sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!