TẠO MENU CỐ ĐỊNH (STICKY MENU) CHO BLOGSPOT

Post Comment


   
     Menu 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ường biến mất - bị "chui" vào thanh điều khiển của trình duyệt. Tình trạng này gây khó khăn cho người truy cập.
 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;}                         
Lưu ý: Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này (nếu có): "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
- 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.
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/AVvXsEjdcEc9_R23jGLXdzWk3pLtyTpiZjG5WRjZLB5Za2YPP1DCryr9pWjq1no7VMLhmu7GQiFEyHL0q-N_NdkwL1X2iBz7bkHwJlrXQ7iFxzXDDiJO0tk_lfKeRx7uFURkrmWvAWV_7masKGk/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>
 
Lưu ý: Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này (nếu có): "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"  
- 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
CÁCH GẮN LINK NHÃN LÊN THANH MENU

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


Nguồn: congcaokiên.blogspot.com

   
     Menu 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ường biến mất - bị "chui" vào thanh điều khiển của trình duyệt. Tình trạng này gây khó khăn cho người truy cập.
 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;}                         
Lưu ý: Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này (nếu có): "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
- 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.
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/AVvXsEjdcEc9_R23jGLXdzWk3pLtyTpiZjG5WRjZLB5Za2YPP1DCryr9pWjq1no7VMLhmu7GQiFEyHL0q-N_NdkwL1X2iBz7bkHwJlrXQ7iFxzXDDiJO0tk_lfKeRx7uFURkrmWvAWV_7masKGk/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>
 
Lưu ý: Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này (nếu có): "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"  
- 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
CÁCH GẮN LINK NHÃN LÊN THANH MENU

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

Nguồn: congcaokiên.blogspot.com

Tags:

Share:

0 nhận xét