Tạo danh sách liên kết link có favicon bằng HTML

Trước đây mình có hướng dẫn anh em cách tạo danh sách liên kết link từ widget danh sách blog sẵn có của blogspot tại đây
Và ở bài viết này mình sẽ hướng dẫn anh em tạo widget tương tự bằng html, ngoài ra mình sẽ hỗ trợ anh em bằng tool chỉ cần nhập link web và tên web để tạo nhanh danh sách
Favicon của web liên kết sẽ tự động lấy theo link liên kết

HTML

Sử dụng HTML bên dưới để tạo danh sách liên kết

<div class="blog-list-container">
<ul id="BlogList">
Danh sách link liên kết tạo bằng tool bên dưới
</ul>
</div>

Tạo danh sách link liên kết

Link web

Mở cửa sổ mới

Thêm style

Để thêm style cho danh sách trên các bạn dùng đoạn CSS sau

.blog-list-container ul {
     padding: 0;
     max-height: 320px;
     overflow: auto;
}
 #BlogList li {
     margin-bottom: 10px;
     height: 25px;
}
 #BlogList .web-icon {
     margin-right: 5px;
     width: 16px;
     height: 16px;
     background: #fff;
     padding: 2px;
     border-radius: 2px;
     overflow: hidden;
     float: left;
}
 #BlogList img {
     height: 16px;
     width: 16px;
}
 #BlogList .web-title {
     height: 20px;
     float: left;
}

Việc còn lại là các bạn chỉ cần thêm 1 widget HTML sau đó sử dụng các code bên trên là được. Chúc anh em một ngày vui! 😁