Header Ads

ad728

    • Breaking News

    TẠO MENU SỔ XUỐNG

    22:27 1

    CÁCH 1

    Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm.

    Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.

    Trước tiên để tạo menu, bạn phải thống kê lại các nhãn, (giống như lập 1 bản đồ trong blog vậy) sau đó ta sẽ gôm các nhãn lại theo từng mục, ví dụ: giải trí , học tập... và các mục giải trí, học tập sẽ là 1 menu chính, còn các nhãn trong nó sẽ là 1 menu phụ.

    Thứ 2 là xác định nơi đặt menu, thông dụng nhất sẽ là ở trên phần header.Như vậy các bạn phải tạo 1 widget HTML/Javascript vào header rồi dán code của thủ thuật vào.

    ☼ Bây giờ ta bắt đầu vô chi tiết:
    1. Đăng nhập blog
    2. Vào Bố cục (layout)
    3. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng tiện ích)
    4. Chèn đọan code sau vào ngay bên dưới thẻ mở <head> (nhấn Ctrl + F để tìm đến thẻ này cho nhanh)ên dưới

    <script src="http://www.hotlinkfiles.com/files/2668724_mkkex/dropdown2.js" type="text/javascript">
    </script>


    5. Save template lại.
    6. Quay trở lại bố cục, vào phần tử trang, tạo 1 cái widget HTML/Javascript,sau đó dán đọan code bên dưới vào.

    ►CODE:

    <style type="text/css">
    .nav23{ // css của menu chính
    height: 30px;
    padding: 2px 0 0;
    margin-right:5px;
    }

    .nav23 a, .nav23 a:visited {

    color:#000;
    font-weight:bold;
    font-family:arial, helvetica, sans-serif;

    text-decoration:none;
    font-size:12px;
    margin: 0 4px;
    padding: 5px 4px;
    display: block;
    float:left;

    }
    .nav23 a:hover { // hiệu ứng của menu chính khi có chuột rê vào
    background-color: #909090;
    color:#fff;
    margin: 0 4px;
    padding: 5px 4px;

    }
    .nav23sub
    { // css menu con (phụ)
    background:#f57900;
    margin-top:1px;
    padding:1px;
    color: #fff;;
    margin: 1 1px;
    padding: 5px 10px;
    font-weight:bold;
    font-family:arial, helvetica, sans-serif;
    font-size:12px;
    border-top:1px #fff solid;
    cursor:pointer;
    }
    </style>

    <script type="text/javascript">

    function otab()
    {
    document.write('<table border="0" bordercolor="#999" style="background-color: #fff" cellspacing="0" cellpadding="0">');
    }
    function submn(submn_label,submn_text)
    {
    document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#f57900\'" class="nav23sub" onclick="window.location.href=\'http://langchanhkh9801.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
    }

    function ctab(){
    document.write('<\/table>');
    }
    function otab(child_id)
    {
    document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #fff" cellspacing="0" cellpadding="0">');
    }

    // end of define functions!

    </script>
    <div style="background-image: url(http://sites.google.com/site/fdblogsite/home/fd.gif); width: 670px" class="nav23">
    <a id="hoctap" href="#" >học tập</a>
    <a id="thuthuat" href="#">thủ thuật</a>
    <a id="khampha" href="#">khám phá</a>
    <a id="giaitri" href="#">giảitrí</a>
    <a id="hinhanh" href="#">hình ảnh</a>
    <a id="truyen" href="#">truyện</a>
    <a id="cuocsong" href="#">cuộc sống<a>
    </div>
    <script type="text/javascript">
    otab("hoctap_child");
    submn('study','study');
    submn('ebooks','ebooks');
    ctab();
    at_attach("hoctap", "hoctap_child", "hover", "y", "pointer");

    otab("thuthuat_child");
    submn('thu%20thuat%20blog','blog');
    ctab();
    at_attach("thuthuat", "thuthuat_child", "hover", "y", "pointer");

    otab("khampha_child");
    submn('khoa%20hoc','khoa học');
    ctab();
    at_attach("khampha", "khampha_child", "hover", "y", "pointer");

    otab("giaitri_child");
    submn('chuyen%20la','chuyện lạ');
    submn('truyen%20cuoi','truyện cười');
    submn('relax','thư giãn');
    submn('xe','xe độ');
    submn('artists','nghệ sĩ');
    submn('scandal','scandal');
    ctab();
    at_attach("giaitri", "giaitri_child", "hover", "y", "pointer");

    otab("hinhanh_child");
    submn('picture','all pic');
    submn('my%20photo','my photo');
    ctab();
    at_attach("hinhanh", "hinhanh_child", "hover", "y", "pointer");

    otab("truyen_child");
    submn('truyen%20ngan','truyện ngắn');
    ctab();
    at_attach("truyen", "truyen_child", "hover", "y", "pointer");

    otab("cuocsong_child");
    submn('nghe%20thuat%20song','nghệ thuật sống');
    submn('loi%20khuyen','lời khuyên');
    submn('love','tình yêu');
    ctab();
    at_attach("cuocsong", "cuocsong_child", "hover", "y", "pointer");
    </script>



    + Thay đổi các nhãn và tên các menu theo như blog của bạn.

    Bạn nên đặt menu này ở trên head là đẹp nhất, nếu blog của bạn nào chưa có tạo thủ thuật "Thêm tiện ích"vào phần header thì có thể xem ở đây.

                                                                                                                thuthuatblog.com
                                                                                                             chỉnh sữa bởi xuân nam
    CÁCH 2

    ☼ Bắt đầu thủ thuật

    1. Đầu tiên đăng nhập vào blog của bạn
    2. Vào bố cục chọn chỉnh sửa HTML
    3. Chèn code bên dưới vào sau thẻ <head>
    <style type='text/css'>
    html .jqueryslidemenu{height: 1%;}
    </style>

    <script src='http://traidatmui-tips.googlecode.com/files/jquery.min.js' type='text/javascript'/>
    <script src='http://traidatmui-tips.googlecode.com/files/drop_menu.js' type='text/javascript'/>


    4. Save template lại
    5. Bây giờ bạn hãy thêm 1 HTML/Javascript và dán code bên dưới vào
    <style>
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background:#153E7E; /* màu nền của menu*/
    width: 100%;
    }

    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }

    .jqueryslidemenu ul li a{
    display: block;
    background:#15317E; /* màu nền của thư mục chính*/
    color: white; /*màu text thư mục chính*/
    padding: 8px 10px;
    border-right: 1px solid #778;
    text-decoration: none;
    }

    * html .jqueryslidemenu ul li a{
    display: inline-block;
    }

    /*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: #ff0066; //màu cchữ các menu
    }*/

    .jqueryslidemenu ul li a:hover{
    background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
    color: white; /*màu text khi rê chuột*/
    }

    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }

    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }

    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }

    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }

    .jqueryslidemenuz ul li ul li a:hover{
    background: #eff9ff;
    color: black;
    }

    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }

    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }</style>

    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="#">Cuộc sống</a></li>

    <li><a href="#">Học tập</a></li>

    <li><a href="#">Thủ thuật</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul></li>

    <li><a href="#">Giải trí­</a></li>

    <li><a href="#">Blogspot</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
    <ul>
    <li><a href="#">Sub Item 3.1.1.1</a></li>
    <li><a href="#">Sub Item 3.1.1.2</a></li>
    <li><a href="#">Sub Item 3.1.1.3</a></li>
    <li><a href="#">Sub Item 3.1.1.4</a></li>
    <li><a href="#">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul> </li> </ul></li>

    <li><a href="#">Vườn thơ</a></li>

    <li><a href="#">Hình ảnh</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    </ul></li>

    <li><a href="#">Download</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Sub Item 2.2</a></li>
    </ul></li>


    </ul><br style="clear: left" />
    </div>


    Chỉnh code:
    - Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
    - Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
    - Code màu xanh dương là tên của những thư mục con cấp 1 của menu chính
    - Code màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
    - Code màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
    - Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục

    Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

    Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:
    <li><a href="#">Download</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Sub Item 2.2</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.2.2</a></li>
    </ul>
    </li>
    </ul></li>

    Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

    Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:
    <li><a href="#">Học tập</a></li>

    <li><a href="#">Công cụ</a></li>

    6. Save lại
    Tags:
    Author Image

    About Anhs

    1 nhận xét:

    1. Cơn Bão Khởi Nghiệplúc 20:06 17 tháng 5, 2013

      Kinh thiệt. Mình làm theo cách 1 thì blog bị die luôn. xem blog thì bị trỏ về tên miền khác. May là mình test trên blog thử nghiệm.

      Nếu muốn cung cấp cho cộng đồng tin tức tốt thì đừng có làm hại người ta chứ. Có ngày quả báo.

      Trả lờiXóa

    Đăng ký: Đăng Nhận xét ( Atom )

    Post Top Ad

    Author Details

    Post Bottom Ad