Menu ngang tap 2 cột cho blogger

Được viết bởi: Unknown 0 nhận xét

Demo
Demo Online

+Hôm nay mình giới thiệu cho bạn 1 thủ thuật blogger, Đây là một menu ngang rất đẹp trong đó các tab phụ của nó được hiển thị trong hai cột và cũng được thực hiện với CSS,
+"Lợi thế" của thủ thuật blogger này, đó là các tab phụ khi sắp xếp trong hai cột không phải là rất dài, do đó nó sẽ được gọn gàng và không gian ít hơn,

+Đăng nhập Blogger -- Mẫu -- Chỉnh sửa HTML
 - Tìm ]]></b:skin> và thêm vào trước nó đoạn code sau

/* Share vusteven.info
----------------------------------------------- */
#menucol {
width:961px; 
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px; 
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #FF4444;
text-align:left;
display: block;
text-decoration: none;
padding:10px 36px 11px;
font:bold 11px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6; 
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzHN3OOKBfqjCzxNstAzupTV9Ij04MC3G5SZ8W-RqIFJQtsor96TOa_Cp3hyI8FU26uHHDjtY_l-NtuyjxA5Y_mIjVPnuMozhvPQ2Vz3XD-NjagTTGkSNXlAvJ7HZ0RX3XLBz0UigAEBw/s1600/arrow_white.gif); 
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important; 
width: auto;
}
#top li ul, #top ul li {
width:300px;
} 
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1; 
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; 
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333; 
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important; 
}

+ Thay thanh menu của bạn bằng đoạn code sau

<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5WzC0UcembU3weEUMihAkZXcgc3SRnmwB5L6vOstusXemjN7QDMElqmftICOf3mZl1BJqLkD2Yq4EelYoAE6dHaKaZfUR3RnEZvgaKaeyZFFm1NC57Ge3urpNAdjrCLYN5m8A6k7yFro/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='http://www.vusteven.info/'>Tab 1 Title Here</a></li>
<li><a href='http://www.vusteven.info/'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.1</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.2</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.3</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.4</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.5</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.1</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.2</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.3</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.4</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.5</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.1</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.2</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.3</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.4</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.5</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.6</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.7</a></li>
<li><a href='http://www.vusteven.info/'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://www.vusteven.info/'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

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