24 tháng 6, 2012

Menu DropDown 1 cấp cho blogspot Style 6



Superb CSS Menudrop cho Bloggers - Menu DropDown 1 cấp cho blogspot Style6
Nếu chưa thử áp dụng menu này, mình chắc chắn sẽ rất nhiều người cho rằng chỉ có j Query mới có thể tạo ra các menu có hiệu ứng mượt mà và hấp dẫn. Tuy nhiên với menu này thì tất cả chỉ có thể nói là "không gì là không thể". Bạn hãy xem Demo và cảm nhận khả năng tùy biến vượt trội của CSS.


Cách tiến hành:


   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  </head> .
<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTiUwrI5lhV7p_52breZObQqnQfWebEhBnaAq0wQliHDa7LUCK8xrbISxa70DlwA9VhRx4VaugnopuZxkbwGb1eojHSCy6hp5IIRFKkFotLTfbouCc8_GDIXW2WVimRle5qS_Ke2xV2EH/s1600/catmenu-namkna-ngoctra.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BwJzhYhuGK5sdiv_dxZ_5wiHb2x_BjJHegbtCTIvECnGTgRn3STxCS_aCaA-0UizrtxaG1eK8o6By_ewjWO_44NYZFqKWZuOA3RMMn7GXsV1jJDEOHjJd9ZN7aLgf8AgWPQdYb_F7tDB/s1600/catmenuhov-namkna-ngoctra.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTiUwrI5lhV7p_52breZObQqnQfWebEhBnaAq0wQliHDa7LUCK8xrbISxa70DlwA9VhRx4VaugnopuZxkbwGb1eojHSCy6hp5IIRFKkFotLTfbouCc8_GDIXW2WVimRle5qS_Ke2xV2EH/s1600/catmenu-namkna-ngoctra.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BwJzhYhuGK5sdiv_dxZ_5wiHb2x_BjJHegbtCTIvECnGTgRn3STxCS_aCaA-0UizrtxaG1eK8o6By_ewjWO_44NYZFqKWZuOA3RMMn7GXsV1jJDEOHjJd9ZN7aLgf8AgWPQdYb_F7tDB/s1600/catmenuhov-namkna-ngoctra.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>
6- Lưu lại
7- Thêm 1 HTML/Javarscrip và dán vào (hoặc Thêm đoạn code bên dưới vào trước thẻ  </header> .)
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='#' title='#'>Home</a></li>
<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>

<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>

<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>

<li><a href='#' title='#'>News</a></li>

<li><a href='#' title='#'>Google</a>
<ul class='children'>
<li><a href='#' title='#'>Yahoo</a></li>
<li><a href='#' title='#'>MSN</a></li>
</ul>
</li>

<li><a href='#' title='#'>About</a></li>
<li><a href='#' title='#'>Contact</a></li>
<li><a href='#' title='#'>PrivacyPolicy</a></li>
</ul>
</div>
</div>
Chúc thành công!
Chủ đề:

0 nhận xét:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets