modelo de menu horizontal para blog

Modelo de menu horizontal ,
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"















Twitter Facebook Google Plus LinkedIn RSS Feed Email