Efeito Diamond

Efeito por Chá com Anjos

Live Preview do menu

*ele vai ficar assim muito embaixo se for em uma postagem, por isso dê preferência a sidebar.

1- No HTML do seu blog, procure por ]]></b:skin>, Acima, cole:

.navca{text-align: center;text-decoration: none;font-family: Verdana, Arial;}.navca a{text-transform:uppercase!important;padding: 5px 5px 5px 5px;display: inline-block;background:#d976a3;margin-top: 5px;font-size: 8px;color: #fff;font-weight: bold;display:block;width:50px;margin-left:-60px;position:relative;top:200px;-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;background-color: rgba(155, 159, 202, 0.80);}.navca a:hover{width:55px;margin-left:-65px;}.border{-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

2- Em um Gadget de HTML/JavaScript, cole:

<div class="navca"><a href="http://www.blogger.com/">LINK</a><a href="http://www.blogger.com/">LINK</a><a href="http://www.blogger.com/">LINK</a><a href="http://www.blogger.com/">LINK</a><a href="http://www.blogger.com/">LINK</a></div><img class="border" src="URL DA SUA IMAGEM" width="ALTURA DA SUA IMAGEM" />

Entendendo:

Atenção para essa parte! Edite somente o que eu falar aqui!

.navca{text-align: center;text-decoration: none;font-family: Verdana, Arial;

Essa parte se refere a posição do texto, decoração (sublinhado, etc.) e a fonte. Mude de acordo com seu gosto.

.navca a{text-transform:uppercase!important;

Faz com que todas as letras fiquem maiúsculas.

background:#d976a3;

Cor de fundo do menu. Edite de acordo com seu blog.

font-size: 8px;color: #fff;font-weight: bold;

Tamanho da fonte, cor da fonte e tipo de fonte. No caso, a fonte está em negrito. Mude de acordo com seu gosto.

background-color: rgba(155, 159, 202, 0.80);

Cor de fundo. No caso, a cor de fundo está em rgba, para saber qual o código da sua cor em rgba, use esse site aqui, que fará a conversão para você: WebCalc. O primeiro número (155) é o vermelho (Red), o segundo é o verde (Green) e o terceiro azul (Blue), o quarto número se refere a opacidade, no caso é 0.80, mude de acordo com seu gosto. Dica: use uma cor ligeiramente mais escura ou mais clara que a cor normal do menu. 

.border{-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;

Se refere a borda da imagem que ficará ao lado do menu. Mude como quiser.