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

Como 'inserir Css' no Html de site ou blog via JavaScript

Vou mostrar um modo de inserir estilo Css via JavaScript externo ou interno em páginas da web de blogs ou sites.

É possível adicionar Css usando javascript
O script eu não vou explicar muito, uma vez que o importante é mostrar ele e, já que é para usuário avançado ou dedicado em testar e aprender coisas novas.

Como tudo, eu aconselho que tenha os cuidados de usar um blog de testes antes e muito cuidado porque, assim como em Html ou Css qualquer caractere errado faz com que a coisa não funcione.

Vantagens de inserir Css por meio de JavaScript

Esse meio serviria para dar estilos a elementos que precisam de javascript para funcionar, se você colocou seu script no final da página(antes de fechar <body>), aí esses elementos carregam por último, sendo assim, o estilo deles também pode ficar por último e fazer com que uma folha de estilo Css baixe mais rapidamente por ter menos códigos.

Diminuir tags Html para o blog ou site ter mais velocidade ao carregar

Otimizar site e blog reduzindo tags html

Vou mostrar algumas dicas bem simples de códigos Html que podem ser otimizados, ou seja, reduzidos para que um site ou blog carregue mais rápido.
Esse artigo é para pessoas com conhecimento em informática(webdesign) médio ou avançado, ou que tenha disposição para desbravar em um novo mundo de aprendizado, mas, 'aprendendo a voar sem ainda saber caminhar, e sem ter asas...'.
Por ser um assunto complicado, leia com atenção. Se possível, use um blog ou site de testes

Problema das regras de comentário que ficam abaixo do formulário no Blogger

Mostrarei uma maneira de 'resolver' um problema do blogger na opção de resposta dos comentários, trata-se das regras de comentários que ficam abaixo do formulário de comentários, esse problema pode ser contornado usando Css, mais especificamente, usar uma imagem de fundo acima do formulário, essa imagem com as regras de comentário nela.

Eu estou usando esse procedimento em dois blogs e deu certo, porém, não é nada fácil de aplicar, precisa ler com atenção e conhecer seu blog, como ele está funcionando e o que funciona em outros navegadores, se você só usa um navegador, talvez nem esteja ciente do que ocorre, e, se seu blog tem poucos comentários ou você não se preocupa muito com o que os outros comentam em seu blog, acho que não vale a pena gastar seu tempo, até porque provavelmente o blogger vai resolver esse 'erro', aí, talvez você terá que remover o Script.

BlogSpot com postagens em branco com Internet Explorer. O que fazer?

Vou mostrar um hack para que blogs do blogger funcionem no IE(Internet Explorer), o que acontece é que blogs ou sites que usam a plataforma blogger e tem a opção de responder comentários estão exibindo uma página de postagem em branco, ou seja, totalmente inacessível, apenas no navegador IE, nos outros navegadores tudo funciona bem, mas, o Internet Explorer é usado por uma boa parcela da população, que deve ir de 20 até 40%, se você é blogueiro deve se preocupar com isso, as pessoas não vão mudar de navegador por causa de seu blog, pior, ao acessar seu blog elas nem vão saber o que está acontecendo ao ver uma página em branco e seu blog perderá algo que você tanto luta para ter, perderá visitas.

Gadget de comentário para site, do Friend connect

Mostrarei dois gadgets de comentário do Google, principalmente para sites, mas também para blog, após adicionado ele cria um formulário de comentários para a página, o gadget é em Javascript, e cria o formulário automaticamente, sem muito esforço ou precisar entender de linguagens de programação. Quase esqueci, de grátis, lógico...

Atualização: Provavelmente Google Friend Connect deixará de prestar alguns serviços ou será descontinuado

Widget flash: Resumo das postagens recentes do blog

Um recurso para colocar um resumo dos últimos posts(artigos) do blog, pequeno flash que usa os feed do seu blog para fazer isso. Feito isso o widget(gadget) irá atualizar sozinho, a cada vez que você postar.

Habilitar, Desativar JavaScript no IE e Firefox, e download do java

Desabilitar, ativar ou download de JavaScript pro Internet Explorer ou permitir JavaScript no Mozilla Firefox, da no mesmo e vou mostrar como fazer isso em ambos os navegadores.

Menu animado, imagem aumenta on-mouse

Vou mostrar um menu animado, fácil, que ao passar o mouse a imagem "aumenta", que pode ser usado também para apresentação de imagem.

Link pra iframe com tamanho ajustável

Já fiz alguns testes de como carregar um iframe em uma página sem que apareça no iframe o topo da página e sim aquele trecho que for escolhido, esteja ele onde estiver, no início, meio ou fim da página e também um script capaz de disponibilizar ao usuário a opção de aumentar ou diminuir o iframe que poderia ser uma div ou talvez uma imagem ou outro elemento.

