Heey my lovers, como estão? Hoje vou ensinar vocês à fazerem esse menu no seu blog:
Vá em Design > Editar HTML > Ctrl + F e procure por ]]></b:skin> > Cole acima disso
esse código:
.menu a {
margin-right: 144px;
background: #B3E1CF; /* Cor das caixinhas */
border-left: 6px double #458B74; /* 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: #fff; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #458B74; /* Borda em hover */
}
margin-right: 144px;
background: #B3E1CF; /* Cor das caixinhas */
border-left: 6px double #458B74; /* 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: #fff; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #458B74; /* Borda em hover */
}
Salve e vá para Layout > Adicione um Gadget
HTML/Javascript e nele coloque esse código:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4V7nfQtFmAFZZcNHsUI8a7g3G1QDk2S5keVdRcmREclmrxtfcFB8cAghAQXW8n07iL0oW2lEDRJMV8H8Pm15u10LPVxaKXG57-G9oYOb3B5mVsJc8DMtwdHMa2XpNkBh-_t3Nk_kKchQA/s1600/menu.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>
<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>
Onde está escrito URL você colocar a url da página e em Link
coloca o Nome da página. Prontinho, agora é só ver se tá tudo certo, e salvar.
Gabi, como faz para personalizar os gadgets tipo o seu?
ResponderExcluirbjss
Flor, eu já fiz um post ensinando isso, tá aqui: http://depoimentoseperfis-prontos.blogspot.com.br/2012/05/como-separar-os-gadgets-do-blog.html. É o segundo tutorial desse link, fica igualzin!! Beijos minha linda!
ExcluirObrigada Fofa!
ExcluirNda amr!
ExcluirOi flor, aceita afiliação ?
ResponderExcluirLink do blog : http://menina-fashio.blogspot.com.br
Siim siim, me coloca nos seus afiliado, ai eu te coloco nos meus!
ExcluirAs minhas barrinhas só ficaram os nomes , não ficaram com fundo !Me ajuda ?
ResponderExcluiroooi , eu usei o layout pronto e não sei como o link1 link2 link3 , se puder me ajudar fico muito agradecida ! ^.~
ResponderExcluirSe quiser dar uma olhadinha o meu blog e esse ~~ > http://diaryofsea.blogspot.com.br/
Oi ^^ Eu Comecei a seguir seu blog agora pouco e sinceramente amei ! você é otima explicando.. coisas que eu não entendi em outro blog , você conseguiu me fazer entender de uma forma simples ^^ obrigada.. eu só tenho uam pequena pergunta, a imagem ali do lado do menu tem como mudar? :3
ResponderExcluir