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

Colocar imagem-link no Blog ou site do blogger

Uma forma simples de inserir um link imagem no blogger sem mexer em código.

Tanto no post(postagem) como na lateral(sidebar) do blogspot pode ser colocado imagens que funcionem como link para outra página ou blog.

Como colocar um logotipo no BlogSpot do blogger

Vou mostrar como colocar um logo no BlogSpot, imagem no topo da página de seu blog no blogger, com ou sem o nome do seu blog.

Logotipo é o nome popular para a imagem que fica no topo do blog/site, serve também como um link para a página inicial(Home) do blog/site e tenta representa visualmente o que é o blog ou pode servir como um diferencial do mesmo, uma marca.

Baixar imagens grátis

Separei algumas imagens para baixar, e alguns sites que dispõe de muitas imagens, icones

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.

Como fazer emoticon animado, Gif animada como logotipo e baixar editor grátis

Vou mostrar como fazer imagens animadas tipo emotions, logotipo, banner, gif animadas, usando um software editor gratuito que pode baixar aqui mesmo.

Fazer banner, baixar imagem e fontes grátis

Encontrei bons sites para baixar imagem animada, fontes, fazer banner, logotipo, imagem para usar em blogs como botão de ação, menu, e link com imagem

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.

Otimizar imagem e testar o carregamento do blog

Nessa onda de otimizar o blog, melhorar as imagens e encontrei um site que testa a velocidade de carregamento das páginas, mostra as imagens e arquivos mais pesados. Já queria ter feito isso a um tempo mas o brasileiro aqui vai deixando para amanhã; mas agora vai ficar meio bagunçado, por poucos dias. Já diminui três imagens, enquanto posto aqui.

Acelerador do google pra Internet, grátis!

Baixar o web Acelerador do Google, grátis, e não modifica ou deforma as imagens já que seu funcionamento é diferente daquele acelerador que alguns provedores de Internet disponibilizam, o que permite o uso de dois aceleradores pra web.

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

Onde hospedar imagens grátis

Um site para hospedar imagem grátis, sem precisar logon, sem cadastro e não deforma as imagens.

Depois de ter feito algumas imagens ou logotipos animados eu precisava de um local para hospedá-las de grátis sem as modificações que o blogger faz com elas, pesquisei e encontrei alguns sites, um precisava fazer logon e eu não estava com muito tempo, o outro transformou a imagem animada(.GIF) em outra extensão não animada.

Fazer logotipo online animado e grátis

Veja alguns exemplos de logotipos, animados ou normal e onde criar cada um deles
fonte fundo transparente

Problema ao usar imagem do blogspot, resolva

Alguns problemas ao postar e usar imagens no blogger:

Essa postagem está desatualizada, talvez algumas coisas já não funcionam como descrito nela




Resolva o problema de perder o link para a imagem no blogger

Usando o endereço que ficou para a imagem não da certo, faz download e não abre a imagem no navegador, postar nova imagem resolve ou faça isso:

Talvez quando você ler esse post o problema já tenha sido resolvido pele pessoal do blogger, mas quando eu postei uma imagem e estava editando o post arrastei a imagem para baixo, e perdeu-se a opção de clicar e abrir a imagem, eu encontrei uma maneira de reverter isso sem postar novamente a imagem: a opção no painel do blogger e encontre o link Álbuns da web do Picasa permite acessar as imagens que foram feito upload, clique e acesse as imagens de seu blog, clique sobre a imagem que você quer, ela ficara no centro do álbum, clique com o botão direito do mouse sobre ela e em propriedade, copie o endereço completo da imagem, com esse endereço é possível postar no blogSpot:
vai em adicionar imagem, e escolha a caixa URL
coloque endereço e faça upload que o blogger vai criar o link.

Você tem problemas ao postar uma imagem que você já postou antes ou de outro blogger:



Quando você clica em uma imagem do blogspot abre em uma janela, possivelmente se você pegar o endereço que aparece na barra de endereço do navegador e tentar postar no blogger ou qualquer lugar, a imagem não aparece ou fica um quadro branco onde deveria ter imagem, por isso se você quiser postar uma imagem que já está em um blogspot clique sobre ela com o botão direito do mouse sobre ela e em propriedade, copie o endereço completo da imagem, com esse endereço é possível postar no blogSpot:
vai em adicionar imagem, e escolha a caixa URL
coloque endereço e faça upload que o blogger vai criar o link.

Entenda o por que disso lendo abaixo:

Se for usar uma imagem publicada no blogspot, como eu fiz é bom não pegar essa URL(endereço) que abre quando clicar sobre ela, mas sim aquela indicada no código fonte <img src="http.... Exp: São os links que deixei abaixo de 2 imagens. imagem demostração subir ao topo

http://3.bp.blogspot.com/_NrcfzTud13U/R_nZC8mUR7I/AAAAAAAAABA/emL7FGn8soc/s200/top.GIF

Essa imagem acima eu modifiquei (sem <a href="http://...) para postar imagem e não abrir a janela com imagem(não link), já a imagem de baixo eu deixei como o blogger postou por padrão.

Se eu usasse o endereço(URL) que aparece quando clicar ou passar o mouse sobre ela para postá-la <img src="http....
não funcionaria. Isso por que o endereço na verdade é de uma página html cuja pasta onde está essa imagem tem o nome da imagem, nesse caso(barra.JPG).

Faça o teste clique nele e depois clique em Exibir >>código fonte ou bem no canto da janela(não sobre a imagem), Botão direito do mouse e Exibir código-fonte. Aí você vai ver um dos endereços da imagem, . O endereço da imagem que o blogger usa aqui em <img src="http.... é um, e, o "http... que o blogger usa para carregar a imagem dentro da pagina que abri quando um visitante clica é outro.

mudar a cor da barra de rolagem IE
Mudar a cor da barra de rolagem no blogger para o BlogSpot é possível, mas só funciona com o Internet Explorer.

Entenda o básico do código de uma imagem postada com link:

<a href="http://www.petitiononline.com/plcircos/">

<img src="http://2.bp.blogspot.com/_NrcfzTud13U/SKdRtAfcoHI/AAAAAAAAALc/BELEIwkEMzg/s320-R/circo-legal-sem-animal.jpg" width="18" height="14" />

</a>


Ou seja o código laranja e o que está entre ele é referente a imagem, endereço onde ela está "guardada" e tamanhos

<a href="http://www.petitiononline.com/plcircos/">


</a>


O código do link começa assim <a href="o endereço da página que vai abrir quando clicar">

o código da imagem
imagem com endereço dela e todos os temperos,

</a>
e o fim do link.

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 ==>>¬

Postagens Populares