Tutorial *s*

Olá tudo bem?

Como já faz um certo tempo que não posto os tutoriais, hoje farei um post dois em um. Irei ensinar como colocar o Blockquote igual a esse que uso aqui, e também irei ensinar a usar o menu Size que é esse que está sendo usado aqui no BSMP agora, o código de ambos foram pegos no Kawaii World - desde já créditos a ele - Vamos ao tuto?

Em seu HTML pesquise por: ]]></b:skin> acima da tag cole o código abaixo:

.post blockquote {
padding: 6px;
font-size: 8px; /* tamanho da fonte */
color: #fff; /* cor da fonte */
text-align: center;
font-family: PF Arma Five;
text-shadow: 1px 1px 0px #d47c85;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
background: #f3b1b8;
border-radius: 7px;
box-shadow: inset 1px 1px 0px #d47c85;
}
.post blockquote:hover {
background: #9d817e;
text-shadow: 1px 1px 0px #654340;
padding: 6px;
font-size: 8px; /* tamanho da fonte */
color: #fff; /* cor da fonte */
text-align: center;
font-family: PF Arma Five;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
border-radius: 2px;
box-shadow: inset 0px 1px 1px #654340;
}
@font-face {font-family: PF Arma Five;src: url('http://static.tumblr.com/hhfgqo5/6Dlmfpt2j/pf_arma_five.ttf');}

>> Menu Size:

~ PREVIEW ~

1- Em seu HTML pesquise por: ]]></b:skin> acima da tag cole o código abaixo:

.menusize {display : block;padding: 2px;background: #e0e0e0;text-indent : 5px;padding-left: 6px;vertical-align : middle;margin-bottom: 2px;-webkit-transition: all 0.60s;}.menusize:hover {padding-left: 15px;border-width: 1px;border-style: left;border-color: #f2bad2;box-shadow: inset 350px 0 0px 0 #f2bad2; -webkit-transition: all 0.30s;}

2- Salve, agora abra um Gadget HTML/JavaScript e cole o código a seguir:

<div class="menusize"><a href="www.seublog.com"> Link 1 </a></div><div class= "menusize"><a href="www.seublog.com">  Link 2 </a></div><div class= "menusize"><a href="www.seublog.com">  Link 3 </a></div><div class= "menusize"><a href="www.seublog.com">  Link 4 </a></div><div class= "menusize"><a href="www.seublog.com"> Link 5 </a></div><br />

3- Onde há www.seublog.com você deverá colocar o link do seu menu e onde há Link [1, 2, 3, 4, 5] você colocar o nome do menu. Depois é só salvar e prontinho >.<

Abraços♥