 |
| Code widget Friend Link cho blogger/Web |
- 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