Quanto mais navegável for o seu blog mais tempo os visitantes permanecerão nele. Neste sentido, a colocação de um menu fixo no topo do blog com os links mais necessários aos visitantes, como "home", "contato", "sobre", pode vir a converter muitos visitantes fortuitos em fiéis leitores do seu blog.
Para adicionar o menu no seu blog siga o tutorial abaixo:
1. No painel da sua conta blogger clique na guia Modelo » Editar HTML » Prosseguir;
2. Quando abrir a tela de edição de código abra a ferramenta de busca do seu navegador digitando as teclas Ctrl+F ou F3 e procure por:
<body>
<style type='text/css'>
#topmenu {
height: 45px;
position: fixed;
top: 0;
left: 0;
z-index: 95469148;
background: #F1F1F1;
width: 100%;
border-width: 1px 0;
border-style: solid;
border-color: #EBEBEB;
border-bottom: 3px solid gainsboro;
-moz-box-shadow: 0px 6px 30px #c9c9c9;
-webkit-box-shadow: 0px 6px 30px #c9c9c9;
box-shadow: 0px 6px 30px #c9c9c9;
}
#topmenu {
height: 45px;
position: fixed;
top: 0;
left: 0;
z-index: 95469148;
background: #F1F1F1;
width: 100%;
border-width: 1px 0;
border-style: solid;
border-color: #EBEBEB;
border-bottom: 3px solid gainsboro;
-moz-box-shadow: 0px 6px 30px #c9c9c9;
-webkit-box-shadow: 0px 6px 30px #c9c9c9;
box-shadow: 0px 6px 30px #c9c9c9;
}
#topmenu ul {
padding-top: 1px;
color: #555;
margin-top: 8px;
}
padding-top: 1px;
color: #555;
margin-top: 8px;
}
.topmenuativo a:link {
color: #c60;
}
color: #c60;
}
#topmenu li {
list-style-type: none;
display: inline;
color: #555;
cursor: pointer;
line-height: 26px;
text-align: center;
font-size: 14px;
font-weight: bold;
}
list-style-type: none;
display: inline;
color: #555;
cursor: pointer;
line-height: 26px;
text-align: center;
font-size: 14px;
font-weight: bold;
}
#topmenu li a {
color: #555;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
text-decoration: none;
padding-left: 26px;
}
color: #555;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
text-decoration: none;
padding-left: 26px;
}
#topmenu li a:hover {
color: #C60;
-webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
text-decoration: none;
}
</style>
<div id="topmenu">
<ul>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
</ul>
</div>
color: #C60;
-webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
text-decoration: none;
}
</style>
<div id="topmenu">
<ul>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
<li><a href="LINK">ITEM</a></li>
</ul>
</div>
4. Configure o menu substituindo os itens destacados de acordo com a sua necessidade. Onde está na cor verde coloque o link. Onde está em vermelho coloque o nome do seu link. Para ampliar o menu basta replicar a linha de código referente ao link (<li><a href="LINK">ITEM</a></li>).
Nenhum comentário:
Postar um comentário
Comentários ofensivos serão apagados!!!