Menu Up e Menu Colchete ~

Olá muffins goxtosos de chocolate ♡♡+.ﾟ(￫ε￩*)ﾟ+.ﾟ Boa noite! Tudo na santa e mesmice paz? E ai, a maioria já pegou férias? Eu entrei no dia 3 e irei voltar só dia 3 de agosto, até lá quero aproveitar e postar o máximo que eu conseguir. Antes estava bem difícil e me deixava bem triste pois além do blog me distrair ele tirava meu tédio e todo meu stress. Ficar sem postar me deixava quase doente hahaha Mentira, doente é exagero u.u Mas sinto que tenho uma obrigação de ajudar meus leitores e isso me deixa muito feliz muito mesmo（♥￫ｏ￩♥）Na verdade não é uma obrigação para mim, é algo prazeroso sabe? Por isso ainda estou por aqui ♥

Uma leitora me pediu que eu postasse menus, não deu preferência de como queria então eu mesma tomei a liberdade e já aproveitei e uni o útil ao agradável pois uma outra leitora me pediu para eu fazer o tutorial do menu que uso em meu blog pessoal. Espero que gostem e que ajudem muitos, dei uma olhada e vi que faltam menus assim em postagens, até aqui no blog mesmo tem poucas opções de menus. Quando quiserem algo em especial não se esqueçam de e pedir na ask hein? Prometo fazer o mais rápido possível certo? Beijocas e até mais (*˘︶˘*).｡.:*♡

PREVIEW (´ε｀ )♡

Vá até modelo cliquem em editar hmtl e dentro procure por: ]]></b:skin> Acima dele cole o seguinte código:

MODELO UP:

/*Menu up by gnmh*/

.backup {display: inline-block;float: center;line-height:26px; height:28px; width:937px;

background:#fff; -webkit-border-radius: 1px;

-moz-border-radius: 1px;border-radius: 1px;

}

.topoup a{background:#; border:solid 1px #fff; margin:5px;padding:10px;font-family: cambria, sans-serif;

font-size: 12px;text-transform:uppercase;text-align: left;letter-spacing: 1px;

font-weight: 300;color:#D1DDDF;text-decoration: none;

-webkit-transition: all 2s ease;

-moz-transition: all 2s ease; -o-transition: all 2s ease;

transition: all 2s ease;

}

.topoup a:hover{background: #ffffff;

background: -moz-linear-gradient(top,  #ffffff 0%, #f3fbfd 35%, #e0f6fa 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(35%,#f3fbfd), color-stop(100%,#e0f6fa));

background: -webkit-linear-gradient(top,  #ffffff 0%,#f3fbfd 35%,#e0f6fa 100%);

background: -o-linear-gradient(top,  #ffffff 0%,#f3fbfd 35%,#e0f6fa 100%);

background: -ms-linear-gradient(top,  #ffffff 0%,#f3fbfd 35%,#e0f6fa 100%);

background: linear-gradient(to bottom,  #ffffff 0%,#f3fbfd 35%,#e0f6fa 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0f6fa',GradientType=0 );

border:solid 1px #DCE4E7;margin:5px;font-family: cambria, sans-serif;font-size: 12px;text-transform:uppercase;text-align: left;letter-spacing: 1px;

font-weight: 300;color:#fff;text-decoration: none;

text-shadow: 1px 1px 1px #BACFD3;padding:10px;-webkit-transition: all 1s ease;

-moz-transition: all 1s ease; -o-transition: all 1s ease;

50% {-webkit-transform: rotate(-4deg);}

75% {-webkit-transform: rotate(3deg); }

100% {-webkit-transform: rotate(0deg); }

}

LINKS:

<div style='image-align:center;margin-left:px;margin-top:-10px;'>

<div class="topoup">

<div class="backup">

<center>

<a href="LINK">Nome</a>

<a href="LINK">Nome</a>

<a href="LINK">Nome</a>

<a href="LINK">Nome</a>

<a href="LINK">Nome</a>

<a href="LINK">Nome</a>

<a href="LINK">Nome</a>

</center>

</div></div>

</div>

MODELO COLCHETES:

.colchete {

width:934px;

background:#E4EFF1;

padding:2px 2px 2px 2px;

height:15;

line-height:15x;

float:center;

text-align:center;

}

.colchete a {

color: #fff; 

font-size: 13px; 

font-family:cambria; 

text-decoration:none;

text-transform:uppercase;

text-shadow: 1px 1px 1px #C0D7DC;

}

.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);

}

LINKS:

<div style='image-align:center;margin-left:px;margin-top:20px;'>

<nav class="colchete"> 

<a href="LINK"target="_blank">Nome</a>

<a href="LINK"target="_blank">Nome</a>

<a href="LINK"target="_blank">Nome</a>

<a href="LINK"target="_blank">Nome</a>

<a href="LINK"target="_blank">Nome</a>

</nav>

</div>