Menu DropDown 1 cấp cho blogspot Style 7

Về cơ bản Style này giống Style 6 tuy nhiên đổi màu khác để các bạn lựa chọn được nhiều hơn.

Demo for Post

☼ 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ẻ  ]]></b:skin> .

#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JFQfGjGWcWs5v_AQWFeUQ3vehYrGWQLvWBd_grq3xkIBkE-JwodRVCQ9AummteJ0Fs00UURiDSqxQZiCBI7ZFmRSxVbBut6eEPp2WkRTzRII66r5l4GvTTyr_bUIqyJ-My6SfSqIq9Ht/s1600/menu-namkna-blogspot.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
}

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

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

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzsUxVBOimkDOVzfw0TCJhjocednNHS_uDZ4oBKqkuvw8Bu1jJ21_lRrHQejrEwMiMN6EAu5ELRLAsL88wCiMaCSUVcMiJYR5rtEgwMGZEvPH4sW9tC0kIbSvtfPBgfNJR6pot8zG73El/s1600/menuhov-namkna-blogspot.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

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

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

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JFQfGjGWcWs5v_AQWFeUQ3vehYrGWQLvWBd_grq3xkIBkE-JwodRVCQ9AummteJ0Fs00UURiDSqxQZiCBI7ZFmRSxVbBut6eEPp2WkRTzRII66r5l4GvTTyr_bUIqyJ-My6SfSqIq9Ht/s1600/menu-namkna-blogspot.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzsUxVBOimkDOVzfw0TCJhjocednNHS_uDZ4oBKqkuvw8Bu1jJ21_lRrHQejrEwMiMN6EAu5ELRLAsL88wCiMaCSUVcMiJYR5rtEgwMGZEvPH4sW9tC0kIbSvtfPBgfNJR6pot8zG73El/s1600/menuhov-namkna-blogspot.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

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

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

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

6- Lưu lại Lưu mẫu

7- Thêm 1 HTML/Javarscrip và dán vào (hoặc chèn vào trước thẻ  </header> .)

<div id="foxmenucontainer">
<div id="menu">
<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>
<li><a href="#" title="#">About</a></li>
<li><a href="#" title="#">WebDesign</a>
<ul>
<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="#">Subscribe</a></li>
<li><a href="#" title="#">Register</a></li>
<li><a href="#" title="#">Contact</a></li>
</ul>
</div>
</div>

Sau đó bấm Lưu 

- Lưu ý: Nếu không hiển thị Menu con thì các bạn tìm đoạn CSS ở bước 4 như sau:

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

Thay thế thành:

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
z-index:800;
}

Chúcthành công!

Theo: Namkna.blogspot.com

Share this

Author : Net Xây Dựng

Related Posts