.

05 fevereiro 2013

Menu Seta

Tumblr_mho8t5fgym1s2pw4ro1_500_large


Exemplo(Passe o mouse):


É bem fácil de fazer, siga o tutorial:
Abra o HTML do seu blog e procure por: </head>, ACIMA dessa tag cole:
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'/>

Em seguida procure por ]]></b:skin> , ACIMA dele cole:

/* Menu Seta By B-Design-blog.blogspot.com */
.Seta {
display: block;
font-size: 20px; /* tamanho da fonte */
font-family: 'Iceland', cursive;
color: #000000; /* cor da fonte */
line-height: 14px; /* altura da linha, altere se quiser */
border-bottom: 2px solid #FFFFFF; /* cor, espessura e tipo da borda, altere se quiser */
text-indent : 5px;
vertical-align: middle;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJd7NWKMDJ-rFDkZ2PNfIzJtvns2cYfjuU8Vr4l9DJO0DQWHtTWpwUMAzYq4ap0aojUEP_q4OduvuxCWz_QoYxnBsJD0tZJcZrqgXYX2EdtXesoa7OeBr6u6Zix2Upbn5dq2JE55AxOJA/s1600/ba.png')no-repeat left; /* mini gif em estado normal */
padding-left: 20px; /* espaço entre a margem da esquerda, o mini gif e o texto */
padding-bottom : 2px; /* espaço entre a margem debaixo e o texto */
background-color: #E8E8E8;
}
.Seta:hover {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUKJYAImd64sSUUKo2J4MQadVBTi9Vkesuya7bYEzoTI9vt1rin5nHmUR_gC_uBS9pn8ug7sSLl-Ix_LwcEoz7gAeniqzIt8cL9Z1iE9y4soj96IBmpr__8NTXBM1OgodhXgvdKoslvvc/s1600/be.png')no-repeat left; /* mini gif em estado hover, quando o mouse passa sobre ele */
background-color: #F8F8FF;
-webkit-transition-duration: .90s;

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OYVdufeC-WO-J-Y9xlxT2491wcnBiOHCGXKsTRWXDzl086_Dk1p40NI2tDFzN0Ul2vfvg6YusCifYhD1G51AAUH2fi3up1XlVBRjKmg_xlF_yv3T2FbpmahGGM5cSOVRyuhNnX63-5Y/s1600/dgyf.png')no-repeat left;}

Depois vá em Layoute  crie um novo gadge HTML/JavaScript, dentro dele cole:
<div class="Seta">
<a href="LINK" target="_blank">NOME DOS LINK</a></div>

<div class="Seta">
<a href="LINK" target="_blank">NOME DOS LINK</a></div>

<div class="Seta">
<a href="LINK" target="_blank">NOME DOS LINK</a></div>

<div class="Seta">
<a href="LINK" target="_blank">NOME DOS LINK</a></div>

Prontinho! Oque acharam?Comentem.


2 comentários:

  1. Gostei muito do tutorial eu fique procurando ele um bom tempo mais não achei,quando usar dou os devidos créditos :)


    Aceita Afiliações ?

    ResponderExcluir
  2. Amei o tuutu liindo mesmo eu vou usar no meu blog e claro q devido aos creditos amore

    ResponderExcluir

Comente, critique, sugira, mas nunca se esqueça da educação!

.