Um menu é sempre útil no blog. Mas vamos combinar que aquele menu tradicional do Blogger não dá, né? Então em vim trazer aqui um tutorial com dois modelos de menu. Você escolhe o que achar melhor. O primeiro modelo é do Go Imagine e o segundo do Blog Elaine Gaspareto.
Modelo 1
/* Menu do blogger personalizado by Go Imagine - goimagines.blogspot.com----------------------------------------------- */.tabs-inner {margin: 1em 0 0;padding: 0;margin-top: 0px; /*para subir ou descer o menu troque o número*/margin-left: 0px; /*para afastar o menu para esquerda ou direita troque o número*/}.tabs-inner .section {margin: 0;}.tabs-inner .widget ul {padding: 0;background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;}.tabs-inner .widget li {border: none;}/*Estado normal do menu*/.tabs-inner .widget li a {display: inline-block;padding: 1em 1.5em;color: #fff; /*cor da fonte*/font: $(tabs.font); /*fonte*/border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/line-height: 5px;padding: 12px;background: #BFCED5; /*cor do fundo normal*/margin-left: 8px; /*espaço entre os botões*/}/*Estado hover e selecionado*/.tabs-inner .widget li.selected a,.tabs-inner .widget li a:hover {position: relative;z-index: 1;background: #8BC2C9; /*cor do fundo hover/selecionado*/color: #fff; /*cor da fonte*/border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/line-height: 5px;padding: 12px; /*espaçamento interno*/}
Personalize as cores e fontes da maneira que achar melhor. Depois de feito, salve o modelo (não esqueça de fazer o backup antes). Vá em Layout, adicionar um gadget e aplique o gadget páginas. Configure como desejar e salve.
MODELO 2
O Resultado será igual a esse:
Primeiro repita o mesmo processo, mas ao invés de substituir, apague (menos o /* Tabs). Após isso vá em Layout e adicione o gadget HTML/JavaScript. Cole lá o código a baixo:
<style type='text/css'>
#autonav {
position:relative;
top:0px;
right:0px;
left:0px;
z-index:9999;
margin:0px 0px;
padding:0px 0px;
font:normal 12px Arial,Sans-Serif;
border-bottom:2px solid #333;
-webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);
-moz-box-shadow:0px 1px 7px rgba(0,0,0,.4); box-shadow:0px 1px 7px rgba(0,0,0,.4);}
#autonav ul {
margin:0px 0px;padding:0px 0px;height:30px;
background-color:#FFC0CB;}
#autonav ul li {list-style:none;display:inline;
float:left;margin:0px 0px;padding:0px 0px;position:relative;}
#autonav ul li a {display:block;line-height:30px;
height:30px;overflow:hidden;margin:0px 0px;
padding:0px 15px;border-left:1px solid #ccc;
border-right:1px solid #ccc;text-decoration:none;
text-shadow:0px -1px 0px rgba(0,0,0,.4);color:white;
font-weight:none;}
#autonav ul li a:hover {background-color:#979696;}
#autonav ul ul {position:absolute;width:260px;height:auto; top:100%;
left:0px;z-index:99;background-color:#FFC0CB;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,.7);
box-shadow:0px 1px 3px rgba(0,0,0,.7);
overflow:visible !important;display:none;}
#autonav ul ul:before {content:"";width:0px;height:0px;
border:7px solid transparent;border-bottom-color:#FFC0CB;
position:absolute;top:-14px;left:24px;}
#autonav ul ul li {display:block;float:none;
margin:0 5px 5px 5px;}
#autonav ul ul li a { border:none;color:#424242;}
#autonav ul ul ul {top:0px;left:100%;}
#autonav li:hover > ul {display:block;}
#autonav ul.json-dropdown { overflow:hidden;}
#autonav ul.json-dropdown li {cursor:pointer;display:block;padding:7px 10px;
margin:0px 0px;overflow:hidden;}
#autonav ul.json-dropdown li a { line-height:14px; height:auto !important;padding:0px 0px;}
#autonav ul.json-dropdown li a:hover {text-decoration:underline; background:transparent;}
#autonav li ul li a:hover,#autonav li ul.json-dropdown li:hover {background-color:#EEECEC;}
#autonav ul.json-dropdown img.rp-thumb { padding:0px 0px;outline:none;border:2px solid #ccc;display:block;float:left;margin:0px 10px 0px 0px;width:30px;height:30px;}
#autonav .subposts span,#autonav .subcomments span {
font-family:Verdana,Arial,Sans-Serif;color:#ffffff;
font-size:11px;}
#autonav .wide {width:500px;}
#search{
position:relative;
float:right;
top:-6px;
left:20px;
}
#search-box {
width:300px;
height:23px;
border:10px;
text-align:center;
background:#fff ;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5,
cmtext = "Comentários",
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipH-NBqeCYi73u4GwypKIo1IT1b9IlPkxMYCFtnn0TV4BjKbUMWL0RUnE60VeCJmWe2-GRpJU9Qu2EqGe9m5c3VVA3s25PIHh8XFXxB2ZEhinatqDtejOEVivCDqmRc5XY2mbL7y2eFac/s1600/no-imagen-chica.gif",
numcomment = 5,
cmsumm = 100;
//]]>
</script>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/menucomempost.js' type='text/javascript'></script>
<nav id='autonav'>
<ul>
<li><a href='ENDEREÇO DO SEU BLOG'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA_ynH8LhZHJ4MV1wZX0uJ9KsdYNwb3ltsCIFTQTVwXsoKAst5lIWXPIWUQCyLhvgBVnPoTV93080c1MleNIIzpneTjenazOzk8qg3A-PLRk_OYgb7uufLkY002TMoP5lzFebWm1u3v8Q/s1600/53-house.png" alt="home" height="25" width="24" /> </a></li>
<li><a href='LINK'>NOME DA ABA</a></li>
<li><a href='LINK'>NOME DA ABA</a></li>
<li><a href='LINK'>NOME DA ABA</a></li>
<li><a href='LINK'>NOME DA ABA</a></li>
</ul>
</nav>
Substitua os termos em CAPSLOCK e salve.
Prontinho gente, espero que tenha ajudado. Semana que vem posto mais um tutorial.
- Bia
Nenhum comentário:
Postar um comentário