Xin chào các bạn đang muốn đã và đang sử dụng blogger làm nên tảng phát triển website của mình. Trong các bài trước đây mình có giới thiệu với các bạn cach tao blog như thế nào, tạo blog ra sao, cùng với nó là các thu thuat blog là thêm bộ đếm truy cập, tạo menu ngang trên đầu bài viết, trong chuyên mục danh nhap blog của website freewebs.vn, để tiếp tục về các bài viết về Blog mình hôm nay xin tiếp túc viết một bài viết về menu dọc, nó phục vụ cho những bạn không thích menu ngang hoặc muốn blog của mình chuyên nghiệp bằng cách tạo diều hướng các các bài viết bằng các menu dọc giống như thế này.
Chúng ta hãy tạo ra menu dọc phía bên phải trang blog.
Trong suốt quá tình làm blog chúng tôi luôn có một blog mẫu để tạo, nếu các bạn theo dõi các bài viết trước thì chúng tôi lấy blog http://freewebsvn.blogspot.com/ làm ví dụ để mình họa một cách trực quan hơn đối với các bạn.
Bây giờ các ban hãy đăng nhập blog để bắt đầu cùng tôi để tạo một menu dọc cho blog các bạn.
Khi click bào Bố cục thì hình nó giống như thế này.
Chúng ta hãy click vào chỗ Thêm Tiện Ích để nhập những mà css tạo ra menu, Khi click vào Thêm Tiện Ích bạn kéo xuống phần. HTML/Javascript
Bây giờ hãy click vào nút + để thêm code vào. Nội dung đoạn code Menu ngang xin copy dưới đây.
<div id="menulaber"> <ul> <li><a href="http://www.amienphi.com/home/sua-chua-mien-phi">DV sửa chữa</a></li> <li><a href="Http://networkads.vn">Kiếm Tiền</a></li> <li><a href="http://adchoices.vn">Nhà Quảng cáo</a></li> <li><a href="http://www.amienphi.com/home/category/back-link">Backlink Free</a></li> </ul> </div>
Phần http://… các bạn thay đổi tùy thích theo sở thích của các bạn, còn các phần DV sửa chữa, Kiếm tiền, Nhà Quảng cáo, Backlink free các bạn cũng thay đổi theo ý thích của các bạn.
Sau khi các bạn đã thay đổi xong rồi hãy chọn Lưu để lưu lại. và bây giờ thử quay ra kiểm tra xem như thế nào.
Ta thấy rằng đã có menu bên phải rồi, nhưng để nó đẹp hơn như thế này.
Để có được menu đẹp như vậy thì các bạn định dạng CSS cho các menu của các bạn bằng cách:
Các bạn tìm đến thẻ ]]></b:skin> và dán các đoạn code ở dưới đấy vào trước đoạn ]]></b:skin>
Và tôi sẽ làm thử để các bạn xem, tôi sẽ copy đoạn code menu mà tôi thích ở bên dưới vào
Sau khi các bạn copy và dán vào hãy bấm vào lưu.
Và dưới dây là một số kiểu menu mà các bạn có thể chọn lựa, hoặc các bạn có thể tự chế menu cũng được chỉ cần thay link ảnh mà các bạn tự chế vào là được.
Các bạn phải dán đoạn code này vào:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #8D9179; display: block; background: url(http://adzone.vn/logodoitac/adzone/adzonemenublog%20doc.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current, #menulaber li a:active { color: #6C7250; background: url(http://adzone.vn/logodoitac/adzone/adzonemenublog%20doc.gif) 0 -32px; padding: 8px 0 0 10px; }
Còn kiểu hiện thị menu như vậy không thích bạn có thể chọn menu như hình dưới đây.
Nếu các bạn chọn menu kiểu vậy thì các bạn cần thêm đoạn code này vào
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(http://adzone.vn/logodoitac/adzone/adzonemenublog%20doc1.gif); padding: 8px 0 0 35px; }
#menulaber li a:hover { color: #FFF; background: url(http://adzone.vn/logodoitac/adzone/adzonemenublog%20doc1.gif) 0 -32px; padding: 8px 0 0 35px; }
Nếu các bạn không thích 02 mẫu trên bạn có thể thêm sự chọn lựa là mẫu 3 này.
Nếu các bạn chọn mẫu thứ 3 này có chúng ta phải thêm đoạn code này vào.
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(http://adzone.vn/logodoitac/adzone/adzonemenublog%20doc2.gif); padding: 8px 0 0 20px; }
#menulaber li a:hover { color: #FFF; background: url(http://adzone.vn/logodoitac/adzone/adzonemenublog%20doc2.gif) 0 -32px; padding: 8px 0 0 20px; }
Và đây là thành quả. các bạn thử xem như thế nào.
Quả thật menu khá đẹp phải không nào, nếu các bạn thích menu khác có thể tự chế.
Qua bài viết này các bạn có thể thiết kế cho mình một menu khá đẹp và hợp với ý thích cảu mình, hy vọng bài viết này sẽ giúp cho những bạn có ý định thiet ke web mien phi sử dụng hosting free hoàn toàn có thể thiet ke web một cách chuyên nghiêp.