T
heo yêu cầu của bạn MikaNguyễn
heo yêu cầu của bạn MikaNguyễn[FD's BlOg] - Bài viết này mình sẽ hướng dẫn các bạn tạo 1 menu dock cho blogspot. Thủ thuật này có lẽ khá quen với nhiều người, tuy nhiên trong kho thủ thuật của blog mình chưa có đăng tải thủ thuật này, và nay có người yêu cầu, mình cũng xin bổ xung vào danh sách các thủ thuật của BlOg FD.
Xem demo ở đây : LIVE DEMO
Hình ảnh minh họa:
☼ Các bước thực hiện :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào sau thẻ <head> hoặc sau thẻ </head>
<script type="text/javascript" src="http://fandung.110mb.com/dock-menu/jquery.js"></script>
<script type="text/javascript" src="http://fandung.110mb.com/dock-menu/interface.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 90,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
<style type="text/css">
.dock {
position: relative;
height: 50px;
padding-left:0px;
margin-top:0px;
}
.dock-container {
position: absolute;
height: 50px;
padding-left: 20px;
}
a.dock-item {
display: block;
width: 60px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: 14px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: block;
padding-left: 20px;
}
</style>
4. Save template
5. Tạo 1 widget HTML/Javascript và dán code bên dưới vào:
<div style="display: block;" class="dock" id="dock">
<div style="left: -7.48972px; width: 814.979px;" class="dock-container">
<a style="width: 90px; left: 0px;" class="dock-item" href="link 1"><img src="http://i342.photobucket.com/albums/o433/bkprobk/home.png" alt="home"><span style="display:block;">Trang Chủ</span></a>
<a style="width: 90px; left: 90px;" class="dock-item" href="link 2"><img src="http://i342.photobucket.com/albums/o433/bkprobk/about.png" alt="Giới thiệu"><span style="display:block;">Giới Thiệu</span></a>
<a style="width: 90px; left: 180px;" class="dock-item" href="link 3"><img src="http://i342.photobucket.com/albums/o433/bkprobk/dichvu.png" alt="Dịch vụ"><span>Dịch vụ</span></a>
<a style="width: 90px; left: 270px;" class="dock-item" href="link 4"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/sanpham.png" alt="Site đã thiết kế">Khách Hàng</a>
<a style="width: 90px; left: 360px;" class="dock-item" href="link 5"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/template.png" alt="Template"><span style="display: block;">Template</span></a>
<a style="width: 90px; left: 450px;" class="dock-item" href="link 6"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/history.png" alt="history"><span style="display:block;">Tư Vấn</span></a>
<a style="width: 134.979px; left: 540px;" class="dock-item" href="link 7"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/doitac.png" alt="calendar"><span style="display:block;">Đối Tác</span></a>
<a style="width: 140px; left: 674.979px;" class="dock-item" href="link 8"><img
src="http://i342.photobucket.com/albums/o433/bkprobk/email.png" alt="rss"><span style="display:block;">Liên Hệ</span></a>
</div>
</div>
- các bạn có thể thay các hình ảnh khác nếu bạn muốn.
Tham khảo từ source của trang 9xozo.com
Chúc các bạn thành công.
0 nhận xét:
Đăng nhận xét
♦ Mời bạn gửi Nhận xét của mình. Nếu không có tài khoản Blogger-Google, LiveJournal, WordPress, TypePad, AIM, OpenID, bạn vẫn có thể nhận xét bằng cách chọnComment as là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.
♦ Bấm vào Xem trước [Preview] bên dưới khung nhận xét nếu muốn xem trước comment đã viết, trước khi post [đăng]. Tương tự, bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.
♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét để phản hồi, đánh giá, góp ý.... suy nghĩ của bạn. Thông qua Nhận xét hãy để cho mọi người biết Bạn là ai.
Xem ký tự của emoticons khỉ Yoyo tại đây.