Hướng Dẫn Thêm Widget Liên Kết Bạn Bè Cho Median UI 1.6

Hế lô các bạn, chả là mới thay quả template nên chỉnh lại một số thứ, điển hình như là phần widget liên kết bạn bè mình có thay đổi một chút CSS để cho phù hợp với template. Thấy cũng khá đẹp nên mình share luôn cho mọi người nếu ai thích thì dùng

Hướng Dẫn:

Cách làm cũng khá đơn giản nên các bạn chỉ cần làm theo các bước dưới đây là được nhé!

Bước 1: Thêm HTML

Copy đoạn HTML bên dưới đây
Sau đó, dán vào nơi bạn muốn đặt widget và chỉnh sửa lại thông tin bạn bè.
Rồi để đó và đến với bước tiếp theo

Bước 2: Thêm CSS

Bước này thì bạn chỉ cần copy CSS và dán vào chỗ CSS trong template là được. Rồi lưu lại vậy là xong

À HTML và CSS mình để ở bên dưới này nha!


<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>


#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: #f6f6f6;display:block;color:inherit;width:100%; padding:8px 10px;border-radius:4px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friendLink a:hover{color:var(--linkC)}
.drK .friendLink a{background:rgba(0,0,0,.15);color:inherit}
.drK .friendLink a:hover{color:var(--darkU)}
.friendsRules {margin:0;padding:0;line-height:normal;display:block;float:left;background-color:#f6f6f6;font-size:13px;margin-top:-1px;margin: 0 0 8px 0;padding:7px 10px;border-radius: 6px}
.drK .friendsRules {background-color:rgba(0,0,0,.15)}

Lời Kết

Vậy là trên đây mình đã chia sẻ cho các bạn cách thêm widget liên kết bạn bè cho template Median UI 1.6 giống như trên blog của mình. Nếu có bất kì thắc mắc nào về bài viết cũng như code ở bên trên hoặc về những thứ khác trên blog các bạn có thể để lại comment ở bên dưới mình sẽ giải đáp.