20 fevereiro 2015

Quadro de avisos com efeito Houver para blogs

Quadro de avisos 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

Antes de começarmos acesse a página de códigos para podermos começar o tutorial. Deixe-a aberta.

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 código CSS

4 - Salve!


Instalando Gadget

1 - Vá em Layout e clique em Adicionar Gadgets  

2 - Adicione o código dentro de HTML/Javascript disponivel na página.

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 | CSS ), será onde vamos alterar para personalizar.

Deixei escrito ao lado de cada um o que você pode alterar e para que serve, é fácil!
Note 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º -  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

Nenhum comentário:

Postar um comentário

Amigos do Blog



Agregadores