Menu fofo

 

O exemplo de menu é esse:

Como podem ver, o menu possui bordas diferentes quando está em estado normal e quando está em estado hover. Isso é crazy border.

Gadget de seguidores personalizado

 Hoje trouxe um tutorial bem legal, o seu gadget e seguidores personalizado.

Só poesias tristes

 Só poesias tristes voce tem postado com tristes palavras, tem me matado como se

eu

fosse do mundo, o único vilão. Em versos me condena, me fere, me maldiz em poemas, e só

eu

, que só maldade te fiz não se lembra, que tenho dor no coração... Essa saudade, que em minha alma avança que por voce, a longos dias não descança atirou-me em desespero, na mesa de um bar. Com essa dor que não encontro a cura que me atira, no centro da desventura fico perguntando, por que fui te encontrar?

Angústia, solidão, tudo a minha vida ofusca que faz-me partir numa louca busca que amenize um pouco esse meu sofrer. Gostaria, que nesse momento me ouvisse e que também só um pouquinho sentisse o quanto dói, essa vontade de morrer...

 Não sei se voce ainda esta sofrendo mas saiba, que alguém esta bebendo tentando a todo custo, aliviar essa dor... Agora...Estou por seu nome chamando ja muito bêbado, estou delirando tudo pelo que sinto por voce, o amor..

Menu deslizante

Oie pessoas que estão lendo isso!
Muito lindo o novo layout, mas só eu que estou vendo tudo errado? Tomara que não, porque no print o blog ficou muito lindo! Bem, eu usei um tutorial do Chá com anjos um menuzinho, que eu personalizei e eu achei que ficou legal,
Gostaram? Siga com o tuto!

Menus de afiliados

Modelo 01: Gradiente azul com hover.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg1:hover{
background: rgb(208,219,228);
background: -moz-linear-gradient(top,  rgba(208,219,228,1) 17%, rgba(184,203,219,1) 18%, rgba(227,234,239,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(17%,rgba(208,219,228,1)), color-stop(18%,rgba(184,203,219,1)), color-stop(100%,rgba(227,234,239,1)));
background: -webkit-linear-gradient(top,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
background: -o-linear-gradient(top,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
background: -ms-linear-gradient(top,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
background: linear-gradient(to bottom,  rgba(208,219,228,1) 17%,rgba(184,203,219,1) 18%,rgba(227,234,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#e3eaef',GradientType=0 );
}
.amg1 a{
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 #b4c4d1;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg1"><a href="/" title="Título">Vaga</a></div>

Modelo 02: Modelo rosinha com borda e hover.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg2{
padding: 4px;
background: #f3dddb;
border: 1px solid #e7c8c5;
box-shadow: inset 0 0 4px #e8c3c0;
border-radius: 20px;
margin-top: 2px
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
display: inline-block;
height: 16px;
text-decoration: none;
color: #fff;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
text-align: center;
text-transform: uppercase;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg2:hover{
border-radius: 1px;
background: #f3dddb;
border: 1px solid #eccfcd;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg2 a{
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 #e6c4c2;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg2"><a href="/" title="Título">Vaga</a></div>

Modelo 03: Rosa com borda outline, gradiente e sem hover.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg3{
padding: 4px;
background: rgb(255,211,220);
background: rgb(255,211,220);
background: -moz-linear-gradient(top,  rgba(255,211,220,1) 0%, rgba(255,239,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,211,220,1)), color-stop(100%,rgba(255,239,242,1)));
background: -webkit-linear-gradient(top,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
background: -o-linear-gradient(top,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
background: linear-gradient(to bottom,  rgba(255,211,220,1) 0%,rgba(255,239,242,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd3dc', endColorstr='#ffeff2',GradientType=0 );
border: 1px solid #ffc5d1;
outline: solid 1px #ffeff2;
outline-offset: -2px;
box-shadow: inset 0 0 4px #ffcad5;
margin-top: 2px
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
display: inline-block;
height: 16px;
text-decoration: none;
color: #fff;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
text-align: center;
text-transform: uppercase;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg3 a{
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 #ffbecb;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg3"><a href="/" title="Título">Vaga</a></div>

Modelo 04: Cor escura que eu não sei o nome simples.

 

01. Copie o código do quote abaixo e cole acima de ]]></b:skin>

.amg4{
padding: 4px;
background: #e4c9dc;
border: 1px solid #cfa6c2;
box-shadow: inset 1px 1px 0 #efdeea;
margin-top: 2px
margin-left: 0px;
margin-right: 0px;
margin-bottom: 3px;
display: inline-block;
height: 16px;
text-decoration: none;
color: #fff;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
text-align: center;
text-transform: uppercase;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg4:hover{
background: #a67898;
border: 1px solid #966587;
box-shadow: inset 1px 1px 0 #a67898;
995c86
}
.amg4 a{
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px #cb9ebd;
}
.amg4 a:hover{
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px #995c86;
}

02. Agora, copie o código abaixo e cole em seu gadget.

<div class="amg4"><a href="/" title="Título">Vaga</a></div>

Menu para tags

 

 Hoje trouxe-vos alguns modelos de menu para tag, para quem usa e gosta ~eu, eu e eu,  amo demais x3x~ creio que vá gostar de personalizá-los e usá-los, não é? ^u^ Se quiser mudar as cores, fiquem à vontade, mudem pequenas coisas ao vossos gostos.

OBS: Os primeiros blocos dos menus que estão nos prints estão em hover.

Modelo 01 - Copie o código abaixo e cole acima de ]]></b:skin>

Código do menu para tags, modelo um (01). Clique aqui para expandir!

Modelo 02 - Copie o código abaixo e cole acima de ]]></b:skin>

Código do menu para tags, modelo dois (02). Clique aqui para expandir!

Modelo 03 - Copie o código abaixo e cole acima de ]]></b:skin>

Código do menu para tags, modelo três (03). Clique aqui para expandir!

Modelo 04 - Copie o código abaixo e cole acima de ]]></b:skin>

Código do menu para tags, modelo quatro (04). Clique aqui para expandir!

Agora para ter o código do gadget dos modelos acima, basta colar esse código abaixo em um gadget de HTML/Java Script, dando as devidas modificações (serve para todos os modelos).

<div class="dd1"><a href="/">Título</a></div></div>
<div class="dd2"><a href="/">Título</a></div></div>