Adicionar Favoritos no Mozilla, Internet Explorer e OPera

Adicionar aos Favoritos. O código de script abaixo permite ao usuário adicionar o blog ou site aos seus favoritos no Mozilla, Internet Explorer e Opera, ele pode ir entre as <BODY></BODY>, o seu funcionamento eu não vou explicar, mas funciona no Mozilla Firefox, Internet Explorer e Opera.

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>

Usuário aumenta a fonte

Usuário aumenta a fonte de acordo com sua necessidade usando Script

Menu que muda de cor

Menu que muda de cor ao passar o mouse, usando tabela (table).

bgcolor="#c5f3be" vai especificar a cor(#c5f3be) do menu antes de passar o mouse.

onmouseover="this.style.background='#fefff0' vai especificar a cor(#fefff0) do menu ao passar o mouse sobre ele.
onMouseOut="this.style.background='#c5f3be' vai especificar a cor do menu após "retirar o mouse"। No caso eu usei a cor(#c5f3be) inicial ou real.


Bom no coso do blog nem sempre da certo, como o esperado , por que ele segue uma configuração pré-estabelecida; tanto que chega mudar o html que a gente digita para que se sinta melhor.

Abaixo (área azul) do menu está o código do menu, ele poderá sofrer influencia do estilo do seu blog, já que não tem fonte e nem um style definido.
(Atualizado 12/06/08)Esse menu usa tags JavaScript e a mudança de cores não funciona em navegadores sem suporte para JavaScript apesar de provavelmente serem poucos, tem um menu que muda de cores usando CSS aqui, porém com DIV e não TABLE, o que pode ser mais dificil mas está sendo mais usado ultimamente.













jogo no blog
iframe
Regulamentar ou travar?
crime na web?


Vai o código, é só selecionar=CTRL+A copiar=CTRL+C, colar=CTRL+V e testar \;-)

calendario, continuação...

Como da pra perceber eu tive alguns probleminhas na ultima postagem, mas tem esses endereços de sites que fornecem scripts para calendário, já que não consegui aqui .
forum.clickgratis.com.
codigofonte.com.br

vivaolinux.com.br


Darei um jeito...
assim que der tempo conserto tudo e postarei essas "novidades" abaixo. Vamos ver o que ira acontecer com esses códigos que peguei no yahoo.
Se não aparecer nada abaixo, talvez na lateral.
Bom para colocar um script no blogspot é legal abrir o painel do blogger, e clicar em Layout(Design), depois clicar em Adicionar um elemento de página(depois pode ser arrastado), abrira nova página; nas opções escolha HTML/JavaScript clicando em Adicionar ao blog; adicione o script(titulo é opcional); Salvar alterações.

Visitante mudando a cor página

Disponibilizar ao usuário(visitante) uma forma de mudar a cor da pagina, para que ele possa ler com mais facilidade...

Desatualizado
Pense três vezes antes de utilizar esse código e provavelmente você não verá muitos benefícios.


O código eu colocarei nesse textarea e já o deixei com uma tabela, o local onde você ira colocar dependera...entre as <body> </body>(sem dois pontos)
no caso desse blog eu tive que retirar a imagem de fundo e também na sessão que deveria ser tipo style css, que nesse blog não sei por que é diferente tive que retirar a background.

ANTES

<head>

<style type="text/css">
body {background: #e0e0e0; padding: 4;
margin: 4;
font-size: small;
color: #131414;
text-align: center;}
</style>

</head>

DEPOIS

<head>

<style type="text/css">
body {padding: 4;
margin: 4;
font-size: small;
color: #131414;
text-align: center;}
SEM BACKGROUND.
</style>
</head>

Tive que retirar TAMBÉM ISSO ABAIXO que estavam no código fone(HTML)
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
Entenda o que eu fiz em relação ao código acima e não tive problemas até agora 26/06/08.

Estou substituindo table por div, para ver um exemplo de como era esse blog quando havia a possibilidade de mudar a cor veja na cópia de pagina antiga

Quanto ao código que muda a cor

Fiz algumas mudanças para adequá-lo ao que eu queria, ele era um link simples mas quis usar onmouseover='document.bgColor para que não seja nescessario clicar sobre ele,(atualizado 26/06/2008; pode assustar o visitante se ele não entender que muda a cor quando passa o mouse e ele não gostar da cor, sugiro a href ou onclic) basta passar o mouse e usei uma td para dar a cor de fundo da cor que ficara a tela.

Vai o código, é só selecionar=CTRL+A copiar=CTRL+C, colar=CTRL+V e testar \;-)

Esse código acima eu retirei do html do blog, que foi onde eu o coloquei, já que quando adicionando elementos em editar layout não deu certo.(Atualizado 31/05/2008)
Quem quiser testar bem acima nessa página é só passar o rato na tabelinha de cores.

Postagens Populares