Khi bạn bấm vào một link liên kết bất kỳ trên Web/Blog, nó sẽ dẫn các bạn đến một trang Web/Blog nào đó do người quản trị gắn liên kết.
Với thủ thuật dưới đây, các bạn sẽ giao thêm "nhiệm vụ" cho link liên kết đó là: khi bạn rê chuột vào link liên kết lập tức sẽ xuất hiện một bảng nhỏ có hình ảnh và vài dòng giới thiệu khá đẹp mắt cho link liên kết
Ảnh động trái tim
Ảnh động sông hồ
Ảnh động thác nước
Ảnh động con rồng
Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 80px; /*position where enlarged image should offset horizontally */
}
</style>
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 80px; /*position where enlarged image should offset horizontally */
}
</style>
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ để phù hợp với blog của bạn và bấm Lưu lại là xong.
Mở rộng thêm:
Nếu muốn nhiều hơn link liên kết, bạn chỉ việc copy thêm đoạn code này và dán phía dưới, cuối cùng bấm Lưu lại là xong.
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
Mở rộng thêm:
Nếu muốn nhiều hơn link liên kết, bạn chỉ việc copy thêm đoạn code này và dán phía dưới, cuối cùng bấm Lưu lại là xong.
<a class="thumbnail" href="địa chỉ link liên kết">Tên link liên kết<span><img src="Link ảnh" /><br />Nhập mô tả cho hình tại đây</span></a><br />
Read more: GẮN ẢNH VÀO LINK LIÊN KẾT | dunghennessy
