Postagens | Dicas blog, Imagem, Pc Windows
Mostrando postagens com marcador CSS. Mostrar todas as postagens
Mostrando postagens com marcador CSS. Mostrar todas as postagens

Aumentar a imagem ao passar o mouse, com Css

Esse CSS permite 'aumentar a imagem' ao passar o mouse, fácil de costumizar, melhor que um JavaScript por que pode ser usado nos posts do BlogSpot e é acessível a quem não tem o Java ativado por algum motivo, pode ser mais leve para carregar a página também, em alguns casos.

Menu muda de cor e link aumenta, on mouse

Esse menu é fácil, muda de cor e a fonte aumenta ao passar o mouse, os dois efeitos são opcionais assim como pode ser adicionado outros efeitos, esse é feito usando css mas vou deixar um link para outro menu usando DHTML(tags JavaScript)

Imagem e cor em formulário, botão, área, texto

Vou postar sobre como personalizar esses botões(INPUT type=submit) também a área onde o usuário digita textos, dando opções de usar imagens, cores e estilos(style) de fontes(FONT) e bordas(BORDER).

Um aviso para os desavisados, isso só vai mostrar como melhorar a aparência de formulário ele não tem ação tanto que pode ser digitado testo ou ser clicado no botão(dentro desse post).

Um exemplo desses elementos crus ou sem estilo estão abaixo, as mudanças eu fiz na lateral desse blog, Newsleter e Busca(Ir).

<FORM>
<INPUT size=16><INPUT type=submit value=" Newsleter ">

<INPUT size=13><INPUT type=submit value=" Ir ">


</FORM>











Da pra perceber pelos números que SIZE=16 e no outro 13 irão regular o tamanho da área de texto(para preenchimento) mas

isso não significa que caberá esse número de caracteres, também não muda nada se for colocado SIZE=2, mas nesses casos

como eu não especifiquei mas tem uma forma de impor limite de caracteres, não vou detalhar muito por que minha intenção é cor,

imagem e estilo
.
type=submit vai criar um botão e value=" Ir " irá dar um nome a ele no caso ir ou Newsleter...


Formulário: área de texto colorida

Tem um pequeno script para apagar o texto ao clicar nesse post Selecionar ou deletar texto em textarea e formulário







<FORM>

<INPUT color: rgb(0, 102, 0);">32" MAXLENGTH="90" value="VAI ESTAR AQUI ATÉ VOCÊ DELETAR" title="VAI APARECER QUANDO PASSAR O MOUSE" style="BACKGROUND: url(http://img293.imageshack.us/img293/9828/newsleterla3.gif) #e4eff1 no-repeat left top; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 14px; COLOR: RED; padding-left: 17px;">

</FORM>


INPUT Não precisa ser /fechado/ <entendeu></entendeu>?


size="22" Limita tamanho(largura)


MAXLENGTH="90" Limita o número de caracteres à 90


value="VAI ESTAR AQUI ATÉ VOCÊ DELETAR"


title="VAI APARECER QUANDO PASSAR O MOUSE"


style= Estilo css que poderia ser usado entre as tags head


BACKGROUND: imagem e cor de fundo, se por acaso não carregar a imagem a cor aparecerá. Vai especificado também como

a imagem deve se comportar; não repetir(no-repeat)


