Tutorial - Box de Welcome

Tumblr_mhodjl8ayu1qm59ufo1_500_large

Boa Tarde leitores. Como me foi pedido pela Carol, vim postar como se faz aquele box que uso no gadget "Status". Achei-o no blog da Emily, então os créditos são se lá. Esse box, eu já havia visto um parecido no Too Kawaii, mas no layout antigo. Ela usava-o para o status, também. 
Esse box, se ajusta de acordo com o tamanho da sua barra lateral. Ele ficará um pouco menor que a mesma para, justamente, não fique estranho. Além de útil, ele é fácil de adicionar e personalizar. Vamos ao tutorial? Visualize a caixinha aqui ou aqui.

1- Eu realmente recomendo que "adicione" a box, primeiramente. Fica mais fácil de personalizar e ver como está ficando. Por experiencia própria, realmente acho que deveriam adicionar o gadget antes. E é exatamente por esse motivo que vou começar o tutorial de trás pra frente.
Então, para começar, vá em Layout - Adicionar Gadget - HTML/Javascript. Agora, cole nele o código abaixo:
<div class="boxwelcome">Oi! Escreva seu texto aqui nessa caixa, ela se ajustará automaticamente ao tamanho da sidebar do seu <a href="/">blog</a>. Blá, blá, blá.</div>
Marquei em itálico as partes mais importantes a se modificar, retirando a mensagem. Tipo? O link, e só. Não há muita coisa a se personalizar, que não estejam completamente expostas
Ok, mas agora vamos a personalização, por que estou meio que sem saber o que falar dessa parte acima. Go!

2- Vá em Modelo - Editar HTML e procure por b:skin, é o segundo que nos interessa agora. Acima dessa tag, cole:

/** by extras-placefame **/
.boxwelcome {
background: #f5f5f5; /** cor do fundo **/
-webkit-box-shadow: inset 1px 1px 1px 0 #c7c7c7;
-moz-box-shadow: inset 1px 1px 1px 0 #c7c7c7;
box-shadow: inset 1px 1px 1px 0 #c7c7c7;
font-size:85%; /** tamanho da fonte **/
font-family:georgia; /** fonte do texto **/
text-shadow: 0px 1px #DCDCDC; /** sombra do texto **/
color:#707070; /** cor do texto **/
margin:5px; /** espaçamento externo **/
padding:8px; /** espaçamento interno **/
text-align: justify; /** texto alinhado **/
-webkit-border-radius: 5px; /** bordas arredondadas, caso queira retirá-las apague essa e as duas linhas seguintes **/
-moz-border-radius: 5px;
border-radius: 5px;
}
/** links do box **/
.boxwelcome a {
background-color:#EEE0E5; /** cor do fundo do link **/
color:#707070; /** cor do texto **/
text-shadow:0px 1px #fff;  /** sombra do texto **/
padding: 2px;
padding-left: 4px;
padding-right:4px;
text-transform:uppercase;
font-size:80%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-duration:.50s; }
.boxwelcome a:hover {
background-color:#CDC1C5; /** cor do fundo do link ao passar o mouse **/
color:#fff; /** cor do link ao passar o mouse **/
text-shadow:0px 0px #fff;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-duration:.50s; }
Bom "negritei" as partes que acho que vocês devem mudar. Esse não é o meu código, se querem saber. É o original. Se quiser do jeito que está na imagem/link, é só deixar daquele modo.

Espero que tenham entendido a minha explicação. Caso não, vá até o tutorial original ,e veja a da Emily. Que está 2.500 vezes melhor que a minha.
/Ana

2 comentários: