Menubar rollover Css para blogger

Olá e bem-vindo ao Mult-focos. Temos aqui um menubar rollover Css para blogger, este menu tem um visual e efeito bacana porém muito simples de adicionar em seu blog.

Encontre outros modelos de Menus clicando AQUI

Demonstração
Como adicionar no seu blog

• Copie o código CSS abaixo 
•  Vá ao painel do Blogger->modelo->editar HTML->use Ctrl+F e localize:]]></b:skin>
• Acima desta tag cole o código CSS.

 #menu12 {
 position:relative; 
 display:block;
 width:350px;}
#menu12 ul {
 list-style-type: none;
 width: 900px;}
#menu12 ul li {
 display: block;
 float: left;
 width: 150px;
 height: 60px;}
#menu12 a, #menu a:visited {
 display: block;
 width:150px; 
 height:60px; 
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8HMniMwNDZNZ9oJqaqmnFDO3Em-GvDMN9s7ePezzvd-DUufthM_HTUQNDW1raj_WeaSCOvqxc22jASIrikTPk036rXJHGQM3wj3nFScyNWEjNj6t-216EE0uHFmCVezrRPhhkfMsf_pYj/w200-h180-no/nav_block.jpg); 
 background-position:left top; 
 background-color:transparent; 
 text-align:center; 
 color:black; 
 line-height:60px; 
 text-decoration:none; 
 font-family:arial, sans-serif; 
 font-weight:bold; 
 margin-top:5px;
font-size:18px;}
#menu12 a:hover {
 background-position:left center; 
 line-height:60px; 
 overflow:hidden; 
 color:white;
}
#menu12 a#selected {
 background-position:left bottom; 
 line-height:60px; 
}
#menu12 a#selected:hover {
 color:white;
}

 

Próximo passo

• Ir para o painel do blogger->layout
• Clique em Adicionar um Gadget.
• Na janela Adicionar um gadget->HTML/JavaScript.
• Copie o código JS abaixo e cole-o dentro da caixa de conteúdo.
• Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo.
• Clique no botão Salve (canto superior direito).

 <!--MenuBar início-->
<div id="menu12">
<ul>
<li><a href="AQUI A URL" id="selected">Início</a></li>
<li><a href="AQUI A URL">Item 1</a></li>
<li><a href="AQUI A URL">Item 2</a></li>
<li><a href="AQUI A URL">Item 3</a></li>
<li><a href="AQUI A URL">Item 4</a></li>
<li><a href="AQUI A URL">Item 5</a></li>
<li><a href="AQUI A URL">Item 6</a></li>
</ul>
</div><!--MenuBar fim-->

 

Configurações

• No próprio código tem as explicações necessárias.

Isto é tudo.

---