url(http://img293.imageshack.us/img293/9828/newsleterla3.gif) Endereço da imagem


#e4eff1 Cor azul-claro


no-repeat Para que a imagem não se repita(caso tiver espaço para isso)


left top Depois seu alinhamento top(topo) left(lado direito) bottom(embaixo) right(esquerdo).


FONT-FAMILY: estilo de fonte, primeira opção Verdana, segunda Arial, terçeira Helvetica; caso o navegador não tiver suporte

para a primeira a segunda será usada...


FONT-SIZE: 14px; Tamanho da fonte


COLOR: RED; Isso é interessante, solto e sozinho esse código indica a cor da fonte vermelha que poderia ser COLOR:

#000000;
preta. Veja Tabela de cores html

padding-left: 17px; Afasta qualquer coisa, (menos background) inclusive o texto do canto, borda do lado esquerdo.

Tente observar os sinais # "" ; : = () </> cada um desses tem uma função se você intender ou respeitar sua localização não terá problemas.(tive problema com espaços)


Melhore ainda mais fazendo uma busca na web por esse código FONT-WEIGHT:


Ou insira e faça um teste FONT-WEIGHT: bold;



Formulário: botão submit colorido

Infelizmente os botões ficam quadrados.



ou


<FORM>

<INPUT title="VAI APARECER QUANDO PASSAR O MOUSE" style="FONT-SIZE: 19px; BACKGROUND:

url(http://img253.imageshack.us/img253/4354/searchve6.gif) #e4eff1 no-repeat left top; FONT-FAMILY: Verdana, Arial,

Helvetica
" type=submit value=" VAI SER TEXTE DO BOTÃO ">

</FORM>



Se der uma olhada é praticamente a mesma coisa que o a área de texto, porém sai algumas coisinhas(códigos não usados)
e entra o:

type=submit Que "faz" o botão.


É bom usar uma imagem no tamanho do botão.



Post relacionados:



Hospedar imagem grátis


Problema ao usar imagem do blogspot usar imagem do blogspot





imagem azul com lupa para ser usada em botão de busca, searcimagem amarelo e vermelho fogo com lupa para ser usada em botão de busca, search

Div suspensa, livre com JavaScript

Div suspensa livre usando JavaScript
primeiro vou postar as images para aumetar e diminuir a fonte que eu fiz em dois formatos, GIF e JPEG(jpg) depois vou ver se a muita diferença entre a elas e se a imagem JPEG demora muito tempo a mais que a GIF para carregar e depois colocarei nessa div que fica zanzando no Explorer e fixa no canto da janela no Mozilla Firefox (pra quem usa versões atualizadas), já que não testei em outras versões.

Existe um javascript que faz efeito de flutuação, clique aqui e que funciona nos principais navegadores, melhor que o javascript abaixo


Problema em usar imagens postadas no blogspot


http://4.bp.blogspot.com/_NrcfzTud13U/SABAm2uSSNI/AAAAAAAAABg/dzihZckolp4/s200/fonte-menos.GIF

http://2.bp.blogspot.com/_NrcfzTud13U/SABAbWuSSMI/AAAAAAAAABY/GK0TlOOEVQg/s200/fonte-menor.JPG



http://2.bp.blogspot.com/_NrcfzTud13U/SABAPWuSSLI/AAAAAAAAABQ/jXR08j0s850/s200/fonte-mais.GIF

http://3.bp.blogspot.com/_NrcfzTud13U/SABADmuSSKI/AAAAAAAAABI/Z-LR6q1KsXU/s200/fonte-maior.JPG"

Uma vez usei um código CSS para tornar as imagens totalmente transparentes -moz-opacity:0.00; e se fosse assim -moz-opacity:0.50; seria menos intensa mas transparente. Deixei ela transparente por que esse Script não funciona com Mozilla.

Vou começar mandando o css que coloquei entre <head> </head> mas poderia ser em arquivo externo.
<style type='text/css'>
div.floater {position:absolute;
top:350px;
bottom:-100px;
right:00px;
display:block;color:#333; -moz-opacity:0.00; }

div.floater img {border: 0px;
padding: 0px !important;
margin: 0px !important;
}
</style>

Agora a DIV com as imagens e seus atributos; a 1º subir ao topo(não precisa usar a barra de rolagem nem ficar rolando o mouse)
a 2º aumenta a fonte e a 3º diminui a fonte, claro que tem que ter o Script pra isso ou não tera função(ação).
<div class='floater' id='floater'> <a href='#header'> <img alt='Subir ao topo' src='http://3.bp.blogspot.com/_NrcfzTud13U/R_nZC8mUR7I/AAAAAAAAABA/emL7FGn8soc/s200/top.GIF'/> </a>
</div>

Esse JavaScript que vem agora não tem nada a ver com o link de cima que é apenas uma ligação para o Script que usei para aumentar a fonte

Agora o Script

<script language="javascript"> <!--

self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = -220;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
function heartBeat() {

if(IE) { diffY = document.body.scrollTop; diffX =

document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop +=

percent;
if(NS) document.floater.Top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = 0 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft -= percent;
if(NS) document.floater.left -= percent;
lastScrollX = lastScrollX + percent;
}
}
if(NS IE) action = window.setInterval("heartBeat()",1);//-->
</script>

Div ou imagem parada e ou sobreposta

Se você quer sobrepor um conteúdo com uma div ou imagem tente algumas tags style="position:absolute; z-index: 100;" ou manter parado position:fixed; e alinhamentos left:1px; top:1px;
Para esconder displey:none;

Talvez uma dica de busca seja posicionamento de div css
Posicionamento de imagem css position:absolute;

Esse post tenta mostrar como eu fiz para deixar essa div com imagem sobre o texto e outras divs, porém está complicado por que no IE 6(Internet Explorer 6) e anterior não funciona.

Se você usa o Mozilla está vendo ela parada no canto inferior direito da tela.
No IE 6 ela está no fim da página, isso por que não funciona nele, e não funciona com determinada versão de html quer tentar entender leia colocar cor na scrollbar no blogspot(com IE).

As imagens que usei são essas, ficaria melhor com uma gif transparente, mais ta funcio.
Se clicar na imagem no canto direito e inferior(ou a que está zanzando, quando desse a página) a pagina vai ao topo.
Se for usar uma imagem publicada no blogger, como eu fiz é bom não pegar essa que abre em uma pagina quando clica sobre ela, mas sim aquela indicada no código fonte <img src="http.... e ao invés de aparecer na pagina talvez irá baixar a imagem perguntando se é pra salvar ou abrir. Um exp: é link que deixei abaixo de 2 imagens.
http://3.bp.blogspot.com/_NrcfzTud13U/R_nZC8mUR7I/AAAAAAAAABA/emL7FGn8soc/s200/top.GIF




http://2.bp.blogspot.com/_NrcfzTud13U/R_nY2smUR6I/AAAAAAAAAA4/TDid1yqZu9w/s200/subir.GIF

Essa parte(abaixo) irá após <style type='text/css'> ou no caso do HTML do blogger algo como <![CDATA[/*
Mas dento do style, ou entre um dos códigos acima e antes de seu "fechamento" com </style> Isso no caso de style CSS incluso na página.


<style type='text/css'>

div.irtopo img { position:fixed; bottom:0; right:0;display:block;color:#333;text-align:center;
}/* a.irtopo img {display:none;} */
<!--[if lte IE 6]>
div.irtopo img {
position:absolute; bottom:-100px; right:0;
text-align:left; width:expression(document.body.clientWidth
> 1000? "1000px": "auto" ); width:73%;
}<![endif]-->

</style>


Div ou imagem que fica parada e ou sobreposta mesmo subindo a pagina usa apenas CSS





A DIV coloquei no final do HTML entre as <body> </body>



<div class='irtopo'><a href='#header'><img alt='Subir ao topo' src='http://3.bp.blogspot.com/_NrcfzTud13U/R_nZC8mUR7I/AAAAAAAAA
BA/emL7FGn8soc/s200/top.GIF'/></a></div>
O #header é o endereço dessa mesma página, um link ancora, no código do pagina(como a maioria dos blogspots) a div que está no topo tem a ID="header" e isso que faz página subir.

Então além do blogger, qualquer página ou blog pode usar isso, basta observar a primeira div do html que tenha uma ID e colocar no link essa id, acompanhada do #


Vou deixar como exemplo essa pagina abaixo.


facilefunciona blogspot div imagem nÃo respeita scroolbar


Div ou imagem que fica parada(mesmo subindo a página) e ou sobreposta ao texto, imagem e outras DIVs(nesse blog não é visível com o Explorer 7 ou... devido as configurações do meu HTML, com mozilla versão mais recente da data desse post era, veremos daqui...) veja melhor aqui.... Usando apenas CSS
pode ser um menu, um link bastante usado ou o que for interessante ==>>¬

Mudar a cor da barra de rolagem no blogger =>

como fazer para Mudar a cor da barra de rolagem no blogger, no blogspot a cor barra de rolagem pode ser mudada



Para mudar a cor da barra de rolagem no blogger(blogspot), é necessário, além de adicionar o código abaixo no HTML entre as tags <HEAD></HEAD> também é preciso mudar algo no inicio do HTML, veja a solução nesse pots: A cor da barra de rolagem não muda no blogspot? veja o por que, e corrija.



Bom se der uma olhadinha ao lado(para quem usa Internet explorer), a barra de rolagem esta de outra cor, e isso eu fiz adicionando o seguinte código no CSS da pagina a body{ ja havia, não pode ser confundida com <body> que é necessário, a primeira pode ser dispensada ou até mesmo estar em um arquivo arquivo externo (folha de estilo CSS).





Bom o código é(em laranja são os que ocupam maior área e tem + destaque .





<style type='text/css'>



body{scrollbar-3dlight-color: blue;

scrollbar-highlight-color: #99CCFF;

scrollbar-face-color: #E4EFF1;

scrollbar-shadow-color: #FF0066;

scrollbar-darkshadow-color: #805B32;

scrollbar-arrow-color: RED;

scrollbar-track-color: #FF9800;}



</style>



Eu só vi interesse em mostra 3 de cada um desses acima; os que provocam mudança drástica no visual. Não esqueça no HTML entre as tags <HEAD>entre as tags</HEAD>

A cor da barra de rolagem não muda? Aprenda corrigir

Mudar a cor da barra de rolagem no blogspot, para o IE, é necessário mudar algumas coisas em seu HTML:

Postagens Populares