Mostrando postagens com marcador html. Mostrar todas as postagens
Mostrando postagens com marcador html. Mostrar todas as postagens
Reduzir JavaScript de seu site e blog com programa ou online, gratuito
O Closure Compiler é um programa que pode ser usado online para reduzir código de javascript. A pouco eu descobri esse programa e por ter achado ele muito útil resolvi até mesmo dar dicas de como usa, até porque ele tem alguns 'defeitos' que, com certeza não desmerece sua utilidade. Mas, por ele poder gerar algum problema, é bom que fique atento ao usar.
Tags:
Blog,
Grátis,
html,
JavaScript,
Online,
Otimização,
Programa,
site
Javascript faz Div suspensa parece se mover com descer e subir da página
Mostrei um código css para a uma div ficar fixa no canto do blog ou página, agora um Script que faz algo semelhante, porém, a div fica suspensa e 'solta', parece que fica balançando quando desce ou sobe a página. A div é um elemento Html que dentro dela pode colocar coisas, sendo assim pode ser para uma imagem, anúncio ou texto tenha esse efeito.
JavaScript para blog/site que faz frase ficar passando no topo do navegador
Vou mostrar um JavaScript que faz com que o um título do blog ou página de site fique rodando no topo do navegador, mais ou menos isso.
Como colocar gadget pela Url no blogger
Vou mostrar algumas dicas ou maneiras de inserir coisas no blog com blogger, isso porque, já pela segunda vez percebi que buscaram aqui por algo como:
'Quero colocar um gadget pela url e não consigo'
Um visitante do blog também já havia me dito que não consegue colocar a Url de gadget no blogger. Saiba o porque.
'Quero colocar um gadget pela url e não consigo'
Um visitante do blog também já havia me dito que não consegue colocar a Url de gadget no blogger. Saiba o porque.
link aumentar mudar imagem dhtml onmouse
Esse link pode ser útil, já que ele faz o efeito de mudar, aumentar ou apresentar uma imagem escondida, usando algumas tags fáceis de aplicar e entender, tags javascript ou DHTML.
Vou mostrar duas maneiras diferentes de utilizar:
1º, o usuário passa o mouse sobre uma imagem e aparece outra, assim que ele retira o mouse da imagem volta a imagem anterior, causando ou efeito de mudança de imagem ou a ilusão de aumentar a imagem.
2º, passando o mouse sobre a imagem, aparece outra, e, essa permanece, a utilidade desse efeito poderia ser usado para que a página carregue mais rápido.
Para entender, esse código <a href=" é o link , e http://s... é o endereço do link, ou seja, a página onde a pessoa irá ao clicar no link-imagem:
<A HREF="http://seusite.com/etc/pagina">
Esse código "puxa(faz aparecer) imagem na pagina" <img src=" ENDEREÇO DA IMAGEM o correto é algo como "http://foitestado.com/412223.GIF"
Agora vejam as imagens do 1º efeito
Para o primeiro efeito talvez seria interessante criar uma imagem "escondida" antes, ou seja de 0 px, isso fará o navegador baixar a imagem e quando passar o mouse ele não precisará fazer isso.
Se quiser ver outro ponto de vista ou confundir mais clique aqui
Vou mostrar duas maneiras diferentes de utilizar:
1º, o usuário passa o mouse sobre uma imagem e aparece outra, assim que ele retira o mouse da imagem volta a imagem anterior, causando ou efeito de mudança de imagem ou a ilusão de aumentar a imagem.
<A HREF="http://seusite.com/etc/pagina">
<img src="ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF"
onmouseover="this.src='ENDEREÇO DA IMAGEM 2 MAIOR .png .JPEG .GIF';"
onmouseout="this.src='ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF';" />
</A>
2º, passando o mouse sobre a imagem, aparece outra, e, essa permanece, a utilidade desse efeito poderia ser usado para que a página carregue mais rápido.
<A HREF="http://seusite.com/etc/pagina">
<img src="ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF"
onmouseover="this.src='ENDEREÇO DA IMAGEM 2 MAIOR .png .JPEG .GIF';"/>
</A>
Para entender, esse código <a href=" é o link , e http://s... é o endereço do link, ou seja, a página onde a pessoa irá ao clicar no link-imagem:
<A HREF="http://seusite.com/etc/pagina">
Esse código "puxa(faz aparecer) imagem na pagina" <img src=" ENDEREÇO DA IMAGEM o correto é algo como "http://foitestado.com/412223.GIF"
<img src="ENDEREÇO DA IMAGEM 1 menor .png .JPEG .GIF"fim do código link </A>
onmouseover="this.src='ENDEREÇO DA IMAGEM 2 MAIOR .png .JPEG .GIF';"/>
Agora vejam as imagens do 1º efeito
Para o primeiro efeito talvez seria interessante criar uma imagem "escondida" antes, ou seja de 0 px, isso fará o navegador baixar a imagem e quando passar o mouse ele não precisará fazer isso.
Se quiser ver outro ponto de vista ou confundir mais clique aqui
Petição online no orkut, msn, blog, use as imagens
Participe da divulgação dessas petições online, coloque no seu perfil no msn, comunidades do orkut para que seus amigos vejam e decidam se querem assinar a petição online que você ajuda a divulgar.
No Msn é só clicar no menu no topo em ferramentas, opções..., abrira nova janela, selecione no lado esquerdo a opção pessoal e Digite a mensagem pessoal para que todos vejam: http://www.petitiononline.com/plcircos/ Assine, mande Email, Orkut, avise....http://www.petitiononline.com/veto2008/
A petição abre nova página:
Para blogs(qualquer um, myspace, blogger...) eu criei alguns códigos, abaixo, de link com imagem que podem ser colocados no post ou em um lugar de destaque, onde todos que acessem seu blog possam ver.
Isso deu bastante trabalho, então se você gostar da idéia faça valer...
Não vai nada mais que uma imagem que é link para a petição, não faz Marketing de nada, só da petição, mais a idéia é boa.
A petição abre nova página:
Copie todo o código, CTRL+A, CTRL+C, ...
Tomei o conhecimento de duas petições importantes e um abaixo assinado que tem pouca divulgação.
Petição contra a nova plc que criminaliza o uso de internet.
Petição para a proibição de uso de animais em circo, até dia 21/08, e só tem 17.000 assinaturas, creio que por falta de divulgação.
Na questão dos circos é só ver que existe grandes circos como...(o ignorante aqui não sabe escrever os nomes em ingleis...)
Site reporterbrasil está promovendo um abaixo assinado online pela aprovação da PEC do Trabalho Escravo,
Mais opções de imagens: Petição online, imagens
Explicando o código:
Não deixa cair nem um pedacinho....
<a href="http://www.petitiononline.com/veto2008/" target="_blank"><img alt="Petição online, contra PLC que criminaliza o uso de internet" border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjof9xv5dI0djZ98GJfkF7AM1n8QuVTeWMAKWCB_Dz-gznydsxfhNYQvnBQtW3Q7VlUoR_efOq4DqOZzzRm6SzX_E7KXj_wuLvOcyO0AkGS8GuMPv14AVk1_rGBqL9qcvpCipQsa2SC3w6_/s320-r/contra-plc.JPG" title="Petição online, contra PLC que criminaliza o uso de internet" width="170" /></a>
Prestenção nas cores:
Não é código, é explicação dele:
href="site da petição"
target="abre em nova janela"
alt="se não aparece imagem, o texto..."
src="endereço web da imagem"
title="texto aparece quando passa o mouse na imagem"
width="largura em px"
height="altura em px"
border="borda em px"
No Msn é só clicar no menu no topo em ferramentas, opções..., abrira nova janela, selecione no lado esquerdo a opção pessoal e Digite a mensagem pessoal para que todos vejam: http://www.petitiononline.com/plcircos/ Assine, mande Email, Orkut, avise....http://www.petitiononline.com/veto2008/
A petição abre nova página:
Para blogs(qualquer um, myspace, blogger...) eu criei alguns códigos, abaixo, de link com imagem que podem ser colocados no post ou em um lugar de destaque, onde todos que acessem seu blog possam ver.
Isso deu bastante trabalho, então se você gostar da idéia faça valer...
Não vai nada mais que uma imagem que é link para a petição, não faz Marketing de nada, só da petição, mais a idéia é boa.
A petição abre nova página:
Copie todo o código, CTRL+A, CTRL+C, ...
Tomei o conhecimento de duas petições importantes e um abaixo assinado que tem pouca divulgação.
Petição contra a nova plc que criminaliza o uso de internet.
Petição para a proibição de uso de animais em circo, até dia 21/08, e só tem 17.000 assinaturas, creio que por falta de divulgação.
Na questão dos circos é só ver que existe grandes circos como...(o ignorante aqui não sabe escrever os nomes em ingleis...)
Site reporterbrasil está promovendo um abaixo assinado online pela aprovação da PEC do Trabalho Escravo,
"é necessário confiscar a terra dos que utilizam trabalho escravo. A desapropriação das terras onde for flagrada mão-de-obra escrava é medida justa e necessária e um dos principais meios para eliminar a impunidade."
Mais opções de imagens: Petição online, imagens
Explicando o código:
Não deixa cair nem um pedacinho....
<a href="http://www.petitiononline.com/veto2008/" target="_blank"><img alt="Petição online, contra PLC que criminaliza o uso de internet" border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjof9xv5dI0djZ98GJfkF7AM1n8QuVTeWMAKWCB_Dz-gznydsxfhNYQvnBQtW3Q7VlUoR_efOq4DqOZzzRm6SzX_E7KXj_wuLvOcyO0AkGS8GuMPv14AVk1_rGBqL9qcvpCipQsa2SC3w6_/s320-r/contra-plc.JPG" title="Petição online, contra PLC que criminaliza o uso de internet" width="170" /></a>
Prestenção nas cores:
Não é código, é explicação dele:
href="site da petição"
target="abre em nova janela"
alt="se não aparece imagem, o texto..."
src="endereço web da imagem"
title="texto aparece quando passa o mouse na imagem"
width="largura em px"
height="altura em px"
border="borda em px"
Iframe, como funciona?
Tags para iframe; tamanho, links, endereço, como mudar a página que está no iframe.
scrolling="no" ou "yes" é para a barra de rolagem, name="iframe01" é o nome do iframe caso eu queira usar um link... o uso de scrolling="yes" vai depender da necessidade e de alguns testes de como funciona em diferentes navegadores se for usar % para especificar o tamanho, pode ser interessante e necessário.
width="85%"(largura) height="40 px". px=pixel ou % isso vai variar do gosto, necessidade ou alguns funcionam melhor com determinado navegador... ou o style css da pagina.
Iframe não funciona bem na postagem de Blog do blogger
Se alguém tiver mais alguma dica. Deixe seu comentário, link...
Um iframe você pode colocar no html de uma página, após a tag <body>
Abaixo está o código do iframe
<iframe name="iframe01" src="http://www.google.com" width="300 px" scrolling="yes" height="140 px" style="border: solid 2px red"> </iframe>
teste link para mudar pagina do iframe, google search para yahoo
Abaixo esta o código do link
<a href='http://search.yahoo.com' target='iframe01' title='testar como funciona link para iframe'> teste link para mudar pagina do iframe, google search para yahoo </a>
<iframe name="iframe02" src="http://www.google.com" width="85%" scrolling="no" height="240 px"></iframe>
Para ver como a % pode mudar de acordo com o css de cada pagina
Faça um teste indo nesse blog e diminuindo a janela do navegador para ver como o iframe se comporta, o iframe terá o tamanho em porcentagem (%) do elemento que o contém(DIV) dentro do HTML.
scrolling="no" ou "yes" é para a barra de rolagem, name="iframe01" é o nome do iframe caso eu queira usar um link... o uso de scrolling="yes" vai depender da necessidade e de alguns testes de como funciona em diferentes navegadores se for usar % para especificar o tamanho, pode ser interessante e necessário.
width="85%"(largura) height="40 px". px=pixel ou % isso vai variar do gosto, necessidade ou alguns funcionam melhor com determinado navegador... ou o style css da pagina.
Iframe não funciona bem na postagem de Blog do blogger
Se alguém tiver mais alguma dica. Deixe seu comentário, link...
Um iframe você pode colocar no html de uma página, após a tag <body>
Abaixo está o código do iframe
<iframe name="iframe01" src="http://www.google.com" width="300 px" scrolling="yes" height="140 px" style="border: solid 2px red"> </iframe>
teste link para mudar pagina do iframe, google search para yahoo
Abaixo esta o código do link
<a href='http://search.yahoo.com' target='iframe01' title='testar como funciona link para iframe'> teste link para mudar pagina do iframe, google search para yahoo </a>
<iframe name="iframe02" src="http://www.google.com" width="85%" scrolling="no" height="240 px"></iframe>
Para ver como a % pode mudar de acordo com o css de cada pagina
Faça um teste indo nesse blog e diminuindo a janela do navegador para ver como o iframe se comporta, o iframe terá o tamanho em porcentagem (%) do elemento que o contém(DIV) dentro do HTML.
Div, imagem não respeita scroolbar
Div, imagem não respeita scroolbar, fica fixa mesmo rolando a página ou o mouse.
As imagens que usei são essas, ficaria melhor com uma gif transparente, mais ta funcionando.
Se clicar na imagem no canto direito e inferior da pagina a mesma sobe.
Se for usar uma imagem publicada no blogspot, 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.... Um exp: é link que deixei abaixo de 2 imagens.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wp0apXfDdSHEwxjoKSzckrD11cNCVIYXM6f9IOPii0ZrCyzrRyy0eULD0R2_-u8wyOvO1x18ONqqkESq5sEL_GPeMjt77nhYggpgVB63XYuMMNlIf5xwrs7116e4IV2ed8HFaNO7f8-C/s200/top.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzC69ITrsXyb3cWkLqVzxxE4lxOwz9PVYmtgEzU7Vhy4ABNiOvAYg1mPoHflY1HDIs4XTynSfaPm53BcGRD5lAtA0uZgi9u86szj8GZjstBb0dZ3yj2_3oDkw-bgjT9dlWVu2VV6UvVeC0/s200/subir.GIF
<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>
A DIV coloquei no final do HTML
<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 É UMA PALAVRA(qualquer) QUE DEVE ESTAR NO TOPO do código da pagina, de preferência deve-se colocar uma descrição para ela Expl: <a name="header"></a>
Div ou imagem que fica parada e ou sobreposta mesmo subindo a pagina. usando apenas CSS
Pode ser um menu, um link bastante usado ou o que for interessante ==>>¬
Outros
testes como funciona SCRIPT e CSS
As imagens que usei são essas, ficaria melhor com uma gif transparente, mais ta funcionando.
Se clicar na imagem no canto direito e inferior da pagina a mesma sobe.
Se for usar uma imagem publicada no blogspot, 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.... Um exp: é link que deixei abaixo de 2 imagens.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wp0apXfDdSHEwxjoKSzckrD11cNCVIYXM6f9IOPii0ZrCyzrRyy0eULD0R2_-u8wyOvO1x18ONqqkESq5sEL_GPeMjt77nhYggpgVB63XYuMMNlIf5xwrs7116e4IV2ed8HFaNO7f8-C/s200/top.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzC69ITrsXyb3cWkLqVzxxE4lxOwz9PVYmtgEzU7Vhy4ABNiOvAYg1mPoHflY1HDIs4XTynSfaPm53BcGRD5lAtA0uZgi9u86szj8GZjstBb0dZ3yj2_3oDkw-bgjT9dlWVu2VV6UvVeC0/s200/subir.GIF
<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
<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 É UMA PALAVRA(qualquer) QUE DEVE ESTAR NO TOPO do código da pagina, de preferência deve-se colocar uma descrição para ela Expl: <a name="header"></a>
Usando apenas CSS
Div ou imagem que fica parada e ou sobreposta mesmo subindo a pagina. usando apenas CSS
Pode ser um menu, um link bastante usado ou o que for interessante ==>>¬
Outros
testes como funciona SCRIPT e CSS
Assinar:
Postagens (Atom)