BÀI XEM NHIỀU GẦN ĐÂY
-
H ôm nay, Caocongkien 360 giới thiệu với các bạn cách tạo menu ngang đơn giản (không có menu con xổ xuống). Đặc điểm nổi bật của m...
-
C húng ta đều biết, để có một trang blog gọn gàng, dễ sử dụng và gây được ấn tượng với người ghé thăm. Cần phải có một số tr...
-
T heo email yêu cầu, của một số bạn mới sử dụng Blogspot - thắc mắc về cách đặt bài viết vào từng chuyên mục (nhãn) trong...
-
M enu là một công cụ không thể thiếu cho một trang blog đạt chuẩn. Ngoài tác dụng trang trí cho blog và giúp cho n...
-
S au khi Caocongkien 360 , giới thiệu với các bạn một số cách tạo thanh menu, đã có nhiều bạn áp dụng thành công. Nhưng cũng có nhiều...
-
M ột trang blog với nhiều chuyên mục và bài viết cũng giống như một công sở với nhiều phòng, ban... Vậy người đọc làm thế nào để ...
-
C ó những bạn mới sử dụng Blogspot và muốn chỉnh sửa , thêm các tiện ích cho blog. Tìm kiếm trên mạng, thấy rất nhiều bài v...
-
C hào các bạn! Thủ thuật thu gọn bài viết trên trang chủ của blogspot không có gì là mới mẻ. Đã có rất nhiều bài viết về ...
-
M enu là một công cụ không thể thiếu đối với các trang web, blog chuyên nghiệp. Nhưng khi ta cuộn trang, thanh menu thườn...
-
G ần đây, CCK nhận được khá nhiều email của các bạn - thắc mắc về cách sửa một số lỗi phổ biến về hiển thị số lượng bài viết t...
CAOCONGKIEN 360
»
»
TẠO MENU CỐ ĐỊNH (STICKY MENU) CHO BLOGSPOT
THỦ THUẬT BLOG
»
TẠO MENU CỐ ĐỊNH (STICKY MENU) CHO BLOGSPOT
TẠO MENU CỐ ĐỊNH (STICKY MENU) CHO BLOGSPOT
Chủ Nhật, tháng 10 13, 2013
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;}
- Bấm: "Lưu mẫu" để lưu lại.
- Nếu bạn nào có hiểu biết về thành phần cấu trúc HTML của template thì có thể chèn luôn đoạn code ở bước 2 dưới đây vào vị trí thích hợp ở phần "khai báo wrapper" (thường nằm sau thẻ <body>) trong template. Nếu không, hãy làm như bước 2 dưới đây.
- Nếu bạn nào có hiểu biết về thành phần cấu trúc HTML của template thì có thể chèn luôn đoạn code ở bước 2 dưới đây vào vị trí thích hợp ở phần "khai báo wrapper" (thường nằm sau thẻ <body>) trong template. Nếu không, hãy làm như bước 2 dưới đây.
2. Vào "Bố cục".
- Bấm tiếp "Thêm tiện ích" thêm một phần tử "HTML/JavaScript" tại một vị trí bất kỳ - đối với các template không phải là mặc định và ngay dưới "Tiêu đề" - đối với các template mặc định. Nếu chưa quen, mời các bạn tham khảo cách thêm tiện ích "HTML/JavaScript" ở phần cuối bài viết này.
- Để trống tiêu đề và dán đoạn mã trong khung dưới đây vào phần nội dung.
<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/AVvXsEiyzEBCyU_BwhuXPCRPTApxPJTCJpdG7j_iokIBlM98be1O-HzS87lYMXdKAsZHEs5b4kbLK1klj5rHObo3m3fDnkztXH0Vdy2sok5nlgpXOQJgFT1VteAbx_1wXfYhTSdntutecSTTk_4/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.
32 nhận xét :
THÔNG BÁO:
Do hiện nay có quá nhiều nick xả "rác" vào blog này qua phần "nhận xét - bình luận" nên admin đã cài đặt chế độ: "Chỉ các thành viên của blog này mới được đăng bình luận".
Để có thể đăng bình luận, xin mời quý vị quan tâm tham gia làm thành viên của blog này - hoặc liên hệ qua mục "Gửi tin nhắn nhanh" ở chân trang!
Rất mong quý vị thấu hiểu và thông cảm!
Xin cảm ơn!
Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.
Website chạy tốt nhất trên các trình duyệt: Firefox và Chrome.
Copyright © 2013. CAOCONGKIEN 360 | THỦ THUẬT BLOG | KỸ NĂNG SEO - All Rights Reserved.
Copyright © 2013. CAOCONGKIEN 360 | THỦ THUẬT BLOG | KỸ NĂNG SEO - All Rights Reserved.
Đú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óaAD ơi e làm thánh công rồi nhưng không hiểu sao nó che mất cái logo, ... làm sao cho nó nằm trên mà hk đè logo, ... v ad
Trả lờiXóaem cũng làm được cho trang về trực tiếp bóng đá của em rồi: www.ketquabongda.asia cảm ơn anh Cao Công Kiến nhé
Trả lờiXóa