Tổng Hợp | Code Bạn Bè Liên Kết Blogspot Giống Facebook Cực Đẹp

<style>
.subs{margin-top:10px;font-size:14px;color:#4b4f56}
.buttondk{background:#f6f7f9;border:1px solid #ced0d4;float:right;height:30px;width:auto;margin-right: 10px;color:#4b4f56!important;padding:5px;font-weight:500;border-radius:2px;margin-top:-5px}
#lienketbanbe{overflow:auto;padding:0;margin:0;list-style:none}
.buttondk:hover{background:#3a5795!important;color:#fff!important;text-decoration:none!important}
#lienketbanbe li{padding:0;line-height:normal;display:block;float:left;text-align:left;width:31.5%;margin:0 5px 5px 0;}
#lienketbanbe a{display: block; font: 400 14px Roboto!important; color: #fff; width: 100%; height: 90px; position: relative;}
#lienketbanbe a i{color:#0174DF;font-size:10px}
#lienketbanbe a span{background: linear-gradient(transparent, #333); display: block; text-align: center; position: absolute; bottom: 0; left: 0; font-size: 12px; padding: 5px; box-sizing: border-box;width:100%}
#lienketbanbe a:hover span {background:rgba(0,0,0,.35)}
</style>
<div id="lienketbanbe">
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://3.bp.blogspot.com/-EmsOeX3B4i8/WgsZMoVT6kI/AAAAAAAAA3Y/MuOdm6ssm3w_dmLI61LDfKtvDcGKOlX3gCLcBGAs/s1600/avatar-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
<li><a href="https://www.veospot.com/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="VeoSpot | Web Design"><span>VeoSpot | Web Design</span></a></li>
</div>

- Code liên kết bạn bè dạng danh sách.

Code liên kết bạn bè dạng danh sách không ảnh

Đây là dạng code danh sahs không kèm theo hình ảnh nhừng có vẻ gọn gàng sạch sẽ và dễ nhìn.

<style>
#HTML3 .widget-content{padding:0!important}
.lien-ket-blog{margin:0;padding:0}
.lien-ket-blog ul{padding:0;max-height:155px;overflow:overlay}
.lien-ket-blog li{margin:0!important;margin-bottom:0!important;border:1px solid #f4f4f4;width:49%;padding:0;line-height:normal;float:left;text-align:left;    overflow: hidden;padding-bottom:0!important}
.lien-ket-blog li:nth-child(2n+1){border-width:1px 1px 0 0px}
.lien-ket-blog li:nth-child(2n+2){border-width:1px 0px 0 0px}
.lien-ket-blog li:nth-child(1),.lien-ket-blog li:nth-child(2){border-top:0px}
.lien-ket-blog li:nth-child(20){border-width:1px 0px 0px 0px}
.lien-ket-blog li:last-child{border-width:1px 0px 1px 0px}
.lien-ket-blog a{width:auto;text-overflow:ellipsis;overflow:hidden;display:block;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;padding:8.7px;font-size:14.5px;color:#222}</style>
<div class="lien-ket-blog font-wp">
<ul>
<li><a href="https://www.veowix.com/" target="_blank" title="Cập nhật mới nhất các bài viết chia sẻ thủ thuật facebook, thủ thuật blogger, thủ thuật windows, tâm sự,... ">veowix</a></li>
<li><a href="https://veostudio.blogspot.com" target="_blank" title="veostudio ">Vèo Studio</a></li>
<li><a href="https://veotemplate.blogspot.com" target="_blank" title="veotemplate ">veotemplate</a></li>
<li><a href="https://teamveo.blogspot.com" target="_blank" title="Teamveo ">Teamveo</a></li>
<li><a href="https://www.jsblogger.com/2018/12/template-jsblogger-v2-material.html#comments" target="_blank" title="Blog Thủ Thuật ">Đặt liên kết</a></li>
<li><a href="https://www.jsblogger.com/2018/12/template-jsblogger-v2-material.html#comments" target="_blank" title="Blog Thủ Thuật ">Đặt liên kết</a></li>
<li><a href="https://www.jsblogger.com/2018/12/template-jsblogger-v2-material.html#comments" target="_blank" title="Blog Thủ Thuật ">Đặt liên kết</a></li>
<li><a href="https://www.jsblogger.com/2018/12/template-jsblogger-v2-material.html#comments" target="_blank" title="Blog Thủ Thuật ">Đặt liên kết</a></li>
<li><a href="https://www.jsblogger.com/2018/12/template-jsblogger-v2-material.html#comments" target="_blank" title="Blog Thủ Thuật ">Đặt liên kết</a></li>
<li><a href="https://www.jsblogger.com/2018/12/template-jsblogger-v2-material.html#comments" target="_blank" title="Blog Thủ Thuật ">Đặt liên kết</a></li>
</ul>
<p style="margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;background-color:#f8f9fa;font-size:15px;font-style:italic;margin-top:-1px;float:left;padding:10px 15px">* Mình sẽ <u>gỡ liên liên kết</u> đối với những blog/website vi phạm chính sách &amp; quy định chung về liên kết.</p>
</div>

- Code liên kết bạn bè Facebook dạng 3.

Dạng code này giống như trang bạn bè trên facebook hơn.

Code liên kết bạn bè này cục giống trên Facebook nhất dành cho các bạn là blogger làm code để tăng thêm bạn bè kết ối trên blogspot.

<div id="lohh_load" style="display: none;">
<style>
.live_bb_tkn_tinpc {
    z-index: 8;
    position: relative;
    bottom: -34px;
    background: #ff4141;
    color: #fff;
    font: 500 10px Roboto,sans-serif;
    padding: 2px 4px;
    border-radius: 3px;
    left: -142px;
}
.abl, .abl_2, .abl_3 {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: loadingAnimation;
    -webkit-animation-timing-function: linear;
    background: #f6f7f8;
    background-image: -webkit-linear-gradient(left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);
    background-image: linear-gradient(left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 200% auto;
}
.abl{
    height: 48px;
width: 48px;
border-radius: 100%;
    position: relative;
    overflow: hidden;
float: left;
margin-right: 5px;
}
.abl_2{
    height: 10px;
width: 120px;
display: inline-block;
    position: relative;
    overflow: hidden;
margin-top: 10px;
}
.abl_3{
    height: 10px;
width: 90px;
 position: relative;
    overflow: hidden;
margin-top: 3px;
}
.loadabc {margin-bottom: 21px;}
</style>
<div class="loadabc">
<div class="abl"></div>
<div class="abl_2"></div>
<div class="abl_3"></div>
</div>
<div class="loadabc">
<div class="abl"></div>
<div class="abl_2"></div>
<div class="abl_3"></div>
</div>
<div class="loadabc">
<div class="abl"></div>
<div class="abl_2"></div>
<div class="abl_3"></div>
</div>
</div>
<style>
.show-imgfr-tkn .t {display: block; margin-bottom: 15px}
.show-imgfr-tkn img {margin-right: 5px; float: left; width: 56px; border-radius: 50%; border: 2px solid #4080ff; padding: 2px;}
.show-imgfr-tkn .name {display: inline-block; font-family: Roboto,sans-serif; font-size: 14px; color: #365899!important; text-align: center; margin-top: 7px; font-weight: 500}
.time_tin {display: block; color: #90949c!important; font-size: 13px; margin-top: -2px}
#moretkn_tint {font-size: 14px;}
.more_tin {margin-top: 10px}
#load_tin {display: none}
</style>
<div id="loz_cc" style="display: block;">
<div class="show-imgfr-tkn">
<span class="t">
<img src="https://lh6.googleusercontent.com/-XfsKsvNYMtw/AAAAAAAAAAI/AAAAAAAAB4w/B50U4vdsxzE/s35-c/photo.jpg" style="border: 2px solid #ff4141">
<a href="/" target="_blank" class="name">Khanh Blogger</a>
<span class="live_bb_tkn_tinpc">LIVE</span>
<span class="time_tin">khanhblogger.com</span>
</span>
<span class="t">
<img src="https://3.bp.blogspot.com/-uM9FsgRwsMY/WhLo2KpANnI/AAAAAAAAByA/5NYanUbCmU455oQS97fFONmEoT8WoReCQCLcBGAs/s1600/optimized-af6s.png">
<a onclick="clicktin(this)" href="javascript:void(0)" dt-url="https://phucuongblogger.com" class="name">Phú Cường Blogger</a>
<span class="time_tin">phucuongblogger.com</span>
</span>
<span class="t" style="margin-right: 0px; margin-bottom: 0px">
<img 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 onclick="clicktin(this)" href="javascript:void(0)" dt-url="https://www.niemstyle.com" class="name">Niệm Style Blog</a>
<span class="time_tin">niemstyle.com</span>
</span>
</div>
<div class="more_tin">
<a href="javascript:moretkn_tin();" id="moretkn_tint"><i class="fa fa-caret-down"></i> Xem thêm</a>
</div>
<div id="load_tin">
<img src="https://i.imgur.com/jxSjBoy.gif">
</div>
<div id="moretkn_tin" style="display:none">
<div class="show-imgfr-tkn" style="margin-top: 15px">
<span class="t">
<img src="https://i.imgur.com/MrEcO3Z.jpg">
<a onclick="clicktin(this)" href="javascript:void(0)" dt-url="https://www.siinblog.com" class="name">Siin Blog</a>
<span class="time_tin">siinblog.com</span>
</span>
<span class="t">
<img src="https://3.bp.blogspot.com/-Ql0z9pcpLzo/WgsZdaQD_BI/AAAAAAAAA3c/0A0wvA2Uh2si66FFPHIqneHqusegCazXwCLcBGAs/s1600/rVdf0h5-min.png">
<a onclick="clicktin(this)" href="javascript:void(0)" dt-url="https://www.starcuongit.com" class="name">Star Cường IT</a>
<span class="time_tin">starcuongit.com</span>
</span>
<span class="t">
<img src="https://lh5.googleusercontent.com/-oD5eDZd8Og8/AAAAAAAAAAI/AAAAAAAAFyI/Qoh2pbL4pIU/s35-c/photo.jpg">
<a onclick="clicktin(this)" href="javascript:void(0)" dt-url="https://starquoc-it.club" class="name">Star Quốc Blog</a>
<span class="time_tin">starquoc-it.club</span>
</span>
<span class="t">
<img src="https://lh3.googleusercontent.com/-NamYT_t4i_A/AAAAAAAAAAI/AAAAAAAACsk/z_292PSJcYM/s35-c/photo.jpg">
<a onclick="clicktin(this)" href="javascript:void(0)" dt-url="http://www.codedayroi.net" class="name">Code đây rồi</a>
<span class="time_tin">codedayroi.net</span>
</span>
<span class="t">
<img src="https://3.bp.blogspot.com/-nB1h7QvKxiw/WpeqQ_NphRI/AAAAAAAAAmI/er1K6_E7U781UcBJi2jWlXFY1gxNUfKwQCLcBGAs/s1600/Logo-Nguyen-Duy-Blog.png">
<a onclick="clicktin(this)" href="javascript:void(0)" dt-url="https://www.nguyenduyblog.com" class="name">Nguyễn Duy Blog</a>
<span class="time_tin">nguyenduyblog.com</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
function moretkn_tin() {
 var ele = document.getElementById("moretkn_tin");
 var text = document.getElementById("moretkn_tint");
 if(ele.style.display == "block") {
    ele.style.display = "none";
  text.innerHTML = "<i class='fa fa-caret-down'></i> Xem thêm";
   }
 else {
document.getElementById("load_tin").style.display = "block";
 setTimeout(function(){
document.getElementById("load_tin").style.display = "none";
  ele.style.display = "block";
}, 1000);
  text.innerHTML = "";
 }
} 
</script>

<script>
document.getElementById("lohh_load").style.display = "block";
 setTimeout(function(){
document.getElementById("lohh_load").style.display = "none";
document.getElementById("loz_cc").style.display = "block";
}, 2000);
</script>

- Code liên kết bạn bè giống Facebook dạng 4.

Dạng code này thì lại giống trang tin ở trên facebook

Bộ code này thì lại giống trang bảng tin của Facebook phiên bản cũ hơn, tuy vạy nhìn cũng rất ok, được, không đến nỗi nào.

<div id="dxcb" style="display: block;">
<div class="fr-tkn">
<a class="link-fr-tkn" aria-hidden="true" href="//www.khanhblogger.com/redirect.php?url=https://phucuongblogger.blogspot.com/" target="_blank" rel="nofollow"><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="//www.khanhblogger.com/redirect.php?url=https://phucuongblogger.blogspot.com/" target="_blank" rel="nofollow"><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" href="//www.khanhblogger.com/redirect.php?url=">1 bạn chung</a></span></div>
</div>
<div class="fr-tkn-adsstf">
<a class="link2-fr-tkn" href="//www.khanhblogger.com/redirect.php?url=https://phucuongblogger.blogspot.com/lienket" target="_blank" rel="nofollow">
<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="//www.khanhblogger.com/redirect.php?url=https://www.niemstyle.com/" target="_blank" rel="nofollow"><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="//www.khanhblogger.com/redirect.php?url=https://www.niemstyle.com/" target="_blank" rel="nofollow"><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" href="//www.khanhblogger.com/redirect.php?url=">1 bạn chung</a></span></div>
</div>
<div class="fr-tkn-adsstf">
<a class="link2-fr-tkn" href="//www.khanhblogger.com/redirect.php?url=https://www.niemstyle.com/p/contact.html" target="_blank" rel="nofollow">
<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="//www.khanhblogger.com/redirect.php?url=http://www.linkthuthuat.com/" target="_blank"><img class="img-fr-tkn" src="https://lh6.googleusercontent.com/-XfsKsvNYMtw/AAAAAAAAAAI/AAAAAAAAB4w/B50U4vdsxzE/s35-c/photo.jpg"></a>
<div class="fr-tkn-abf">
<div class="fr-tkn-abt">
<div class="fr-tkn-frt">
<a class="link2-fr-tkn" href="//www.khanhblogger.com/redirect.php?url=http://www.linkthuthuat.com/" target="_blank"><div style="display: inline; font-family: inherit;">
<span class="nameText" style="display: inline-block; font-family: inherit;">Link Thủ thuật</span></div>
</a></div>
<div class="socialContext" style="font-family: inherit;">
<div style="font-family: inherit;">
<span class="sddd"><a class="fr-tkn-lua" href="//www.khanhblogger.com/redirect.php?url=">99 bạn chung</a></span></div>
</div>
<div class="fr-tkn-adsstf">
<a class="link2-fr-tkn" href="//www.khanhblogger.com/redirect.php?url=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 id="loaddxcb" style="display: none;">
<img src="https://i.imgur.com/Q2qMR6I.gif" width="70px">
</div>
<script>
document.getElementById("dxcb").style.display = "none";
 setTimeout(function(){
document.getElementById("dxcb").style.display = "block";
document.getElementById("loaddxcb").style.display = "none";
}, 2000);
</script>
<style>
#loaddxcb {text-align: center; margin: 0 auto; line-height: 50px; 
    margin-top: -15px;
    margin-bottom: -10px;
}
</style>

Trên đây là một số code liên kết bạn bè trên blogger blogspot khá đẹp và đơn giản chỉ dùng vài code CSS, HTML, Javascript là bạn có thể sử dụng được rồi.

- Đọc thêm: Chia Sẻ Code Trình Phát Âm Nhạc Cho Website Blog Cục Đẹp

- Nếu bộ code nào bị lỗi hoặc không sử dụng được thì bạn vui long để lại lời nhắn ở phần comments hoặc CHAT trược tiếp với mình (VeoSpot.Com)

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