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 seu estiolo. Lembrando que eu contrui uma simples imagem, por isso utilize sua imaginação! E não esquecendo de informar, a base desse gadgets foi retirado do blog PlaceFame, só fiz algumas alterações. =D


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 ao invés de cor é só trocar 
background:#b1d3eb por url ('Coloque aqui sua imagem') repeat,
ficando assim: background: url ('endereço da 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 - AQUI


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

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

3º -  E 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!

Beijinhos
COMPARTILHE :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.