Thủ Thuật Blogspot: Trang trí Website với icon liên kết hữu ích

Xin chào các bạn, trong bài viết này, mình sẽ hướng dẫn cách sử dụng mã HTML/CSS đươc chia sẻ để trang trí website Blogspot của bạn trở nên thu hút và chuyên nghiệp hơn.

Thủ Thuật Blogspot: Trang trí Website với icon liên kết hữu ích.

Bài viết sẽ giới thiệu đoạn mã dưới đây, giúp tạo danh sách icon được liên kết tới các chủ đề khác nhau như Blogspot, Facebook, Templates, hay đời sống (Life).

Đoạn mã minh họa

<style>
.atnlogo {text-align: center;}
.atnlogo  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.atnlogo  img:hover {border:1px solid #43a1a0!important;}
.atnlogo  img.noborder {border:0;}
</style>
<div class="atnlogo">
<a href="https://www.anhtrainang.com/search/label/Blogspot" title="Chia sẻ thủ thuật Blogspot"><img class="noborder" src="http://i.imgur.com/XOaphwp.png" width="125" height="125" /></a>
<a href="https://www.anhtrainang.com/search/label/Facebook" title="Tin tức, thủ thuật Facebook"><img class="noborder" src="http://i.imgur.com/wBRYSoP.png" width="125" height="125" /></a>
<a href="https://www.anhtrainang.com/search/label/Templates" title="Kho Template Blogspot đẹp"><img class="noborder" src="http://i.imgur.com/JCejr36.jpg" width="125" height="125" /></a> 
<a href="https://www.anhtrainang.com/search/label/Life" title="Tin tức, Đời sống"><img class="noborder" src="http://i.imgur.com/VSaBUlP.jpg" width="125" height="125" /></a> 
</div>

Cách thức hoạt động

• CSS: Phần style định dạng hiển thị và tác động hover để làm nổi bật khung viền khi người dùng di chuột qua icon.

• HTML: Tạo danh sách các liên kết (link) điều hướng đến những chủ đề khác nhau.

Hướng dẫn tích hợp

1. Copy đoạn mã: Sao chép đoạn mã trên và dán vào chỗ mong muốn trong trang web Blogspot của bạn.
2. Tùy chỉnh liên kết: Thay đổi URL và hình ảnh theo nội dung của bạn.
3. Xuất bản: Lưu thay đổi và kiểm tra hiện thị trên giao diện Blogspot.

Xem Demo

Kết luận

Bằng cách sử dụng mã được chia sẻ trong bài viết này, bạn hoàn toàn có thể biến tấu giao diện Blogspot thành một website đập mắt và chuyên nghiệp. Nếu bạn có bất kỳ thắc mắc hay ý tưởng nào, đề ra thảo luận trong phần bình luận nhé!