15/09/2012

Tutorial: Menu de barrinhas

||

Yo meus amados visitantes! Trago mais um menuzinho kawai para vocês!!! Menu de barrinhas aquele de ladinho que eu acho muito simpley mas e muito fofo. Eu nunca o usei mas pretendo usar no meu proximo layout, então vamos lá. Quer dar ima olhadinha? Ve aqui!

Bem você já sabe né? Aquele blá blá blá todo. Vá ate seu HTML e procure por

]]></b:skin>

Achou? Agora em cima dessa tag cole o proximo codigo

.menu a {
margin-right: 144px;
background: #FDE0E0; /* Cor da caixinha */
border-left: 6px double #E50000; /* Borda */
font-family: Palatino linotype; /* Fonte */
font-style: italic; /* Estilo da fonte */
text-transform:lowercase; /* Estilo da fonte - uppercase: maísculas e lowercase: minúsculas */
display: block; /* Exibir em bloco */
font-size: 10pt; /* Tamanho da fonte */
color: #FF0000; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #E50000; /* Borda em hover */


Agora vai lá em seu layout o corpo do seu blog e adicione um gadget de HTML/Javascript, dentro dele coloque esse codigo 

<img src="http://1.bp.blogspot.com/-08EwezqxEjA/UFUpPsgnhKI/AAAAAAAAZ7s/_adD7o2wSj4/s1600/222.png" align="right" />
<div class="menu">
<a href="URL1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 3</a>
<a href="URL 4">Link 4</a>
<a href="URL 5">Link 5</a>
<a href="URL 6">Link 6</a>
<a href="URL 7">Link 7</a>
</div>

Eu usei uma imagem no tamanho de 132x173 pxls


2 comentários:

  1. Tchi... bem triste não dar pra por este menu com cabeçalho eliminado... :c
    Pq sempre que coloco o HTML do menu, o cabeçalho aparece.. ;-;

    ResponderExcluir
    Respostas
    1. Estranho eu já usei sem o cabeçalho...

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram