Loading post navigation ...
 
 

Pro page

21
Nhận xét

[ Yêu cầu ] : Tạo menu dock cho Blog

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo 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>
- 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.

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


Enter your mail address:

21

Tuấn P.H.A

Cái này hay thật ^^! cám ơn anh dũng nhiều

Tuấn P.H.A
itvn-pro

cái này em làm hay quá :D

Teenbt9x

hay wa anh dũng ơi!!nhưng em hết ko gian để test rùi !! :((

Lê Công Tiến

Thời hoàng kim của FD đã đến :d

fandung

@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 :)

Hiệp Cò

Chỉ biết nói 1 chữ!.....

good

Khách (ẩn danh)

test

JEFFERSON LA [JEFFY]

Cảm ơn bạn về bài viết này

Khách (ẩn danh)

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ì

Ta đi tìm em

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?

Hoang Nguyen

tất cả các file java của anh bị del hết hay sao ? anh kiểm tra lại được k

Tiêu Phong

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

nh0cm0n

Làm đi làm lại :(
Vẫn chẳng làm được như DEMO ><
Cũng không theo hình ngang ><

Quốc Trình

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

Nguyen Minh Ngoc

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

Nguyen Minh Ngoc

tiếc quá

Phan Dũng

đã fix lại rồi bạn thử lại xem

[SeS] St0Rm

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ị

Trần Ka

hic hic, lam quài ko duoc a ơi? no ra 1 nữa ngang 1 nữa dọc, hic hic

[SeS] St0Rm

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



☺ 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.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home