Tạo Thanh menu đa cấp cho Blog !

Chủ Nhật, 24 tháng 2, 2013

Số lượt xem bài này:

Tạo Thanh menu đa cấp cho Blog !

Như bài trước tôi đã giơi thiệu với các bạn làm thanh menu có nhiều loại :
- Căn cứ vào vị trí ta có: Thanh menu ngang, thanh meno dọc
- Căn cứ vào các menu chứa trên đó ta có thanh menu đơn (chỉ có các menu chính) và thanh menu đa cấp (có chứa các menu phụ của menu chính).
Trong thanh menu đa cấp lại có nhiều kiếu :thanh menu có các menu phụ sổ xuống theo hàng dọc và thanh menu sổ xuống theo hàng ngang.
Hôm nay tôi hướng dẫn các bạn làm một Thanh menu ngang hai cấp có menu phụ sổ xuống theo hàng ngang dùng tiện ích chứ không tác động vào mẫu của Blog như hình dưới

Để làm được thanh menu như vậy các bạn sử dụng đoạn code sau đây :

}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
 border-right: 0px solid #555; /*-- các menu li --*/
}
ul#topnav li a {
 padding: 6px 10px;
 display: block;
 color: #f0f0f0;
 text-decoration: none;
}

#topnav li a:hover,
#topnav li a:active,
#topnav li a:focus {
 color: #00FF00;  /* Màu chữ khi rê chuột vào */
background-color:#00A5F4; /* Màu nền khi rê chuột vào */
}

ul#topnav li:hover {background: #00A5F4; url(topnav_active.gif) repeat-x; }

ul#topnav li span {
 float: left;
 padding: 6px 0;
 position: absolute;
 left: 0; top:26px;
 display: none; /*-- mặc định menu cấp 2 là ẩn --*/
 width: 100%;
 background: #00A5F4;
 color: #ffffff;
 /*--Bottom right rounded corner--*/
 -moz-border-radius-bottomright: 7px;
 -khtml-border-radius-bottomright: 7px;
 -webkit-border-bottom-right-radius:7px;
 /*--Bottom left rounded corner--*/
 -moz-border-radius-bottomleft: 7px;
 -khtml-border-radius-bottomleft: 7px;
 -webkit-border-bottom-left-radius: 7px;
}
ul#topnav li:hover span { display: block;} /*--hiển thị menu cấp 2 khi đưa chuột vào--*/
ul#topnav li span a { display: inline; } /*-- tất cả các menu câp 2 cùng nằm trên 1 dòng--*/
ul#topnav li span a:hover {text-decoration: none; background: #1CE321; color:#FF0000;}
</style>
<ul id="topnav">
<li>
        <a href="https://accounts.google.com/ServiceLogin?service=blogger&passive=1209600&continue=http://www.blogger.com/home&followup=http://www.blogger.com/home<mpl=start#s01">ĐĂNG NHẬP</a>
    </li>
<li>
        <a href="#">QÙA TẶNG ĐỘC GIẢ</a>
        
        <span>
            <a href="http://minhluong129.blogspot.com/2012/02/trang-nhac.html"target="_blank">Nhạc</a> |
            <a href="http://minhluong129.blogspot.com/2012/02/trang-anh_16.html"target="_blank"> Ảnh</a> |
          <a href="http://luong1950.blogspot.com/2012/02/tao-chu-ky-dong-voi-adobe-flash_5597.html"target="_blank"> Tạo chữ ký động</a> |  
<a href="http://www.mediafire.com/?1xmcdp6styss4" target="_blank"> Phần mềm share của tôi</a> |           
   </span>
        
    </li>
<li>
        <a href="#">CÁC BẢNG THỬ</a>

        <span>
            <a href="http://luong1950.blogspot.com/2012/02/bang-thu-code-cua-minh-luong_9.html"target="_blank"> Bảng thử Code</a> ||
<a href="http://luong1950.blogspot.com/2012/02/bang-thu-code-mau_9.html"target="_blank"> Bảng thử Code-Màu</a> |           
   </span>
        
    </li>
<li>
        <a href="#">GÓC THƯ GIÃN</a>
        
        <span>
            <a href="http://www.vatgia.com/hoidap/4434/11572/1001-cau-chuyen-cuoi--hay-va-doc-dao.html"target="_blank">Chuyện cười</a> |
            <a href="http://www.google.com.vn/search?q=%E1%BA%A3nh+vui+c%C6%B0%E1%BB%9Di&hl=vi&noj=1&tbm=isch&tbo=u&source=univ&sa=X&ei=4L0lUaP1AYWH0AX74ICoDw&ved=0CCsQsAQ&biw=1152&bih=560"target="_blank"> Thơ Vui</a> |
            <a href="#">Ảnh Vui</a>|
   </span>
        
    </li>
<li><a href="http://luong1950.blogspot.com/2012/02/len-he-voi-admin-blog.html">LIÊN HỆ VỚI ADMIN</a></li>
<li><a href="http://luong1950.blogspot.com/">TRANG CHỦ</a></li>

