Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo thanh menu ngang từ các trang tĩnh dành cho Blogspot

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi TrollVL, 16/10/13.

Lượt xem: 13,318

  1. TrollVL Thành viên cấp 2

    Hôm nay mình sẽ giới thiệu đến độc giả của vietdesigner cách tạo thanh menu từ các trang (pages) trên blogger và tất nhiên chỉ là thanh menu nằm ngang không có các menu con.

    [​IMG]
    Đối với những template có sẵn của blogspot

    Nếu như bạn đang sử dụng template từ những mẫu sẵn có trên blogspot thì bạn chỉ việc thêm các trang sau đó cài đặt như hình bên dưới

    [​IMG]
    Đối với template khác

    Với những template bạn sử dụng bên người thường tác giả họ không hỗ trợ menu được tạo bởi các page và chúng ta vẫn phải thực hiện các bước ở phía trên. Tiếp đến công việc của chúng ta là phải thêm CSS cho nó để có được một thanh menu như mong muốn

    Trước khi thêm CSS sẽ hiển thị trên blog như sau:

    [​IMG]
    Với cấu trúc HTML:
    Code:
    <div class="widget PageList" id="PageList98">
    <h2>Pages</h2>
    <div class="widget-content">
    <ul>
    <li class="selected"><a href="/">Trang chủ</a></li>
    <li><a href="link">Truyện Cười</a></li>
    <li><a href="link">
    	
    Blogspot Tips</a></li>
    <li><a href="link">Search</a></li>
    </ul>
    </div>
    </div>
    Ta sẽ dựa vào class PageList để viết CSS cho thanh menu. Và thanh menu này mình sẽ làm style theo yêu cầu trên blog của mình từ bạn Yêu Truyện Ngắn

    [​IMG]

    Live Demo
    Code:
    .PageList h2{display:none}
    .PageList ul{background:#6fb1e9 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;_background-image:none;border-bottom:1px solid #444;margin-top:0;margin-left:-30px;margin-right:-30px}
    .PageList ul{margin:0;padding:0;overflow:hidden;list-style:none}
    .PageList li a{display:inline-block;padding:.6em 1em;font:normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;color:#000;border-left:1px solid #fff;border-right:1px solid #444}
    .PageList li{margin:0;padding:0;float:left}
    .PageList li a:hover,.PageList li.selected a{color:#666;background-color:#6fb1e9;text-decoration:none}
    .PageList li.selected a{border-left:0}
    Bạn cũng có thể dựa vào ID của widget để tạo thành thanh menu để không bị ảnh hưởng đến các widget pagelist khác trên blog. Ví dụ như ID của widget pagelist phía trên là PageList98, vậy bạn có thể thay đoạn CSS trên như sau:
    Code:
    #PageList98 h2{display:none}
    #PageList98 ul{background:#6fb1e9 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;_background-image:none;border-bottom:1px solid #444;margin-top:0;margin-left:-30px;margin-right:-30px}
    #PageList98 ul{margin:0;padding:0;overflow:hidden;list-style:none}
    #PageList98 li a{display:inline-block;padding:.6em 1em;font:normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;color:#000;border-left:1px solid #fff;border-right:1px solid #444}
    #PageList98 li{margin:0;padding:0;float:left}
    #PageList98 li a:hover,#PageList98 li.selected a{color:#666;background-color:#6fb1e9;text-decoration:none}
    #PageList98 li.selected a{border-left:0}
    Không có gì phức tạp phải không bạn? Nếu gặp khó khăn trong quá trình thực hiện đừng ngại comment bên dưới, mình sẽ giúp đỡ bạn giải quyết những vướng mắc. Và nếu bạn có style đẹp dành cho menu này hãy chia sẻ mình sẽ rất cảm ơn. Chúc bạn thành công!

    ...
    Huy Vỹ, toiyeudohoa, BKV2 người khác thích bài viết này.
  2. toiyeudohoa

    toiyeudohoa Thành viên cấp 1

    thank bạn đã hướng dẫn .đánh dấu mai thử
  3. 4T Developer

    4T Developer Mới đăng kí

    Anh có thể hướng dẫn viết bài viết theo từng menu dc ko nhỉ?

Ủng hộ diễn đàn