Menu estilo Fita (faixa) para blog | Quero Dicas | Tutoriais para seu blogs


Menu estilo Fita (faixa) para blog


Menu estilo Fita (faixa) para blog
Olá meus lindos. Sei que estou em dívidas com vocês, mais estou cheias de trabalho e, infelizmente, não está sobrando muito tempo para fazer postagens, peço desculpas a todos.

Para não ficar com muitas dividas, hoje resolvi compartilhar um menu estilo fita ou faixa se preferir.

É claro, que você poderá modificar as cores e fonte, para combinar com seu blog. Não há a necessidade de entrar no html do blog para a instalação, basta inseri-lo em html/javascript.

Veja na imagem como ele fica:


  INSTALANDO

1 - Acesse o Painel do seu Blog

2 - Vá em "Layout" , "Adicionar um Gadgets" e em "HTML/Javascript"
 

3 - Cole o código abaixo e salve e o posicione em baixo do seu cabeçalho.

<style>
.Menu-ribmenu span {
background:#A81B6A; /* Cor */
display:inline-block;
font-family:verdana; /* fonte */
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.Menu-ribmenu a:hover span {
background:#DB7093; /* Cor */
margin-top:0;
}
.Menu-ribmenu span:before {
content: "";
position:absolute;
top:3em;
left: 0;
border-right:0.5em solid #9B8651; /* Cor */
border-bottom:0.5em solid #fff; /* Cor */
}
.Menu-ribmenu span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651; /* Cor */
border-bottom:0.5em solid #fff; /* Cor */
}
.Menu-ribmenu a:link, .Menu-ribmenu a:visited {
color:#fff; /* Cor */
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.Menu-ribmenu:after, .Menu-ribmenu:before {
margin-top:0.5em;
content: "";
float:left;
border: 1.5em solid #A81B6A; /* Cor */
}
.Menu-ribmenu:after {
border-right-color:transparent;
}
.Menu-ribmenu:before {
border-left-color:transparent;
}
</style>

<div class="Menu-ribmenu">
<a href="/">Home</a>
<a href="/">Anuncie </a>
<a href="/">Saiba mais </a>
<a href="/">Meus Produtos</a>
<a href="/">Como Comprar</a>
<a href="/">Novidades</a>
<a href="/"> Parceiros</a>
<a href="/"> Contato</a>

</div>



  PERSONALIZANDO

CORES
Troque as cores, que mais se encaixa com seu blog, onde eu deixei ao lado de cada código descrito dentro dele.

MENU
No final do código onde esta:

    <a href=''><span> Home </span></a>
    <a href='/' ><span> Anuncie </span></a>
    <a href=''><span> Saiba mais </span></a>
    <a href=''><span> Meus Produtos </span></a>
    <a href=''><span> Como Comprar </span></a>
    <a href=''><span> Novidades </span></a>
    <a href=''><span> Parceiros </span></a>
    <a href=''><span> Contato </span></a>

Você deverá trocar os locais em vermelho pelo nome que deseja (este ficará no menu)
Onde está em rosa, você deverá colocar a URL (endereço) a ser direcionado.

Pronto! 

Gostou? Então deixe seu comentário, ele é muito importante para mim. Beijinhos
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.