Quadro de avisos para blogs com efeito Houver | Quero Dicas Quero Dicas : Quadro de avisos para blogs com efeito Houver

Quero Dicas : Quadro de avisos para blogs com efeito Houver

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


Nenhum comentário:

Postar um comentário


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

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.

Beijinhos ♥

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir