TẠO MENU CỐ ĐỊNH (STICKY MENU) CHO BLOGSPOT
13/10/13
Giải pháp tối ưu để giải quyết là: Trang bị cho web, blog một thanh menu cố định (sticky menu).
Thế nào là menu cố định?
Menu cố định cũng là một thanh menu ngang thông thường, nhưng được hiển thị cố định trên đầu web, blog - ngay dưới thanh điều khiển của trình duyệt. Khi cuộn trang, menu này không biến mất. Các bạn có thể kiểm chứng điều đó ngay trên đầu trang Caocongkien 360 này.Cách cài đặt:
1. Đăng nhập vào blog:
- Chèn đoạn code trong khung dưới đây vào trước thẻ ]]></b:skin>
Nếu chưa biết cách tìm nhanh thẻ ]]></b:skin> , mời các bạn tham khảo bài viết này.
/* CAOCONGKIEN MENU */
#caocongkien_menu{background-color:#3173f1;height:34px;width:100%;min-width:960px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-top:0 solid #9932CC;height:34px;width:100%;min-width:960;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:2px solid #9932cc;} #caocongkien_menu ul{list-style:none;margin:auto;width:960px} #caocongkien_menu ul li{float:left;} #caocongkien_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:12px;font-family:Arial;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;} #caocongkien_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:yellow;}
<div id='caocongkien_menu'> <ul> <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWty880RK41B9Vd31__TCVuPxzJataogc5AAkEDtmK86AnKUSo2xInQ-y2SzsmXsQAwpkVtCT7vluJotNVZ0plbRxWsT40whoxYJip_UGTyO3nGmmUtJk53uYoU6MvXSD5RcnAYgvPgkU/s1600/home_icon.gif' style='padding:0px;'/></a></li> <li><a href='LINK'>Tên menu 1</a></li> <li><a href='LINK'>Tên menu 2</a></li> <li><a href='LINK'>Tên menu 3</a></li> <li><a href='LINK'>Tên menu 4</a></li> <li><a href='LINK'>Tên menu 5</a></li> <li><a href='LINK'>Tên menu 6</a></li> <li><a href='LINK'>Tên menu 7</a></li> <li><a href='LINK'>Tên menu 8</a></li> </ul>
</div>
- Thay thế phần màu đỏ trong đoạn code trên bằng link các trang hoặc "nhãn" bài viết. Thay thế phần tô màu xanh trong đoạn code trên thành tên các trang hoặc "nhãn" tương ứng.
- Bấm "Lưu" tiện ích vừa tạo và bấm "Lưu sắp xếp" - nếu di chuyển tiện ích và cuối cùng trở lại trang chủ xem kết quả.
Mời các bạn tham khảo thêm các bài viết sau:
TẠO MENU DROPDOWN CHO BLOG - KIỂU 1
CÁCH TẠO NHÃN (CHUYÊN MỤC) CHO CÁC BÀI VIẾT TRÊN BLOGSPOT
Chúc các bạn thành công!
Nguyễn Văn Cường (Caocongkien)
P/S: Các bài viết trong blog này đều đã được đăng ký, bảo vệ bởi: DMCA và Google Author Ship. Nếu sao chép để đăng lại mà không đề tên tác giả và không đặt link dẫn về bài viết gốc đều bị coi là bất hợp pháp.
34 nhận xét :
ĐỀ NGHỊ:
Không chèn các đường link có tính chất spam, quảng cáo khi bình luận!
Tất cả những bình luận có chèn link nhằm spam, quảng cáo sẽ bị Admin báo cáo lên Google - do đó sẽ bị xóa và chặn vĩnh viễn.
Những bình luận, thắc mắc - nếu viết tắt bừa bãi, viết bằng kiểu chữ "teen",... sẽ không được trả lời và có thể bị xóa.
Rất mong quý vị thấu hiểu và thông cảm!
Xin cảm ơn!
Đúng là thanh menu cố định này thuận tiện hơn.Nhưng anh có chút băn khoăn khi cài thêm nhiều code vào có làm cho chạy hơn không?Chúc Cường vui khỏe,nhiều thành công!
Trả lờiXóaCảm ơn anh!
XóaCài càng nhiều code thì blog càng chạy chậm hơn anh ạ, Nhất là những hình động.
Nếu muốn, anh có thể để nguyên hoặc gỡ bỏ thanh nenu cũ rồi cài đặt thanh menu cố định.
Chúc anh tuần mới vui và thành công!
Mấy ngày hôm nay mình bị đau mắt nên không sang thăm Bạn được.
Trả lờiXóaHôm nay đã đỡ nhiều rồi nên sang thăm Bạn nè – Chúc Bạn ngày mới vui tươi và hạnh phúc
Cảm ơn bạn!
XóaCó lẽ do nơi bạn vừa bị bão số 10 tàn phá nên môi trường ô nhiễm gây ra dịch đau mắt?
Chúc bạn luôn vui!
Anh đã làm rồi,nhưng nó không cố định như nhà Cường.Vậy anh có sai sót gì.Dù sao thì thanh menu sau này màu anh vẫn thích hơn trước.
Trả lờiXóaChúc nhiều vui nhé!
Lỗi này do template của anh có một số đoạn code gây xung đột trong tiện ích này. Phải xóa bỏ nó mới cố định được. Để hôm nào rảnh, em sẽ chỉnh sửa trực tiếp trên blog của anh.
XóaMà sao anh lại làm hai "nút" TRANG CHỦ trên một thanh menu vậy? Cái biểu tượng màu đỏ hình ngôi nhà - đó là nút trang chủ rồi anh ạ.
Chúc anh buổi tối thật vui!
Khi mới cài không thấy trang chủ,anh đã thêm vào.Lúc xem blog hiển thị sau phát hiện có sự trùng lắp,chưa chỉnh lại.Cảm ơn Cường và chúc an vui!
XóaChúc anh luôn vui và thành công!
XóaBác cho em hỏi là em đã tạo thành công Stickey menu rồi nhưng nó hiển thị tên menu 1,2...8 em chưa biết sửa chỗ nào trong đoạn code của bác cả.Bác có thể chỉ cho em được không.Bài viết của bác rất hay.
Trả lờiXóaĐể menu hoạt động, bạn chỉ việc thay "Tên menu xxx" ( chữ tô màu xanh) trong đoạn code thứ hai thành tên các "nhãn" trong blog của bạn và thay "LINK" (được tô màu đỏ) bằng link các "nhãn " tương ứng.
XóaBạn có thế tham khảo thêm tại các bài sau:
1. CÁCH TẠO NHÃN (CHUYÊN MỤC) CHO CÁC BÀI VIẾT TRÊN BLOGSPOT
2. CÁCH GẮN LINK NHÃN LÊN THANH MENU
Chúc bạn thành công!
Anh cho hỏi là em muốn đổi màu nền menu và muốn menu căn ở giữa thì làm thế nào vậy
Trả lờiXóaWeb của em là
http://thuvien.kientruc360.info/
Bạn thay đổi các thông số bắt đầu bằng dấu "#" với mã màu CSS mà bạn muốn trong phần đầu đoạn code mình đã chia sẻ. Nhớ là chỉ thay các phần có: "#" ở đầu thôi nhé!
XóaCăn chỉnh giữa như nào hả anh Cuong
Trả lờiXóaCăn vào giữa thì phải tùy từng template, có template khi căn giữa sẽ mất tính năng cố định. Đặc điểm của menu này là tự động co giãn theo body và trên độ rộng của màn hình truy cập. Mình thấy không cần quan tâm nhiều đến vấn đề này.
XóaNếu muốn căn giữa, bạn có thể thêm cú pháp: align:center vào sau đoạn: min-width:970px; (thành: min-width:970px; align:center;)
Cảm ơn anh! e làm được rồi
Trả lờiXóaChúc mừng!
XóaBài viết của anh rất hay. Rất cần cho những người thích blog và mới tìm hiểu. Thanks anh !
Trả lờiXóaCảm ơn bạn đã động viên! Chúc bạn thành công!
XóaBài viết của anh rất chi tiết và hữu ích, đúng là không như mấy bài viết sơ sài khác. Sẵn cho em hỏi làm thế nào để đổi màu thanh menu vậy anh?
Trả lờiXóaanh ơi cho em hỏi . làm sao để cho cái địa chỉ con trong thanh menu hiển thị dễ dàng vậy . cái điạ chỉ xọc xuống của em khó dùng chuột click lắm anh ak
Trả lờiXóacảm ơn bạn
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaMình đã làm y chang được r bạn à. Nhưng có vấn đề là khi mình vào blog bằng web thì OK, vào blog bằng điện thoại thì nó ko hiện menu mà chỉ hiện tên tragn web trên thanh menu (mình đã chỉnh chế độ xem blog bằng web trên điện thoại rồi.) Bạn giúp mình khắc phục nhé. Thanks bạn nhiều. Blog mình nè Yêu Tiếng Anh
Trả lờiXóaChào anh Cường. Em mới tập làm blog vì muốn tạo một website theo ý mình.
Trả lờiXóaEm thấy cái Sticky Menu này rất hay khi không bị biến mất khi lăn chuột nhưng có một nhược điểm là không tạo đc dropmenu cho sticky menu đúng không anh? Em rất muốn làm sticky menu nhưng phải tạo thành drop menu đc luôn thì có đc ko anh? Nếu không đc thì phải làm thêm drop menu như trang của anh sẽ rất bất tiện khi có một số menu lặp lại gây rối mắt và phức tạp trang web của mình.
Em mới tập làm blog nên kiến thức có hạn. Mong anh chỉ giáo thêm.
Taọ được hết, khi nào rảnh mình sẽ viết bài chia sẻ cách làm.
Xóabác cường cho em hỏi sao em tìm đoạn code ]]> mà của e ko tìm thấy
Trả lờiXóaBạn xem cách tìm tại bài: CÁCH TÌM NHANH CÁC THẺ KHI CHỈNH SỬA TEMPLATE BLOGSPOT
XóaAnh cường ơi tình hình là cái blog của em nó ra như này nè sửa thế nào giờ ạ :'(
Trả lờiXóafile:///C:/Users/HinaMaoMao/Desktop/Untitled.png
thủ thuật hay. thank ad. mình đang cần :D
Trả lờiXóaý e dán code bước 1 vào rồi đến bước 2 e cũng vào thêm tiện ích nhưng khi dán vô chỗ nào thì nó ra chỗ ấy k nằm trên đầu hì
Trả lờiXóachào Cường cho mình hỏi làm sao có thể thay đổi độ rộng của thanh menu? http://himlamquan6s.blogspot.com/
Trả lờiXóakhung menu của mình chỉ nhìn đc 1 nưa chữ trên menu
Muốn thay đổi độ rộng của thanh menu thì bạn có thể điều chỉnh các thông số sau: height:34px (chiều cao thanh menu - tăng con số 34 lên)và width:960px (độ rộng của thanh menu (tăng con số 960 lên).
XóaNhưng trong trường hợp này có lẽ do bạn thao tác không chính xác khi tạo thanh menu nên đã xảy ra lỗi.
Bạn hãy xóa thanh menu đó đi và làm lại!
Chúc thành công!
Mình làm không được... Giúp mình với..
Trả lờiXóaTrang mình nè: http://www.thestarvillage.net/
em làm được rồi
Trả lờiXóa