Thứ Hai, 15 tháng 4, 2013

Tạo menu đẹp mắt cho sidebar

Hôm nay mình JM(quangvietmkt) xin giới thiệu đến các bạn 1 mẫu menu cho sibar giống như mẫu  Blog mình đang sử dụng!!! 

















Bước 1: Đăng nhập Blog
Bước 2: Chon bố cục
Bước 3 : Thêm tiện ích HTML/JavaScrip

    Các bạn dán đoạn code dưới vào :

    <style type="text/css">
    /* Made By AllBlogTools.com */
    #ddblueblockmenu{
    border: 1px solid #000000;
    border-bottom-width: 0;
    width: 100%;
    }

    #ddblueblockmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: normal 100% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }

    }
    #ddblueblockmenu a{
    display: block;
    padding: 3px 0;
    padding-left: 9px;
    width: 94%; /*94% minus all left/right paddings and margins*/
    text-decoration: none;
    color: #010D6B; /* Menu Font Color */
    background-color: #fff; /*màu tiên ích */
    border-bottom: 1px solid #90bade;
    border-left: 7px solid #1958b7;
    list-style-type:none;
    }

    #ddblueblockmenu a:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDCTJT-cbgWK3JJTfO14lVK1U3ZocH-5Ck3vMLaXRkLJfP2dTelkIDeLM4gCwHQr8xsJ1VeM7jNGQFvCyqPQCsEs2lP-TD59YEwxarcmNQkdA0Nf9mjleNrL5BGjj_j6IIavJO7NOjfwX/s1600/nameicon_300037.gif) no-repeat left center;
    text-indent:20px; /* dòng lệnh này sẽ làm dịch chuyển các kí tự đi 20px */
    }
    #ddblueblockmenu a {
    display: block;
    padding: 5px 3px 5px 10px;
    font-weight:bold;
    background-color: ;
    border-top: 1px solid #efefef; /* code tạo dòng ngăn cách giữa các menu*/
    }
    * html #ddblueblockmenu a{ /*IE only */
    width: 94%; /*IE 5*/
    width: 94%; /*94% minus all left/right paddings and margins*/
    }
    #ddblueblockmenu a:hover {
    background-color: #E7E099; /*màu khi di chuột*/
    border-left-color: #A204C1;
    }
    #ddblueblockmenu div.menutitle{
    color: #CA12E6; /* Title Font Color */
    border-bottom: 1px solid black;
    padding: 1px 0;
    padding-left: 5px;
    background-color: #24EDEA;
    font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }
    /* Made By AllBlogTools.com */
    </style>
    <div id="ddblueblockmenu">

    <ul class="navigation">
    <li><a href="http://quangvietmkt.blogspot.com/search/label/Affiliate%20Marketing" class="menu">AFFILIATE MARKETING</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/Internet%20Marketing" class="menu">INTERNET MARKETING</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/Khoa%20h%E1%BB%8Dc%20-c%C3%B4ng%20ngh%E1%BB%87" class="menu">KHOA HỌC-CÔNG NGHỆ</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/H%E1%BB%87%20%C4%90i%E1%BB%81u%20h%C3%A0nh" class="menu">THỦ THUẬT HĐH</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/C%C3%A1ch%20ki%E1%BA%BFm%20ti%E1%BB%81n%20tr%C3%AAn%20twitter%2Ffacebook" class="menu">KIẾM TIỀN TRÊN FACEBOOK/TWITTER</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/Ki%E1%BA%BFm%20ti%E1%BB%81n%20v%E1%BB%9Bi%20Blog%2FWebsite" class="menu">KIẾM TIỀN TRÊN BLOG/WEBSITE</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/TH%E1%BB%A6%20THU%E1%BA%ACT%20WEB" class="menu">THỦ THUẬT WEB</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20office" class="menu">THỦ THUẬT OFFICE</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/T%E1%BB%95ng%20h%E1%BB%A3p" class="menu">TỔNG HỢP SEO</a></li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/Gmail" class="menu">THỦ THUẬT GMAIL</a></li>
    <li><a href="#" class="menu">THỦ THUẬT BLOGSPOT</a>
    <ul class='children'>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Menu'>MENU</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Comments' title='nhận xét'>COMMENTS</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Ph%C3%A2n%20Trang' title='Phân trang'>PHÂN TRANG</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Popular%20posts' title='bài xem nhiều'>POPULAR POST</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Random%20post' title='bài viết ngẫu nhiên'>RANDOM POST</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Recent%20post'>RECENT POST</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Related%20posts' title='bài viết liên quan'>RELATED POST</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Read%20more'>READ MORE</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/CSS%20HTML'>CSS HTML</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Color' title='Mã màu'>COLOR</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/JQuery' title='thủ thuật JQ'>JQUERY</a></li>
    </ul>
    </li>
    <li><a href="http://quangvietmkt.blogspot.com/search/label/Cu%E1%BB%99c%20s%E1%BB%91ng" class="menu">KỸ NĂNG-CUỘC SỐNG</a></li>
    <li><a href="hhttp://quangvietmkt.blogspot.com/search/label/Ebook" class="menu">EBOOK</a></li>
    <li><a href='Your-Link-Here' title='TTGT'>THƯ GIÃN-GIẢI TRÍ</a>
    <ul class='children'>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/S%C3%A1ng%20t%E1%BA%A1o'>SÁNG TẠO</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Truy%E1%BB%87n%20tranh'>TRUYỆN TRANH</a></li>

    <li><a href='http://quangvietmkt.blogspot.com/search/label/Truy%E1%BB%87n%20c%C6%B0%E1%BB%9Di'>TRUYỆN CƯỜI</a></li>
    <li><a href='http://quangvietmkt.blogspot.com/search/label/Truy%E1%BB%87n%20c%C6%B0%E1%BB%9Di%20Vova'>TRUYỆN CƯỜI VOVA</a></li>

    <li><a href='http://quangvietmkt.blogspot.com/search/label/Th%C6%A1%20con%20c%C3%B3c'>THƠ CON CÓC</a></li>

    </ul>
    </li>
    </ul>

    </div>





    •  Các bạn muốn thêm 1 trang :

     <li><a href="link liên kết" class="menu">Tên link</a></li>

    • link màu đỏ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDCTJT-cbgWK3JJTfO14lVK1U3ZocH-5Ck3vMLaXRkLJfP2dTelkIDeLM4gCwHQr8xsJ1VeM7jNGQFvCyqPQCsEs2lP-TD59YEwxarcmNQkdA0Nf9mjleNrL5BGjj_j6IIavJO7NOjfwX/s1600/nameicon_300037.gif)
             link của icon/ảnh có kích thước phù hợp tùy theo bạn

    Chúc các bạn thành công

    Không có nhận xét nào:

    Đăng nhận xét