Menu colchete (2 Modelos)

Olá bunnie's, hoje trago dois modelos de menu utilizando colchete, é possível ver o exemplo no link mais abaixo. Com uma boa edição os menus ficam realmente lindinhos, achei melhor não edita-los para melhor entendimento de vocês. Créditos infinitos vão para o blog Chuva de HTML, ok? Então vamos lá!

Brevia do efeito

Modelo (uma coluna)

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por ]]></b:skin>, assim que achar acima dele cole o código abaixo:

Códigos

.colchete { /*barra do fundo*/
width: 400px; /*largura da barra do fundo*/
background: #ede0dd;
box-shadow: inset 0px 0px 2px #e3cdc8;
border-radius: 3px;
padding: 2px 2px 2px 2px;
line-height: 15x;
float: center;
text-align: center;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete:hover { /*barra do fundo ao passar o mouse*/
background: #ebcfce;
box-shadow: inset 0px 0px 2px #e0b9b8;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete a { /*fonte do menu*/
color: #fff!important;
font-size: 11px;
font-family: Muli;
text-decoration: none;
text-shadow: 1px 1px 1px #e0b9b8;
}
.colchete a::before, .colchete a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s,
opacity 0.2s;
-moz-transition: -moz-transform 0.3s,
opacity 0.2s;transition: transform 0.3s,
opacity 0.2s;
}
.colchete a::before { /* troque o símbolo da chaveta da terceira linha se quiser*/
margin-right: 2px;
content: '{';
-webkit-transform: translatex(20px);
-moz-transform: translatex(20px);
transform: translatex(20px);
}
.colchete a::after { /* troque o símbolo da chaveta da terceira linha se quiser*/
margin-left: 2px;
content: '}';
-webkit-transform: translatex(-20px);
-moz-transform: translatex(-20px);
transform: translatex(-20px);
}
.colchete a:hover::before,.colchete a:hover::after,.colchete a:focus::before,.colchete a:focus::after {
opacity: 1; -webkit-transform: translatex(0px); -moz-transform: translatex(0px);transform: translatex(0px);
}

2. Vá em Layout e abra um novo Gadget Java/Script e dentro cole:

Códigos

<div style="image-align: center; margin-bottom: 0px; margin-left: 0px; margin-top: 0px;">
<br />
<nav class="colchete">
<a href="/">NOME</a>
<a href="/">Nome</a>
<a href="/">nome</a>
<a href="/">nomE</a>
<a href="/">NOME</a>
</nav></div>

Salve e prontinho, veja o resultado e altera como desejar. Só cuidador com apartes que não compreenda, para não desregular ele. 

Modelo 2 (duas colunas)

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por ]]></b:skin>, assim que achar acima dele cole o código abaixo:

Códigos

.colchete {
width: 226px;
background: url(http://4.bp.blogspot.com/-75dh3LRbiFM/VaUTlhv0LmI/AAAAAAAAe5Y/tv5xkeVWSjk/s1600/marker1B.png) repeat-X;
padding: 2px 2px 2px 2px;
line-height: 15x;
float: center;
text-align: center;
border-bottom: 1px dotted #000;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete:hover {
background: url(http://2.bp.blogspot.com/-LIfqFsrnHDk/VaUTlgoNmPI/AAAAAAAAe5c/QTZJcB4cW7I/s1600/marker2B.png) repeat-X;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete a {
color: #800080;
font-size: 11px;
font-family: Muli;
text-decoration: none;
text-shadow: 1px 1px 1px #DDA0DD;
}
.colchete a::before, .colchete a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s,
opacity 0.2s;
-moz-transition: -moz-transform 0.3s,
opacity 0.2s;transition: transform 0.3s,
opacity 0.2s;
}
.colchete a::before {
margin-right: 2px;
content: '{';
-webkit-transform: translatex(20px);
-moz-transform: translatex(20px);
transform: translatex(20px);
}
.colchete a::after {
margin-left: 2px;
content: '}';
-webkit-transform: translatex(-20px);
-moz-transform: translatex(-20px);
transform: translatex(-20px);
}
.colchete a:hover::before,.colchete a:hover::after,.colchete a:focus::before,.colchete a:focus::after {
opacity: 1; -webkit-transform: translatex(0px); -moz-transform: translatex(0px);transform: translatex(0px);
}
.colchete2 {
border-bottom: 5px solid #000;
width: 226px;
background: url(http://2.bp.blogspot.com/-LIfqFsrnHDk/VaUTlgoNmPI/AAAAAAAAe5c/QTZJcB4cW7I/s1600/marker2B.png) repeat-X;
padding: 2px 2px 2px 2px;
line-height: 15x;
float: center;
text-align: center;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete2:hover {
background: url(http://4.bp.blogspot.com/-75dh3LRbiFM/VaUTlhv0LmI/AAAAAAAAe5Y/tv5xkeVWSjk/s1600/marker1B.png) repeat-X;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete2 a {
color: #800080;
font-size: 10px;
font-family: Muli;
text-decoration: none;
text-shadow: 1px 1px 1px #DDA0DD;
}
.colchete2 a::before, .colchete2 a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s,
opacity 0.2s;
-moz-transition: -moz-transform 0.3s,
opacity 0.2s;transition: transform 0.3s,
opacity 0.2s;
}
.colchete2 a::before {
margin-right: 2px;
content: '{';
-webkit-transform: translatex(20px);
-moz-transform: translatex(20px);
transform: translatex(20px);
}
.colchete2 a::after {
margin-left: 2px;
content: '}';
-webkit-transform: translatex(-20px);
-moz-transform: translatex(-20px);
transform: translatex(-20px);
}
.colchete2 a:hover::before,.colchete2 a:hover::after,.colchete2 a:focus::before,.colchete2 a:focus::after {
opacity: 1; -webkit-transform: translatex(0px); -moz-transform: translatex(0px);transform: translatex(0px);
}

2. Vá em Layout e abra um novo Gadget Java/Script e dentro cole:

Códigos

<div style="image-align:center; margin-left:0px; margin-top:-30px; margin-bottom: 0px;">
<nav class="colchete">
<a href="/">HOME</a>
<a href="/">About</a>
<a href="/">Perfil</a>
<a href="/">Faq</a>
<a href="/">Tags</a>
</nav>
</div>
<div style="image-align:center; margin-left:0pxpx; margin-top:0pxpx; margin-bottom: -10px;">
<nav class="colchete2">
<a href="/">Arquivo</a>
<a href="/">Temas</a>
<a href="/">Mapa</a>
<a href="/">Lays</a>
<a href="/">Créditos</a>
</nav></div>

Salve e prontinho!