Quadro de avisos para blogs com efeito Houver | Quero Dicas | Tutoriais para seu blogs


Quadro de avisos para blogs com efeito Houver


Hoje eu trouxe para você, um quadro de avisos para colocar no seu blog. É um quadro bem simples, mais achei bem legal para você deixar recados para seus visitantes, logo no comecinho do seu blog.

Você poderá mudar as cores, colocar imagem, tanto no modo normal, quanto no estado houver, além de poder personalizar a borda.  No modo visualização, deixei 2 modos de criar um estilo. É só passar o mouse em cima, para ver a diferença e faça você o que preferir. Lembrando que não sou boa em construir imagens (na realidade terrível!), tenho certeza que você é muito melhor! E não esquecendo de informar, a base desse gadgets foi retirado do blog PlaceFame, só fiz algumas alterações. =D


Gostou? Então vamos! É muito simples.

  Instalando HTML

1 - Acesse o painel do seu blog

2 - Depois, vá em Modelo e Editar HTMl e procure por:

]]></b:skin>
 

3 - Acima dele, copie e cole o seguinte código:

 .boxwarning {
background: url('Coloque aqui sua imagem') repeat; /** imagem de fundo **/
margin: -1px; /** espaço externo **/
padding:8px; /** espaço interno **/
text-align:justify; /** alinhamento do texto **/
position: relative;
z-index:1;
overflow:auto;
height:120px; /** altura do quadro **/
width: 200px; /**Largura do quadro **/
font-size:16px; /** Tamanho da fonte **/
font-family: Arial; /** Estilo da fonte **/
border: 3px #DAA520 groove; /** espessura, cor e tipo da borda **/
-webkit-transition:0.3s;
color:#FFFF00; /** cor da fonte **/
font-weight: bold;/** negrito, se não quizer retire **/
}

.boxwarning:hover {
color:#ffffff; /** cor da fonte ao passar o mouse **/
border:2px #2f8ccd groove; /** espessura, cor e tipo da borda ao passar o mouse **/
background:#b1d3eb; /** cor de fundo ao passar o mouse **/
-webkit-transition:0.3s;
}
  
 


4 - Salve!

  Instalando Gadget

1 - Vá em Layout e clique em Adicionar Gadgets  

2 - Adicione o código abaixo, em HTML/Javascript

<div class="boxwarning">
ESCREVA SEU AVISO AQUI</div>
 


3 - Como já deve ter percebido, onde está escrito "ESCREVA SEU AVISO AQUI", será onde você escreverá o recado aos seus visitantes.

  Personalizando

Agora vamos personalizá-lo. No primeiro código que instalamos (Instalando HTML), será onde vamos alterar para personalizar.

Deixei escrito ao lado de cada um o que deve alterar e para que serve, é fácil! Mais veja o que poderá modificar de imagem para cor e vice e verça:

Imagem de fundo - Se não quiser colocar imagem e ter a preferência por colorir, troque
url ('Coloque aqui sua imagem')  repeat por  #b1d3eb (cor que deseja), ficando assim:
background: #b1d3eb;
O mesmo acontece no parte Houver (.boxwarning:hover). Caso queira imagem ou invés de cor é só trocar 
background:#b1d3eb por url ('Coloque aqui sua imagem') repeat,
ficando assim: background: url ('Coloque aqui sua imagem') repeat;
Só não se esqueça de deixar a chave ; (ponto e virgula) ao final do código! se não irá dar erro!
Tabela de cores - Flextool

2º Borda - Onde está escrito "groove" (Linha Sombreada), você poderá trocar por:

• Double - LINHA DUPLA
• Dashed - PONTILHADO
• Solid - LINHA SOLIDA

3º -  E por ultimo, onde está escrito:

• height:120px; - É o tamanho do quadro
• width: 200px; - É a largura da sidebar do seu blog

O restante é fácil, não é? Então termine de personalizá-lo.

3º Salve e Pronto!

Espero que tenham gostado e se gostou, deixe seus comentários! Beijinhos ♥
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.