Olá meus amores, depois que postei ontem o Tutorial de como personalizar o Footer do post a pedido de uma leitora, recebi varios pedidos de novos tutoriais...
E a pedidos de algumas leitoras, vim trazer para voces um tutorial bem simples, os creditos vao para Dicas para Blogs.
Confiram como ficou no blog de teste: DEMONSTRAÇÃO
Entre na pagina layout > adicionar gadget > html/javascript e cole o código completo.
<style type="text/css">
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #9F0;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform:capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px
solid #FFF;
border-right: 1px solid #FFF;
background-color: #555;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #FC6;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:
0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereço do blog'>Home</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>
Procure por:
/* Tabs
E Abaixo dele selecione todo codigo até antes de /* Headings e substitua por
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
Altere as cores de acordo com o tema do seu blog, confira aqui uma Tabela de cores Online
Cores dos Botões do Sub-Menu
#nav li a:hover, #nav li a:active - cor do menu quando abre o sub menu.
#nav li a, #nav li a:link, #nav li a:visited - Cores dos botões do sub menu
#nav li a:hover, #nav li a:active - Cores dos botões do submenu quando o mouse está sobre eles.
Colocar ou Alterar os links do Sub-Menu
<li><a href='#'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
Na primeira linha você deve somente alterar o texto LINK1. Esse é o texto que aparece no MENU e onde tem LINK sao as abas do submenu.
Onde tem escrito: url da pagina substitual pelo link da pagina determina.
Bom, espero que voces tenham gostado!
Se voce deseja um layout personalizado para seu blog contrate meu serviço!
Confira AQUI meu portifólio.
