Các Liên Kết Bằng Hình Ảnh

™» CGC Blog «™ Bài viết này mình sẽ hướng dẫn tạo một hiệu ứng nho nhỏ cho các liên kết bằng hình ảnh. Đó là hiệu ứng phóng to ảnh khi rê chuột tới liên kết bằng hình ảnh đó. Và với thủ thuật nhỏ này, ta sẽ tạo ra các liên kết bằng hình ảnh trông bắt mắt hơn. Phổ biến nhất là tạo các menu dạng hình ảnh.

Ở đây mình sẽ đưa ví dụ về menu liên kết dạng ảnh. Đầu tiên bạn phải có

các hình ảnh để tạo liên kết. Để trông đẹp mắt thì mình khuyên các bạn dùng các ảnh nhỏ, chừng 50px là được, và cái nữa là các hình phải là hìnhvuông.

1. Đăng nhập blog.

2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (không cần chọn Mở rộng tiện ích)
4. Chèn đọan code bên dưới lên trên dòng ]]></b:skin>

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

#newnavbar li a img{
height:30px;
width:30px;
}

#newnavbar li a:hover img{
height:40px;
width:40px;
background: #ffff66;
}

#newnavbar li a:visited img{
height:30px;
width:30px;
background: #6D7B8D;
}

5. Tạo 1 widget HTML/Javascript và dán code bên dưới vào.

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page"><img src="URL of Home image"></a></li>
<li><a href="URL of Music page"><img src="URL of Music image"></a></li>
<li><a href="URL of Books page"><img src="URL of Books image"></a></li>
<li><a href="URL of Links page"><img src="URL of Links image"></a></li>
<li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
<li><a href="mailto:YOUR EMAIL ADDRESS"><img src="URL of Email image"></a></li>
</ul></div>

6. Thay đổi link liên kết và link của hình ảnh thành các liên kết và hình ảnh của bạn.
7. Save widget lại, và di chuyển đến nới muốn hiển thị, sau đó save template.

Chúc Các Bạn Thành Công !

Nguồn : fandung.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!