Mostrando postagens com marcador tutorial. Mostrar todas as postagens
Mostrando postagens com marcador tutorial. Mostrar todas as postagens
modelo de menu horizontal para blog
Modelo de menu horizontal ,
para blogger:
tutorial:
cole acima ]]></b:skin>
de
o código:
▼
Salve!
Querendo que o menu fique acima do cabeçalho do template:
Depois,
em editar html...
...encontre por
<header>
e
acima de
<header>
cole:
▼
para blogger:
tutorial:
cole acima ]]></b:skin>
de
o código:
▼
/* Menu */
#menu {
height: 70px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 140px;
height: 45px;
padding-top: 25px;
text-transform: lowercase;
text-decoration: none;
text-align: center;
letter-spacing: -2px;
font-size: 30px;
color: #B8BD52;
}
#menu a:hover {
color: #1A1A1A;
background: url(endereço de sua imagem) no-repeat;
}
Salve!
Querendo que o menu fique acima do cabeçalho do template:
Depois,
em editar html...
...encontre por
<header>
e
acima de
<header>
cole:
▼
Optando por colocar
o código do menu
no
"lay-out" do template,
...clica em
"adicionar
gadget"...
...em seguida:
copie
cole
o código,
▼
<div id='menu'>
<ul>
<li class='first'><'URL DO LINK'>Home</a></li>
<li><a expr:href='URL DO LINK'>LINK</a></li>
<li><a expr:href='URL DO LINK'>LINK2</a></li>
<li><a href='URL DO LINK' title='título DO LINK'>título DO LINK</a></li>
<li><a href='URL DO LINK' title='título DO LINK'>título DO LINK</a></li>
</ul>
</div>
</div>
confira, um modelo, clicando
a seguir :
►demontração◄
Querendo que o menu fique abaixo do cabeçalho (header)
no template do blog :
copie e cole acima de </header> o código:
▼
<div id='menu'>
<ul>
<li class='first'><'URL DO LINK'>Home</a></li>
<li><a expr:href='URL DO LINK'>LINK</a></li>
<li><a expr:href='URL DO LINK'>LINK2</a></li>
<li><a href='URL DO LINK' title='título DO LINK'>título DO LINK</a></li>
<li><a href='URL DO LINK' title='título DO LINK'>título DO LINK</a></li>
</ul>
</div>
</div>
----------------------------------------------------------------------------------------
...</header> se quiser seu menu abaixo do cabeçalho,
... <header> se quiser seu menu acima do cabeçalho,
►exemplos
de modelos
de imagem:
Você escolhe os seus modelos
de imagens
preferidos!
Estes são os meus:
1.
URL da imagem: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3DojgPZdwOOS2KPreaZPJO5UG49H-cv5bcLTHpNy2ETO2CIuGI5gJeK13fdfGL108jkfkMOgfCt4wb2JCTMw35rQIGWSgPhPqxWxl3-IiRqfctHvtWhmo8qp-lV8JLVB0YkN_q8rAxGG/s320/naturaazul03.jpg"
2.
URL da imagem= " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8VyizGy6XbfFxu4WnIbNqW8ZA643K_s4id0OZt94gJAYU5KJjS3mFeSax0_tUA3QkS4508IrooxuykGC5Of6pMz7ocmJqrce4YkBBgZf00HZotMKCx0SLlcE_ceYcmsCNoT_U36qNRoC/s320/naturaferrugem03.jpg"
Assinar:
Postagens (Atom)