Tạo thanh menu trượt cho Blogger (Blogspot)


 

Không biết các bạn đã biết tới thanh menu trượt này chưa , nhưng mình cảm thấy nó rất tuyệt , có vẻ làm cho blog nhìn chuyên nghiệp hơn . Chính vì vậy mà hôm nay , mình xin hướng dẫn các bạn làm thanh menu trượt này.
Đầu tiên , các bạn hãy vào Trình bày (Layout) , chọn tab Chỉnh sửa HTML và không chọn Mở rộng Mẫu tiện ích nhé !
Như thường lệ , việc đầu tiên các bạn cần làm là lưu lại templates trước. Sau khi hoàn tất các công đoạn trên , các bạn tìm code sau
]]>
và thêm ngay trước nó đoạn code tiếp theo
.fixed_menu {
position: fixed;
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; }
* html .fixed_menu {position:absolute;}
Các bạn hoàn tất rồi chứ ? Giờ , tìm đoạn code <body> và thêm vào đoạn code tiếp theo bên dưới
<body>

<div class='fixed_menu'>
<a href='http://boyprodx.blogspot.com/' title='Home'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/home.png'/></a>
<a href='http://boyprodx.blogspot.com/2008/01/lin-h.html' title='Liên hệ'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/mail_generic.png'/></a>
<a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1753328' title='Nhận tin qua RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_blue_32.png'/></a>
<a href='http://feeds.feedburner.com/boyprodx' title='RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_orange_32.png'/></a>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/up.png'/></a>
</div>

Vậy là xong rồi đấy , các bạn chỉ cần chỉnh lại phần chữ đỏ theo ý của mình. Lưu lại templates và thưởng thức thành quả . Nếu muốn , các bạn có thể xem ví dụ tại đây

15 Nhận xét on "Tạo thanh menu trượt cho Blogger (Blogspot)"

Anonymous said...

mhungou04:
Menu rất cook, Code dễ chèn
Nhưng cái demo của bạn hình như layout bị lỗi rồi
Đây là 1 nguồn tốt cho newbie ^)___^

Benjami Tennyson on 10 October 2008 at 21:47 said...

Cám ơn ý kiến của bạn.
Còn về layout hình như bị lỗi font, mình đã tìm ra một layout khác hiển thị tốt trên IE6 , nhưng đang chỉnh sửa cho phù hợp, sẽ sớm ra mắt. Mong bạn ủng hộ mình. Thanks ^^ !!!

Hiệp Cò on 15 January 2009 at 21:20 said...

bài này mình đọc đã lâu,nhưng hôm nay mới chú ý nó. Mình đã test thử trên trình duyệt IE nó chạy ko đc :( tiếc quá...nó chỉ chạy đc trên trình duyệt firefox!

Benjami Tennyson on 15 January 2009 at 21:54 said...

@Hiệp Cò : Không biết bạn sử dụng IE phiên bản 6 hay 7 , nhưng mình đã test công cụ này trên IE 7 (xem demo tại đây) và thấy vẫn hoạt động bình thường mà !

Raul on 16 January 2009 at 13:55 said...

ok xong rồi thank nhiều

Benjami Tennyson on 16 January 2009 at 18:06 said...

@Raul : U're welcome :D

Anonymous said...

bạn ơi, blog tớ có tới 3 cái mã code này ]]>, thế thì mình chèn vào cái nào ha T__T, trước thẻ /b:skin phải ko boy

Benjami Tennyson on 18 January 2009 at 01:02 said...

Chính xác đấy bạn :D , nhớ là thêm vào ngay trước nhé . Thân !

Anonymous said...

cái này hiện rất đẹp, cho mình hỏi muốn nó hiện theo hàng ngang phía dưới hoặc hàng dọc bên phải thì làm như nào?
Sẵn tiện bạn hướng dẫn mình cách tạo mã phân trang (page 1 of 3) như trong trial nhé

Trần Phong on 29 October 2009 at 09:16 said...

Mình chèn cái cuộn trang ko hoạt động dc hic hic chỉ mình đi ...
Sao ko cuộn trang trở lên trên được nè

Phạm Sơn Tuấn on 19 April 2010 at 12:54 said...

Hix nó chỉ nằm im 1 chỗ ko di chuyễn theo thanh cuộn đc bạn ơi :(

Vô________Danh on 18 September 2010 at 13:49 said...

địt bà may trang của mày thành trang chủ a

Daily.188Bet on 27 April 2011 at 17:39 said...

thanks đang cần cái này cho blog của mình. www.188bet-help.co.cc

nháp on 17 March 2012 at 13:35 said...

bạn ơi xem lại dùm mình với, mình làm mà nó ko trượt, mail mình : thunglungroses@gmail.com

qwe pio on 13 July 2012 at 14:27 said...

của mình đưa trỏ chuột vào và nhấn thì nó k ra gì cả, mình xem ở chế độ previwe

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

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3