Share code widget bạn bè cho blogspot

Xin chào các bạn, mấy nay rảnh nên viết bài cho mọi người xem nè. Hôm nay, mình sẽ share cho các bạn code widget bạn bè + hiệu ứng hover cực xịn sò mà mình đang sử dụng nhé.

Xàm lìn chém gió

Widget này có nhiều dạng, nó chỉ đơn giản hiển thị các đường liên kết giữa các Blog, mình cũng không ép buộc gì các bạn phải chọn cái này cái kia, mình chỉ góp ý cho bạn làm sao để cho blog của bạn dễ nhìn và gọn gàng hơn.

Nếu bạn bị lỗi ở chế độ tối thì comment tên template của bạn xuống để mình gửi code nhé.

Hướng dẫn

Mẫu 1 ( Hiệu ứng hover )

Cài cái này cũng đơn giản thôi

Đăng nhập vào Blgger muốn cài đặt (phải sử dụng Median UI v1.7, còn ai template khác thì comment)

Ở đây mình sử dụng cả hai phiên bản Font Awesome v5 và v6 để hiển thị icon bạn nào có rồi thì thôi, bạn nào chưa có phiên bản nào thì copy code của phiên bản đấy vào thẻ <heade> hoặc thẻ <html>
V5

<link href='https://cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css' rel='stylesheet' type='text/css'/>

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css' integrity='sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==' referrerpolicy='no-referrer' rel='stylesheet'/>

Còn nữa, cái này còn có hiệu ứng rung bạn cài giống Font Awesome nhé

<link href="https://cdn.leanhduc.pro.vn/utilities/animation/shake-effect/style.css" rel='stylesheet' type='text/css'/>

Sau đó bạn vào Bố cục, ở phần side-widget sau đó thêm tiện ích HTML/JAVASCRIPT, tiêu để đặt gì đó liên quan đến black link và copy đoạn code sau vào phần nội dung

<!-- bạn bè by Chỉnh-->
<div class='widget-content'>
    <style>
#friend-link{padding:0;margin:0;list-style:none}
    ul.blogFriend { clear:both; position:relative; display:flex; padding-left:0; flex-wrap:wrap; align-content:center; background-color:var(--themeBg);color:inherit;}
    ul.blogFriend li { float:left; padding-left:4px; padding-right:4px; list-style-type:none; width:calc(100% / 2); }
    ul.blogFriend li a { position:relative; padding:9px 9px 9px 12px; border-radius:4px; background:var(themeBg); box-shadow:0 6px 18px 0 rgb(9 32 76 / 8%); font-size:13px; font-weight:600; color:inherit; display:block; margin-bottom:8px; clear:both; transition:all .1s ease; overflow:hidden; }
    ul.blogFriend li a:before { content:''; display:block; position:absolute; top:-14px; right:0; width:14px; height:28px; background:var(--themeBg-alt); border-radius:14px 0 0 14px; }
    ul.blogFriend li a:hover { transform:scale(1.1); color:var(--darkU)}
    div.quydinhFriends { position:relative; padding:9px 9px 9px 12px; border-radius:4px; background:var(--themeBg); box-shadow:0 6px 18px 0 rgb(9 32 76 / 8%); font-size:13px; font-weight:600; color:inherit; display:block; margin-bottom:8px; clear:both; transition:all .1s ease; overflow:hidden; }
#friend-link i{color:var(--themeLink)!important}
	.quydinhFriends {margin:0;padding:0;line-height:normal;display:block;float:left;background-color:var(--themeBg);font-size:14px;margin-top:-1px;margin: 0 0 8px 0;padding:7px 10px;border-radius: 6px;font-weight:500}
    </style>
    
    <div id='friend-link' class='FriendsLink'>
	<ul class="blogFriend">
       <li><a href="#Liên-kết" title="Tiêu đề" target="_blank"><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a> </li>
 <li><a href="#Liên kết" title="Tiêu đềquot; target="_blank"><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a> </li>
 <li><a href="#Liên kết" title="Tiêu đề" target="_blank"><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a> </li>
<li><a href='#Liên kết' target='_blank' title='Tiêu đề'><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a></li>
<li><a href="#Liên kết" title="Tiêu đề" target="_blank" rel="dofollow"><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a></li>
<li><a title="Tiêu đề"  href="#Liên kết" target="_blank" ><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a></li>
<li><a href="#Liên kết" target='_blank' title='Tiêu đề'><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a></li>
<li><a href="#Liên kết" target='_blank' title='Tiêu đề'><i class="fa-solid fa-hashtag fa-beat-fade"></i> Liên kết</a>
</li>

    <li style="width:100%;text-align:center"><a href="#Link bài viết" 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>
  </ul>
    <div class="quydinhFriends"><p><i class="fad fa-quote-left"></i> Mình 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></p></div></div>
    </div>

Thay đổi các nội dung thành của bạn

Lưu lại và sắp xếp nhìn cho nó gọn gàng

Mẫu 2 (Bình thường )

1

Cái này mình đi nhặt về và code lại, do cái này tương thích với Median UI v1.6

