Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

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 Thêm Widget Liên Kết Bạn Bè Cho Median UI 1.6

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.

Copyright © Phạm Văn Linh

Đánh Giá Bài Viết:
No pain, no gain !

7 comments

  1. Em vừa đổi tên miền anh cập nhật liên kết lại giúp em với, liên kết cũ Thành Trương Blog
    Liên kết: https://www.relub.net/
    Tên hiển thị: ReLub
    Mô tả: Chia sẻ thủ thuật công nghệ, kiến thức thú vị
    1. Done em nhé!
  2. liên kết bạn bè thế 🙈
    1. Thế nó mới khét chư lị
  3. Hướng dẫn tạo chuông bảo trì ik bạn
    1. Chuông ở góc trên đó hả, bạn đợi mấy hôm mình có thời gian mình viết bài hướng dẫn nha!
    2. Okii bạn