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://data.fandung.com/blog/demo/css-dock-menu/js/jquery.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/css-dock-menu/js/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.
Chúc các bạn thành công.
0 nhận xét:
Đăng nhận xét