Đặt HTML và CSS dưới đây vào nơi bạn muốn hiển thị

  <div id="friend-link">
  <div class="friendLink">
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li><a href="friend-link" target="_blank" title="friedn-title">Friend Name</a></li>
    <li style="width:100%"><a style="display:block;text-align:center" href="link-bài viết" 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 hợp tác &amp; phát triển</a></li>
  </div>
<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 &amp; quy định chung về liên kết.</div>
<style>
#friend-link{padding:0;margin:0;list-style:none}
.friendLink{display: flex;flex-wrap: wrap;list-style: none;margin: 0;padding: 0;position: relative;width: calc(100% + 10px);left: -5px;right: -5px;font-size: 13px;}
.friendLink li{width: calc(50% - 10px);margin: 0 5px 10px;}
.friendLink a{background: var(--themeBg);display:block;color:inherit;width:100%; padding:8px 10px;border-radius:4px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrapcolor:inherit}
.friendLink a:hover{color:var(--linkC)}
.friendLink a{background:rgba(0,0,0,.15);}
.friendLink a:hover{color:var(--darkU)}
.friendsRules {margin:0;padding:0;line-height:normal;display:block;float:left;background-color:var(--themeBg);font-size:13px;margin-top:-1px;margin: 0 0 8px 0;padding:7px 10px;border-radius: 6px}
    </style></div>

Bonus

<div id="friend-link">
<ul class="friendLink">

<li><a href="liên-kết" target='_blank' title='Tiêu đề'> Liên kết</a></li>

<li><a href="liên-kết" target='_blank' title='Tiêu đề'> Liên kết</a></li>

<li><a href="liên-kết" target='_blank' title='Tiêu đề'> Liên kết</a></li>

<li><a href="liên-kết" target='_blank' title='Tiêu đề'> Liên kết</a></li>

<li><a href="liên-kết" target='_blank' title='Tiêu đề'> Liên kết</a></li>

<li><a href="liên-kết" target='_blank' title='Tiêu đề'> Liên kết</a></li>

<li><a href="liên-kết" target='_blank' title='Tiêu đề'> Liên kết</a></li>

  <div style="width:100%;margin-bottom: 10px;border-radius: 4px;overflow: hidden;"><a style="text-align:center" href="link-bài-viết" target="_blank"><i class="fad fa-user-friends rung"></i> Đặt liên kết bạn bè </a></div>
<div class="friendsRules"> <i class="fad fa-bullhorn rung"></i> Mình sẽ gỡ <u>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.</div>
<style>
/* Friendlink */ #friend-link{padding:0;margin:0;list-style:none}
.friendLink{display: flex;flex-wrap: wrap;list-style: none;margin: 0;padding: 0;position: relative;width: calc(100% + 10px);left: -5px;right: -5px;font-size: 14px;}
.friendLink li{border-left: 3px solid var(--synC);width: calc(50% - 10px);margin: 0 5px 10px;border-radius:4px;overflow:hidden}
.friendLink a{background:#dddddd33;display:block;color:inherit;width:100%; padding:8px 10px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.friendLink a:hover{color:var(--themeLink)}
.friendLink li:last-child {border-left:unset}
#friend-link i{color:var(--themeLink)!important}
.nB[data-theme=dark] .friendLink a{background:rgba(0,0,0,.15);color:inherit}
.nB[data-theme=dark] .friendLink a:hover{color:var(--darkU)}
.friendsRules {margin:0;padding:0;line-height:normal;display:block;float:left;background-color:#dddddd33;font-size:14px;margin-top:-1px;margin: 0 0 8px 0;padding:7px 10px;border-radius: 6px;font-weight:500}
.nB[data-theme=dark] .friendsRules {background-color:rgba(0,0,0,.15)}
</style>

Mẫu 3 (Chân trang)

Nếu bạn nào sử dụng chân trang thì chỉ cần thêm code bên dưới thì mình thấy là gọn nhất, còn ai không thích thì cứ copy các mẫu trên vào

<li><a href='https://www.blogger.com/' target='_blank'>Blogger</a></li>

FAQ

Icon không hiển thị

Bạn cài thêm link icon hoặc link hiệu ứng rung mình share ở Mấu 1 nhé

accordion_title

text_paragraph

Lời kết

Vậy là mình đã chia sẻ xong Widget bạn bè cho các bạn rồi. Có gì thắc mắc hãy comment và nếu thấy nó hữu ích thì tương tác mạnh mẽ lên nhé:))

Tham khảo thêm :

Life is not fair - get used to it!

Chỉnh

Bình luận

Thông báo

Share code widget bạn bè cho blogspot

Xàm lìn chém gió

Hướng dẫn

Mẫu 1 ( Hiệu ứng hover )

Mẫu 2 (Bình thường )

1

Bonus

Mẫu 3 (Chân trang)

FAQ

Lời kết

Nhúng video từ Youtube

Đặt liên kết bạn bè phát triển blog

Chia sẻ Code Widget Thông Báo cho Median UI 1.7

Template Median UI v1.7 (Edit)

Nguyễn Bá Chỉnh

Partner

Tools

Main category

Sub category

Bình luận

Thông báo

Share code widget bạn bè cho blogspot

Xàm lìn chém gió

Hướng dẫn

Mẫu 1 ( Hiệu ứng hover )

Mẫu 2 (Bình thường )

1

Bonus

Mẫu 3 (Chân trang)

FAQ

Lời kết

5 nhận xét