GẮN ẢNH VÀO LINK LIÊN KẾT

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

Mời bạn bấm rê chuột xuống các link liên kết phía dưới để thấy rõ hơn thủ thuật này.

Ảnh động trái tim
Đây là trang ảnh động có chủ đề trái tim với kích thước 240x320. Bấm vào link hoặc vào ảnh để đến trang này

Ảnh động sông hồ
Tại đây, các bạn sẽ được chiêm ngưỡng một số ảnh động có chủ đề sông hồ khá đẹp mắt. Bấm vào link hoặc vào ảnh để đến trang Web này.

Ảnh động thác nước
Thác nước là một trong những cảnh đẹp của thiên nhiên, bạn bấm vào link hoặc vào ảnh xem những cảnh đẹp này

Ảnh động con rồng
Tại đây, bạn có thể dễ dàng tìm thấy những ảnh động CON RỒNG khá đẹp với kích thước 240x320. Bấm vào link hoặc vào ảnh để đến trang Web này. Chúc bạn vui

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

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

Chúc các bạn thành công!!! 

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