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

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/AVvXsEh9Qo05E_q4JSaIwYZxSin5IH3aXkuGnxBCp4bAbThqjOFFMpOGkMJOcyLh8paTEffCuOtKqZ3u_cpCnwzPpnuNGQcWEBqofyZdjSa_NJvZL5hp_sNmh-n67Rp91qDQr1zax4FYdTpS_zI/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/AVvXsEgM8glSrwQC908uVqEBdeM6fTXjXu5zrVPrfkAMRnPWrZlufk7T_Y6_Mwxy8zagyTnwbN8sg2tqPhMV3jnY0xmNc9OKThgsYj9tuNrQqn1Oh8AJAPEDmGLK4a1Pk6euhN2M89WbUyQJCvM/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!