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

By Unknown - Thứ Hai, 15 tháng 4, 2013 - No Comments

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/AVvXsEjpYYEs-lorBRiivkNRXQXMve4CN7CF1y-bJI1IHD0DSQGFiRuZOlV6nbMZJPQ5cTBSh6jilFYDcO8m-S6oEJ2QT7lDgZnqTGU8sxHUcocCy-REqKdPvEOvj03pWPJbJry-OAdieQBbLNUT/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/AVvXsEjpYYEs-lorBRiivkNRXQXMve4CN7CF1y-bJI1IHD0DSQGFiRuZOlV6nbMZJPQ5cTBSh6jilFYDcO8m-S6oEJ2QT7lDgZnqTGU8sxHUcocCy-REqKdPvEOvj03pWPJbJry-OAdieQBbLNUT/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

Tin mới nhất

tudonghoa68.com

Khoá Chuột Phải

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

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

Share This:

Post Tags:

Blog Tự Động Hóa 68

Social Links:

Mời bạn bình luận cho bài viết " Tạo menu đẹp mắt cho sidebar "