Chia sẻ thủ thuật - Giải trí tổng hợp Vũ Steven
Bài mới
Loading...
Thứ Hai, 2 tháng 12, 2013

Menu ngang tap 2 cột cho blogger

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/AVvXsEgUBMKtvnIzjfhdsfW4ydW37TPuT95FsuV21Et8x6C3hXJT-Kbaa3aOu2QfjZQoJg8-bM9FGeVOfg1jJ_wCxWlRx8upzJc6pyvLHR_K4KSlGtAXWp1cJ6ucNrGrJJBrShFjDdOI5CW_FpE/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/AVvXsEjpwVupO4fJLFFYuarX2lBmBKqlMEyIUf07tY4RtxABT83qqJsuEqzMpphPZzqMEzDz2QGPNhfQ-FFvr20n83_g1zhqU47XCR7C-iw49gAVbIdDR8cgqpQvLcUb_3fo_v-pDrTJ_eWdjxw/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

0 nhận xét:

Đăng nhận xét

Tin nhanh
Press Esc to close
Liên hệ:Y!M: Vusteven.info
Phone: 0947.01.01.27
Design by Vũ Steven
Published by free Template
Powered by Blogger
Copyright © 2013 Dome vusteven New7