Menu Seta

Exemplo(Passe o mouse):

Tutorial e Dicas

Banner

É 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('http://1.bp.blogspot.com/-gzr1qJDWDfk/UQlFFQkXHdI/AAAAAAAAFQU/URYTUZ3LbD0/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('http://2.bp.blogspot.com/-dCeVuQeHWIo/UQlFFUXPkAI/AAAAAAAAFQY/NZ9qKPMJuoQ/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('http://2.bp.blogspot.com/-E0eu0lePoUQ/UQlHqgEfhvI/AAAAAAAAFQk/lo2yAQI6I1o/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.