Tạo menu dock cho 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 NP Blog'sXem 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>
- Thay đổi code màu đỏ thành link liên kết tương ứng.
- các bạn có thể thay các hình ảnh khác nếu bạn muốn.
0 nhận xét:
Đăng nhận xét
☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Hãy để lại tên của bạn khi bạn post bài comment, để mình có thể dễ dàng trả lời comment của bạn khi cần.