OArthur.com Seu site de tecnologia e suportes em geral
Menu personalizado que desliza junto com a página para seu blog
Veja agora, como criar um menu de páginas para seu blog.
Para facilitar ao seu visitante a procura de artigos e tudo mais que sua página possa oferecer.
Realizando os passos abaixo, você obtém uma barra de páginas que desliza quando o visitante desce com a página.
Assim, você coloca toda atenção para o menu quando ele precisar de algo.
Não coloque qualquer imagem, ou código que viole termos ok?
Você pode colocar qualquer página, como por exemplo aqui no OArthur.com uma opção de contato, uma de perguntas e respostas e por aí vai.
Os passos abaixo funcionam 100% em qualquer template no blogger, no qual não haja nenhuma modificação que afete as edições desse menu deslizante.
Testado no Firefox, Chrome, Opera e Internet Explorer.
Primeiro você deve fazer um backup do seu template, para evitar erros futuros,ok?
É assim:
Abra blogger.com > Clique sobre o nome do seu blog > Ao lado, escolha Modelo.
Agora, clique em fazer Backup/Restaurar lá em cima da página.
E faça o download do modelo completo.
Salve em um local seguro, pode ser em um pen drive, ou no seu HD.
Depois que salvou, feche a página de backup, e clique em ‘Agora no Blog’ a opção EDITAR HTML.
Faça as alterações abaixo:
Procure por: ]]></b:skin>
Logo acima dele, sem alterar o nome ]]></b:skin> cole:
Para copiar os códigos abaixo > VEJA AQUI <
/*************** MENU ***************/
#menupersonalizadoOArthur {
width: 100%;
height: 40px;
font-size: 13px;
font-family: georgia;
margin-top: 0px;
padding: 0;
background: #6FE76F;
position:fixed;
z-index:2000;
text-shadow: 1px 1px 1px #ccc;
}
#NavbarMenuleft {
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 270px;
font-size: 10px;
float: right;
margin: 10px;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
.search{
float: left;
text-align: center;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
border-radius:4px;
border: 2px solid #4c4c4c;
background:#2c2b2b;
text-align:center;
color:#6e6e6e;
font-size:12px;
width: 220px; /* largura caixa de pesquisa */
height: 20px;/* altura caixa de pesquisa */
margin-top: -10px;
margin-right: 5px;
}
.searchbut{
background: url(‘http://1.bp.blogspot.com/-Jx6l_ZbU0FQ/U0iqqrPitEI/AAAAAAAAKVo/3XJhJZj4Iwk/s1600/search.png’);
width:20px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
cursor: pointer;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #000;
display: block;
font-size: 15px;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 10px 15px 8px;
text-transform: uppercase;
}
#nav li a:hover, #nav li a:active {
color: #000;
margin: 0;
padding: 10px 15px 8px;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 7px;
border-bottom: 1px solid #959595;
border-left: 1px solid #959595;
border-right: 1px solid #959595;
background-color: #1c7bbb;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF;
padding: 7px 10px;
background-color: #1c7bbb;
}
#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;
}
Agora, procure agora por: </head> e logo abaixo dela, cole:
<div id=’menupersonalizadoOArthur ‘>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a href=’URL DA PÁGINA‘><b> Nome da página </b></a></li>
<li>
<a href=’URL DA PÁGINA‘><b> Nome da página </b></a>
</li>
<li>
</li>
<li><a href=’URL DA PÁGINA’><b> Nome da página </b></a></li>
<li><a href=’URL DA PÁGINA‘><b> Nome da página </b></a></li>
<li><a href=’URL DA PÁGINA‘><b>Nome da página</b></a></li>
</ul>
</div>
<div id=’NavbarMenuright’>
<script>
CÓDIGO AQUI DA PESQUISA PERSONALIZADA
</script>
<gcse:search/>
</div>
</div>
Pronto, aplique no blog.
Se quiser alterar a cor do fundo, procure por background: #6FE76F e altere o código.
Aqui um site legal para você obter os códigos das cores:
Na opção: CÓDIGO DA PESQUISA PERSONALIZADA, você deve por o script do mecanismo de pesquisa criado para ser exibido no canto da tela como aqui no OArthur.com
OArthur.com
OArthur.com