Tutorial Menu Stretch

Ola amores!! trouxe um tuto para vocês , Espero que gostem.é um menu que fica na imagem,eu aprendi ele no Crazy Girl . Preview.

.

Vá no seu HMTL e procure pela tag ]]></b:skin> e acima dela, cole o código:

.menu {position: absolute; margin-top: 27px;}

.menu a { display: block;  background: #513f3c; width: 9px; height: 10px; padding: 8px; overflow: hidden; color: #513f3c; font-family:'Ubuntu Mono', sans-serif; font-size: 13px; margin-bottom: 3px; -webkit-transition-duration: 0.40s; text-transform: uppercase; -moz -moz-border-radius-top-right: 12px; border-bottom-right-radius: 12px; border-top-right-radius: 12px;  line-height: 11px; }

.menu a:first-letter {color: #fff;}

.menu a:hover {width: 160px; height: 10px; background: #fff; color: #513f3c; padding: 8px; overflow: hidden; border-top: none;  -webkit-transition-duration: 0.40s; opacity: 0.7; }

.menu {position: absolute; margin-top: 27px; }

.menu a { display: block;  background: #513f3c; width: 9px; height: 10px; padding: 8px; overflow: hidden; color: #513f3c; font-family:'Ubuntu Mono', sans-serif; font-size: 13px; margin-bottom: 3px; -webkit-transition-duration: 0.40s; text-transform: uppercase; -moz -moz-border-radius-top-right: 12px; border-bottom-right-radius: 12px; border-top-right-radius: 12px;  line-height: 11px; }

.menu a:first-letter {color: #fff;}

.menu a:hover {width: 160px; height: 10px; background: #fff; color: #513f3c; padding: 8px; overflow: hidden; border-top: none;  -webkit-transition-duration: 0.40s; opacity: 0.7; }

Para colocar o menu no seu Blog, adicione um gadget HTML/Javascript e cole o seguinte código nele:

<div class="menu">

<a href="LINK">♥ Home</a> 

<a href="LINK">♥ Sobre</a> 

<a href="LINK">♥ Goodies</a> 

<a href="LINK">♥ F.A.Q</a> 

<a href="LINK">♥ Afiliados</a> 

<a href="LINK">♥ Algo a mais</a></div>

<img style="border: 1px solid #fff;" src="http://4.bp.blogspot.com/-E6ZgCKh60sE/ULTYpSoy1nI/AAAAAAAACD0/A1TvX4871YM/s320/ll.jpg" />