RSS Posts 
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.
Cái này hay thật ^^! cám ơn anh dũng nhiều
cái này em làm hay quá :D
hay wa anh dũng ơi!!nhưng em hết ko gian để test rùi !! :((
Thời hoàng kim của FD đã đến :d
@Tiến : :D ko biết fải vậy ko nữa, nhưng mấy bữa nay pageview đang tăng lên :)
Chỉ biết nói 1 chữ!.....
good
test
Cảm ơn bạn về bài viết này
Cái quan trọng là bố cục sao cho nó tương tác với các đoạn mã lệnh. Cái quan trọng bạn không hướng dẫn, hướng dẫn cái tào lao làm gì
Hỏi a Dũng chut: e làm liên kết thì được rùi nhưng sao khi trỏ vào 1 mục nào đó nó không phóng to lên như trong demo của a vậy?
tất cả các file java của anh bị del hết hay sao ? anh kiểm tra lại được k
Anh ơi! Sao em làm theo những bước trên mà nó lại chạy sang 1 bên!
Rùi gấp khúc xuống chứ ko nằm nganh như DEMO.
ĐẸp quá nhưng làm hoài không được. Anh giúp em chỉnh lại với! Thanks anh nhe!
Chúc FD ngày một tiến xa hơn nữa!
Email!doongchul@gmail.com
Làm đi làm lại :(
Vẫn chẳng làm được như DEMO ><
Cũng không theo hình ngang ><
mình làm theo hướng dẫn của bạn nhưng không thể lwu lẫu đc, chỉ dừng lại ở bước 4 sau khi copy code và dán thì nhận được thông báo không thể lưu mẫu là sao vậy bạn. thank
mới học blog tìm được cái hay thì ko làm được.Nó báo là;
Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The string "--" is not permitted within comments.
Error 500
tiếc quá
đã fix lại rồi bạn thử lại xem
anh Dũng xem hộ em lỗi này với :( dùng theme mặc định của blogger mà nó bị lỗi này:
http://nh1.upanh.com/b2.s25.d1/7768fdb5bf1e94e7c4661dd0b1bd0193_40406851.help.jpg
em chèn vào sau thẻ head hay /head cũng bị
hic hic, lam quài ko duoc a ơi? no ra 1 nữa ngang 1 nữa dọc, hic hic
fix lại được ko vậy anh Dũng? đến cái icon thứ 5 thì nó xuống hàng à :( từ đoạn đấy thì nó thành hàng dọc lun
» Nội dung phải liên quan tới chủ đề bài viết.
»
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.