Các bạn copy nó về dán vào Notepad nghiên cứu để chỉnh sữa cho phù hợp với của mình. Các bạn chú ý vào những chỗ tôi chú thich trong Code để chỉnh sữa nhé.Thanh menu này là tôi làm cho blog của mình.
Sau khi đã chỉnh sửa xong, các bạn tạo một tiện ích ở phần Main hay Header cho Blog và dán đoạn code mà các bạn đã chỉnh sửa vào khung soạn thảo của tiện ích rồi lưu lại và tháo khỏi Blog.

Vào lại Blog để xem kết quả ! Cách tạo tiện ich tôi đã hướng dẫn ở đây !

6 nhận xét

Unknown

lúc 16:11 2 tháng 10, 2014 Reply

ad oi cho em hoi với : sao trang cua nguoi ta tren thanh tiêu đề thì đuôi của dòng link đều là HTML vidu http://luong1950.blogspot.com/2013/02/tao-thanh-menu-cap-cho-blog.html, còn trên trang của em đuôi toàn là label vidu :http://www.cachmangnhadat.com/search/label/QU%E1%BA%ACN%201 , em mới chơi blog còn gà lắm nên mong ad chỉ giúp em với , em cam on ad nhìu ,

Minh Lương và Mọi người

lúc 20:30 2 tháng 10, 2014 Reply

Trước lúc post (đăng bài), bạn phải chọn nhãn cho bài đăng đó rồi mới xuất bản. Trong Blog có nhiều nhãn đặt theo chủ đề. Trong Blog của mình có rất nhiều nhãn nằm ở mục THỂ LOẠI ở góc trên bên phải đó

Unknown

lúc 09:50 3 tháng 10, 2014 Reply

em cam on ad nhiu, em con ga lam mong ad giai thich giup em su khac nhau giua 2 trang co duoi la html vs label (nhan) vidu:http://luong1950.blogspot.com/2013/02/tao-thanh-menu-cap-cho-blog.html#comment-form và http://luong1950.blogspot.com/search/label/Nh%E1%BA%A1c , em doi on ad nhiu

Minh Lương và Mọi người

lúc 15:00 4 tháng 10, 2014 Reply

http://luong1950.blogspot.com/search/label/Nh%E1%BA%A1c : là địa chỉ đến nhãn (chủ đề NHẠC của mình trên Blog của mình. Ở đây chứa tất cả những bài viết của mình có liên quan đến nhạc
Còn http://luong1950.blogspot.com/2013/02/tao-thanh-menu-cap-cho-blog.html là bài " Tạo thanh menu đa cấp cho Blog" mà vbạn đã vào xem đó

Unknown

lúc 10:58 7 tháng 10, 2014 Reply

em là CACH MANG NHA DAT ne ad oi,tại trình độ ltạo blog của em còn có hạn nen e dien ta dieu muon hoi chua dung , xin ad huong dan giup em lam cach nao de em tao noi dung cho 1 menu con mà khi sang phan xem blog click vao menu con do thi duong link tren thanh tieu de la html dc ko , mong ad chi giup em voi , em doi on ad nhiu lam

Minh Lương và Mọi người

lúc 08:27 11 tháng 10, 2014 Reply

Mình đã xem Blog của bạn rồi đó. Blog chuẩn rôi !. Nếu bạn kích vào nhãn (ví dụ "BÁN NHÀ RIÊNG QUẬN 3 GIÁ DƯỚI 1 TỶ" ở phía bên phải thì sau html nó còn thêm địa chỉ của nhãn trên thanh địa chỉ cua trình duyệt
Còn nếu bạn kích vào tiêu đề bài đăng thì cuối cùng kết thúc bằng html trên thanh địa chỉ của trình duyệt thôi (ví dụ kích vào " "BÁN NHÀ RIÊNG QUẬN 1 GIÁ DƯỚI 1 TỶ" ở phía bên trái
Mình nghĩ là bạn chua phân biệt được nhãn và bài đăng. Nếu bạn muốn làm một cái như ý bạn thì bạn nên tham khảo mục "TÔNG TIN NÊN BIẾT" trên Blog của mình về bên phải đó

Đăng nhận xét

1- Nhận xét chỉ nên liên quan đến bài đăng, phải có tính chất xây dựng và có văn hóa !
2- Để chèn biểu tượng cảm xúc vào nhận xét, các bạn nhập các ký hiệu bên dưới của hình vào phần viết nhận xét.
3- Việc nhập tài khoản Google của bạn và nhập 2 từ xác minh trước lúc gửi nhận xét là bắt buộc !
4- Các bạn có thể chèn Video trên Youtube hay ảnh bằng cách dán link của video (trên thanh địa chỉ) hay link ảnh trực tiếp ở khung soạn thảo nhận xét !
5-Các bạn có thể post code trong nhận xét nhưng phải mã hóa code trước ! Để mã hóa code các bạn vào đây

Chủ Nhật, 24 tháng 2, 2013