Chia sẻ một vài Code widget liên kết bạn bè (Friend Link) cho blogger/Web

Code widget Friend Link cho blogger/Web


 Liên kết bạn bè giúp blog của bạn có nhiều nguồn truy cập hơn, cụ thể thì mỗi người bạn là một backlink chất lượng. Trong bài viết này mình sẽ chia sẻ một vài Code widget liên kết bạn bè (Friend Link) cho blogger/Web

Hướng dẫn chung

  • Bước 1: Tạo một tiện tích HTML/JavaScript trong phần Bố cục và đăt tên là Friend Link
  • Bước 2: Chép toàn bộ mẫu code bên dưới vào phần Nội Dung của Tiện ích vừa tạo và lưu lại
Mẫu 1
<div class="widget HTML">
<style>
    .lien-ket-blogg li {
        list-style: none
    }
    .lien-ket-blogg ul::-webkit-scrollbar-track {
        background-color: #f0f1f5
    }
    lien-ket-blogg ul::-webkit-scrollbar {
        width: 0 }
    .lien-ket-blogg ul::-webkit-scrollbar-thumb {
        background-color: hsla(0, 0%, 53.3%, .4)
}
    .lien-ket-blogg ul {
        max-height: 400px;
        overflow-x: hidden;
        overflow-y: overlay}
    .lien-ket-blogg li a 
{
        font-size: 13.5px;
        float: left;
        list-style: none;
        margin: 2.5px;
        background: #474958;
        padding: 4.5px 8px !important;
        border-radius: 4px; 
}
    .lien-ket-blogg a {
        color: #fff !important;
        font-weight: 400;
        width: auto;
    padding: 5px 10px;
        display: inline-block;
        font-size: 14px!important;
        margin : 0 0 4px 2px;
        border: 1px solid #ccc;
        border-radius: 3px; 
}
    .lien-ket-blogg a:hover {opacity:0.9}
    .lien-ket-blogg a:hover {color:#fff; border: 1px dashed #fff; 
}
</style>
<div id="lien-ket-blogspot">
<div class="lien-ket-blogg">
<ul>
<li><a href="Thay Link vô Đây 1" target="_blank" title="Tiêu đề 1">Tiêu đề 1<i class="fas fa-check-circle" style="color:rgb(88, 182, 237)" title="Đã Xác Minh"></i></a></li>
<li><a href="Thay Link vô Đây 2" target="_blank" title="Tiêu đề 2">Tiêu đề 2<i class="fas fa-check-circle" style="color:rgb(88, 182, 237)" title="Đã Xác Minh"></i></a></li>
<li><a href="Thay Link vô Đây 3" target="_blank" title="Tiêu đề 3">Tiêu đề 3<i class="fas fa-check-circle" style="color:rgb(88, 182, 237)" title="Đã Xác Minh"></i></a></li>
<li><a href="Thay Link vô Đây 4" target="_blank" title="Tiêu đề 4">Tiêu đề 4<i class="fas fa-check-circle" style="color:rgb(88, 182, 237)" title="Đã Xác Minh"></i></a></li>

<li style="width:100%"><a style="margin-center:0;text-align:center" href="Thay link của bạn" target="_blank" title="Đặt liên kết chéo phát triển blog"><i class="fad fa-hands-helping rung"></i> Đặt liên kết cùng hợp tác </a></li>
</ul> <div class="friendsRules"> <i class="fad fa-bullhorn rung"></i> Chúng tôi sẽ <u>gỡ liên kết</u> đối với những blog/website vi phạm chính sách & quy định chung về liên kết.</div> </div> </div> </div>

Mẫu 2

<style>

#blogFriends::-webkit-scrollbar{width:5px}

#blogFriends::-webkit-scrollbar-thumb{background:#484848;border-radius:100px}

#blogFriends::-webkit-scrollbar-thumb:active{background:#777}

#blogFriends{padding:0;margin:0;list-style:none;max-height:510px;overflow:auto}

.blogFriends{margin:0;padding:0}

.blogFriends li{margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center;width:50%}

.blogFriends a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; margin: 0 8px 8px 0; padding: 7px 15px; font: 400 15px 'Noto Sans', sans-serif; -webkit-transition: .3s; letter-spacing: -.35px; border-radius: 0; -moz-transition: .3s; -o-transition: .3s; color: #3e3e3e!important; border: 1px solid #484848;border-radius: 3px}

.blogFriends a:hover{color:#f27980!important;border:1px solid;border-radius: 12px;}

</style>

<div id="blogFriends">

<div class="blogFriends">
<!--<li>
<a href="#datlienket" target="_blank"><i class="fa fa-user-plus" aria-hidden="true"></i>Name web</a>
</li>-->

<li><a href="Thay link vào"ref="nofollow" target="_blank">Bạn 1</a></li>
<li><a href="Thay link vào"ref="nofollow" target="_blank">Bạn 2</a></li>
<li><a href="Thay link vào"ref="nofollow" target="_blank">Bạn 3</a></li>
<li><a href="Thay link vào"ref="nofollow" target="_blank">Bạn 4</a></li>
<li style="width:100%"><a style="margin-center:0;text-align:center" href="Thay link của bạn" target="_blank" title="Đặt liên kết chéo phát triển blog"><i class="fad fa-hands-helping rung"></i> Đặt liên kết cùng hợp tác </a></li>
<div class="friendsRules"> <i class="fad fa-bullhorn rung"></i> Chúng tôi sẽ <u>gỡ liên kết</u> đối với những blog/website vi phạm chính sách & quy định chung về liên kết.</div>

</div></div>

Mẫu 3

<link href="https://cdn.leanhduc.pro.vn/blogger/codeprovn/template-median/friend-link/style.css" rel='stylesheet' type='text/css'/>
<link href="https://cdn.leanhduc.pro.vn/utilities/animation/shake-effect/style.css" rel='stylesheet' type='text/css'/>
<link href='https://cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css' rel='stylesheet' type='text/css'/>
<div id='codepro-blogFriends'>
  <div class="codepro-blogFriends">
    <li><a title='Bạn 1' href='Thay link vô đây' target='_blank'><i class="fad fa-medal" style="--fa-primary-opacity: 0.70"></i> Bạn 1</a></li>
    <li><a title='Bạn 2' href='Thay link vô đây' target='_blank'><i class="fad fa-medal" style="--fa-primary-opacity: 0.70"></i> Bạn 2</a></li>
    <li><a title='Bạn 3' href='Thay link vô đây' target='_blank'><i class="fad fa-medal" style="--fa-primary-opacity: 0.70"></i> Bạn 3</a></li>
    <li><a title='Bạn 4' href='Thay link vô đây' target='_blank'><i class="fad fa-medal" style="--fa-primary-opacity: 0.70"></i> Bạn 4</a></li>
    <li style="width:100%;text-align:center"><a href="Thay link của bạn" title="liên kết bạn bè"><i class="fad fa-link rung"></i> Đặt liên kết hợp tác & phát triển</a></li>
</div>
  <div class="codepro-quydinhFriends"><i class="fad fa-quote-left"></i> Chúng tôi sẽ <u>gỡ liên kết</u> đối với những blog/website vi phạm chính sách & quy định chung về liên kết. <i class="fad fa-quote-right"></i></div>
</div>

Trên đây là 3 mẫu Code widget liên kết bạn bè (Friend Link) mình sưu tầm được. 

Các bạn hãy tùy biến theo sở thích nhé!

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