Làm thanh Menu đơn cho Blog !

Thứ Bảy, 23 tháng 2, 2013

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

Làm thanh Menu đơn cho Blog !

Nếu ai có Blog riêng thì nên trang bị cho mình một thanh menu ngang (dơn hay có menu con) sẽ làm cho Blog của mình trông có vẻ "sang trọng" và "Pro" hơn.

Thanh menu (thực đơn) hiểu nôm na là nơi tập trung các link đến các trang khác. Các nút trên thanh menu ứng với một link. Lúc ta kích vào trang web chứa link đó sẽ được mở ra !

Thanh Menu đơn

Thanh menu đa cấp

Để làm thanh Menu như các hình trên có 3 cách:
1- Tác động vào Mẫu (Template) của Blog
2- Vừa tác động vào Mẫu (Template) của Blog vừa sử dụng tiện ích
3- Chèn code vào tiện ích vào Blog
Cách Tác động vào Mẫu (Template) của Blog hơi phức tạp hơn một tý nếu bạn không có kiến thức về HTML. Vì vậy tôi xin hướng dẫn các bạn cách làm đơn giản hơn là chèn code vào tiện ích vào Blog.
Trong cấu hình của thanh menu có 2 thành phần là Code CSS (để điiều khiển các đặc tính của các nút menu, màu nến, chữ của các nút đó...) và Code HTML. Để có thể chèn vào tiện ích người ta phải gộp hai thầnh phần này lại thành một trang Code HTML. Thường là phần code CSS nằm trên code HTML. Nếu làm bằng cách tác động vào Mẫu (Template) của Blog phần code CSS thường được chèn trong thẻ <head> (mở)và </head> (đóng), còn code HTML được chèn giữa thẻ <body>....</body> - thường là ở vị trí của Code ]]></b:skin>.

<style

type="text/css">
ul#topnav {
 margin: 0; padding: 0;
 float: left;
 width: 100%;
 list-style: none;
 position: relative; /*--thiết lập vị trí của ul chưa menu--*/
 font-family: Tahoma;
 font-size: 12px;
 color: #FFFFFF;
 font-weight: Bold;
 background-color: #1376C9;

}
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: #000080;  /* 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 ="https://accounts.google.com/ServiceLogin?service=blogger&passive=1209600&continue=http://www.blogger.com/home&followup=http://ww

w.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> |
<a href="http://minhluong129.blogspot.com/2013/02/bang-ma-hoa-code.html"target="_blank"> Bảng mã hóa Code HTML</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"> Ảnh Vui</a> |
            <a href="http://www.haynhat.com/home/hay/tho-vui/" target="_blank">Thơ Vui</a>|
   </span>
        
    </li>
<li><a href="http://luong1950.blogspot.com/2012/02/len-he-voi-admin-blog.html"target="_blank">LIÊN HỆ VỚI ADMIN</a></li>
<li><a href="http://luong1950.blogspot.com/">TRANG CHỦ</a></li>
</ul>

Sau khi đã chỉnh sửa ưng ý xong, các bạn hãy tạo một tiện ích ở phần Main hay Header (Đăng nhập vào Blog>vào Thiết kế>Bố Cục>Thêm tiện ích) rồi Copy đoạn code vừa chỉnh sửa ở bước trên dán vào khung soạn thảo . Xong Lưu lại và thoát ra khỏi Blog. Vào lại Blog ta đã có thanh menu đơn hiện diện rồ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

Thứ Bảy, 23 tháng 2, 2013