7 de fev de 2013

Box de boas vindas

Oi! Olha eu aqui de novo. w/ Hoje vim ensiná-los a montar um box de boas vindas para vocês.  Aquelas 'caixas' que geralmente contém um pequeno texto de apresentação no início da lista dos gadgets. Não entendeu o que eu quis dizer? Veja um exemplo abaixo:

Clique aqui para visualizar o exemplo em uso.
Faça aquele trajeto que você já conhece bem: Painel de Controle > Modelo > Editar HTML e procure por ]]></b:skin> e acima dele cole o seguinte código:
/** 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; }
Salve e logo em seguida vá até Layout e adicione um novo gadget > HTML/Javascript e cole 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>
Espero que vocês tenham gostado. Super beijo. 

5 comentários:

  1. Adorei o tutorial,irei usar no próximo layout!

    ~ Beeijos!

    revolutionstartshere-oficial.blogspot.com.br

    ResponderExcluir
  2. nossa que layout incrivel, nova seguidoraaa o/
    amei esse box de boa vindas vou usar o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  3. Esse é um tutorial muito interessante, apesar de nunca ter usado uma caixa de boas vindas em meu blog, acho que fica muito legal em blogs que visito.

    Dream High~

    ResponderExcluir
  4. Oiie,bem legal,eu estava procurando faz tempo!! Mas depois eu uso,agora estou com pressa,tem uma tag pra você lá no blog,espero que responda!

    garotachique-official.blogspot.com

    Espero que responda!!!

    ResponderExcluir
  5. Oii muito interesante o tutorial , vou usar , no novo layout do blog !!!!!
    Entra lá no meu adoraria sua visita !
    Bjs seguindo akiii
    Pamela
    As mina Pira !!

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.