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!

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/AVvXsEiMgjUlRTkQVX2igeEzi1PDlB3yWT6FbAxp-IIzbjOIEiGdlRSYWL9WYr0_StdqD2RXiJSxx14_vLrDJ01gl9dCjtnwdM2jgP12g8l3oshZIL0z8687YOKDHgCIkY3Zn3XsP53HwFu6vcs/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/AVvXsEj7u8yi0arVVDjXkd2goeByi2nh-jfZVastaSIAFQ3g1t7WI7YCUPQHd5wjC6maPBZC-Wuh8JIMmZ7N3ocUwnGh1vS1qPH6gfpg1dHy0tnnXLcg81ribUuG7WfVkGyoyLGHD2BCy4HLLsM/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.

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

Code by: TKN Blog