Menu xổ dọc xuống cho hình ảnh

Với thủ thuật dưới đây, các bạn có thể dễ dàng tạo một menu cho một hình ảnh nào đó. Khi bạn rê chuột vào hình ảnh này thì sẽ có một menu xổ dọc xuống phía dưới hoặc phía trên tuỳ theo vị trí của ảnh. Các bạn có thể áp dụng thủ thuật này để làm liên kết với các trang web/blog khác...

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

Ảnh minh họa

Với thủ thuật này cũng khá đơn giản, các bạn làm theo hướng dẫn dưới đây nha:

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn Bố Cục

Bước 4: Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/anylinkmenu.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/anylinkmenu.js">
</script>

<script type="text/javascript">

var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'width:260px; background:#FDD271', linktarget:'_new'} //First menu variable. Make sure "anylinkmenu1" is unique
anylinkmenu1.items=[
["Tiêu đề 1", "Link liên kết"],
["Tiêu đề 2", "Link liên kết"],
["Tiêu đề 3", "Link liên kết"],
["Tiêu đề 4", "Link liên kết"],
["Tiêu đề 5", "Link liên kết"],
["Tiêu đề 6", "Link liên kết"],
["Tiêu đề 7", "Link liên kết"],
["Tiêu đề cuối", "Link liên kết"] //dòng cuối này không có dấu phẩy phía sau
]

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")

</script>

<a href="http://www.cdqtkd5a.blogspot.com" class="menuanchorclass" rel="anylinkmenu1"><img border="0" src="Link hình ảnh" /></a>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước, màu nền, tiêu đề và đường link liên kết của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:

* Ở code trên có tất cả 8 mục, nếu muốn nhiều mục hơn, bạn copy lệnh này:

["Tiêu đề", "Link liên kết"],

Và dán trên dòng lệnh "Tiêu đề cuối".

* Nếu bạn muốn thay hình bằng chữ thì thay dòng lệnh:

<img border="0" src="Link hình ảnh" />

Bằng dòng chữ nào mình thích, ví dụ:

<a href="http://www.cdqtkd5a.blogspot.com" class="menuanchorclass" rel="anylinkmenu1">Chọn chủ đề để xem</a>

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

Nguồn:dunghennessy