Mostrando postagens com marcador JavaScript. Mostrar todas as postagens
Mostrando postagens com marcador JavaScript. Mostrar todas as postagens
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...
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...
<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;
<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
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.<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
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.
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.
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).
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
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>
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.
Vai o código, é só selecionar=CTRL+A copiar=CTRL+C, colar=CTRL+V e testar \;-)
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
Se não aparecer nada abaixo, talvez na lateral.
Bom para colocar um script no blogspot é legal abrir o painel do blogger, e clicar emLayout(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.
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
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...
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
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.
Desatualizado
Pense três vezes antes de utilizar esse código e provavelmente você não verá muitos benefícios.
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.
Assinar:
Postagens (Atom)
