sábado, 29 de dezembro de 2012

Fazer Menu com Imagens ao lado dos Links


Quando fazemos uma lista de links no blog podemos colocar uma imagem ao lado de cada link para ficar mais bonito, isto pode ser feito colocando setinhas ao lado dos links ou alguma outra imagem que podem ser gifs animados como utilizamos muitas vezes em nossos blogs. Veja também como fazer um menu horizontal.

Esse tutorial mostrará como colocar imagens do lado dos links utilizando um menu feito com um gadget de html/javascript, mas se quiser pode ver aqui como aplicar esse mesmo
estilo de formatação em qualquer gadget do seu blog, por exemplo, nos marcadores ou qualquer outro.

menu com imagens nos links
Entre na pagina designer >> adicionar gadget >> html/javascript e coloque os links que desejar usando esse código como exemplo:
<div class="lista">
<a href="http://www.dicasparablogs.com.br" target="_blank">Dicas para Blogs</a>
<a href="http://www.frasescurtas.com.br" target="_blank">Frases Curtas </a>
</div>


Se quiser que os links abram na mesma janela apenas apague target=”_blank” de cada linha. Por enquanto os links ainda têm a aparência normal sem as imagens ao lado, vamos fazer isso em seguida.

Agora entre na pagina editar html e coloque o trecho abaixo, nós sugerimos colocar essa parte do código que é a
formatação dos links no inicio do html antes da tag body{.... como você pode ver na imagem logo após o código.
.lista a{
display:block;
background-image: url(endereço da imagem);
background-repeat: no-repeat;
background-position: left 6px;
padding-top:3px;
padding-bottom:3px;
text-indent: 15px;
}
.lista a:hover{background-image: url(endereço da imagem);background-repeat: no-repeat;background-position: left 6px}


html blogger

A imagem de fundo que você vê nos códigos é o que aparecerá ao lado de cada link, então você pode hospedar e trocar a imagem como desejar, apenas tome cuidado para usar o
endereço certo da imagem.

Também altere o valor que está em text-indent: 15px; para a largura da sua nova imagem. Isso é a margem (recuo do texto) para que o link não fique por cima da imagem.

Outro ajuste necessário é o valor background-position: left 6px; este numero 6 faz a imagem ficar mais para cima ou para baixo conforme mudar o numero, veja mais detalhes sobre
Posicionar imagem de fundo. Então é só fazer testes e ajustes até que seu menu ficar do jeito que desejar.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros



Algumas pessoas que visitam nosso blog perguntaram sobre como colocar imagens uma ao lado da outra como fizemos com os links para nossa comunidade no Orkut, Facebook e Vídeos do Youtube que temos em nosso menu. Existem varias maneira de fazer aquilo usando códigos CSS ou tabelas em HTML(que já mostramos em outra postagem: Dividir um gadget em duas colunas), mas preferimos mostrar como fazer utilizando as divs.

divulgar bloggerNaturalmente estamos falando de gadgets de html/javascript onde podemos colocar códigos diretamente dentro deles, se quiser colocar gadgets ao lado do título do seu blog veja aqui:Como dividir o cabeçalho do blog em duas partes.

Voltando ao assunto colocar as imagens ou textos lado a lado no gadget use o seguinte código:
<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
</center>



O valor 33 é utilizado porque são 3 colunas se usar outra quantidade e altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.

O Código para colocar imagens é assim:
<a href="http://www.orkut.com.br/Main#Community?cmm=46751209"><img src="endereço da imagem" border="0" /></a>


Mas é claro você terá que hospedar uma imagem e alterar o endereço do link, este do exemplo é da nossa comunidade no orkut.
Se depois de utilizar as 3 colunas quiser voltar a fazer uma coluna só acrescente essa linha no final <div style="clear:both">conteudo aqui</div>, ficando deste jeito:
<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="clear:both">conteudo aqui</div>
</center>


dividir gadgets do blogger

Esse código não é indicado para fazer menus de texto, veja aqui um código melhor para menus:Links lado a lado (menu horizontal).

Mais Links úteis:
Colocar ou alterar as bordas
Como fazer um banner
Como Formatar o Texto do Blog

Como já dissemos no inicio existem outras maneiras de fazer isso, mas achamos essa uma das melhores, pois seria possível colocar, por exemplo, duas imagens com um texto no meio ou qualquer outra combinação de conteúdo nas colunas que acabamos de colocar dentro do gadget do blogger.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros



Organizar os banners de parceiros pode ser complicado principalmente se fizer da maneira errada, já vi em alguns blogs esses banners um em cada gadget ocupando um espaço enorme e sem necessidade. Além disso, dependendo da quantidade de banners vale à pena colocar numa pagina só para banners de parceiros ou usar algum código para mostrar os banners em ordem aleatória, portanto vamos falar sobre esse assunto com mais detalhes.

Colocar Banners um do Lado do Outro

Recebemos um comentário perguntando sobre organizar os banners e usamos como exemplo uma pagina com imagens das frases curtas (nosso outro blog) então vamos mostrar como é a organização dos banners e como colocar efeito nos banners ao passar o mouse sobre eles (veja o link da pagina de exemplo).

efeito em lista de banners
Sugerimos utilizar uma pagina extra do blogger para fazer sua pagina de parcerias, mas o código que vamos mostrar funciona da mesma maneira se utilizar em um gadget de html/javascript.
<style type="text/css">
.galeria img{text-decoration: none;margin: 30px;padding: 2px;float: left;border: 1px solid #000;background-color: #FFc;}
.galeria a:hover img{border: 1px dashed #009;background-color: #FF0;}
</style>

<div class="galeria">
<a href='http://www.dicasparablogs.com.br'target='_blank'><img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" /></a><a href='http://www.dicasparablogs.com.br'target='_blank'><img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" /></a>
</div>


Aqui você pode colocar o código que quantos banners desejar ou se quiser pode mostrar os bannes em ordem aleatória, assim cada vez que a pagina carregar a ordem dos banners será diferente. Se for utilizar o código do link veja que no final dele tem: .....src="' + desc[rnd] + '"border="0" /></a><br/>')

Será necessário retirar esse <br/> para que os banners fiquem um do lado do outro, deixando desta forma esse trecho do código javascript para banners em ordem aleatória: ....src="' + desc[rnd] + '"border="0" /></a>')

Colocar efeitos no banner ao passar o mouse

As primeiras linhas do código são formatação CSS e você pode modificar como desejar.

exemplo de efeitos em imagens
Veja aqui como alterar as bordas e cor de fundo só precisa trocar o código das cor, no trecho: background-color:....

Olhe novamente as imagens que colocamos nesta postagem ou nossa pagina de exemplo e verá que existe uma cor de fundo por trás de cada imagem, ela parece ser um pequeno contorno devido ao código padding:2px no código CSS, então se quiser pode fazer testes alterando esse valor ou apagando esse código se não quiser deixar o fundo a mostra.

Para terminar queremos lembrar mais uma vez que é recomendável utilizar esse código em um gadget somente se tiver poucos banners, senão seria melhor criar uma pagina separada porque quando mais banners no seu blog mais ele demora em carregar e nem todos tem paciência ou banda larga para isso.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros



Como Criar a Caixinha com o Link do Seu Blog para Copiar e Colar [Atualizado]





Para que você possa criar o "LINK-ME"
Você deve adicionar este código numa widget/gadget HTML do blogger:

<div align="center"><img vspace="2" hspace="2" src="Endereço da Imagem" ></div>
<div align="center"><textarea rows="3" cols="15" onfocus="this.select()" onmouseover="this.focus()" name="textarea">
<center><a href="Endereço do Blog" target="_blank">
<img border="0" src="Endereço da Imagem" /></a></center>
</textarea></div>
Aí seu link aparecerá assim como o exemplo abaixo:
http://i27.tinypic.com/v65atu.jpg

Você pode editar também a quantidade de linhas e de colunas em rows="3" cols="15"
»rows="3" é a quantidade de linhas - que vai determinar a altura da sua caixinha
»cols="15" é a quantidade de colunas - que vai determinar a largura da sua caixinha


Você pode criar gifs animados online para usar no blog, Orkut e outros lugares onde achar interessante utilizar uma imagem com movimentos (gif animado). Tudo isso é feito online sem precisar baixar nem instalar programas para editar imagens. Esses gifs animados podem servir até como banners para seu blog.

E você poderá escolher a cor e tipo de letra que usará no seu gif animado além de muitas opções de imagens prontas dos mais variados estilos: tempo, alfabeto, palhaços, aniversários, amor, casamento, animais, cães e gatos, peixes, dinossauros, dragões, pássaros, personagens, artistas, lápis, flores, insetos, zodíaco, dia das mães, dia dos pais, diversos, esportes, ofícios, tweety, frutas, legumes, anjinhos, páscoa, smilies, halloween, natal.

Isso é feito de forma bem simples e intuitiva no site
Gif Mania.net, você só precisa escolher um tipo, cor e tamanho da letra (fonte), qual imagem animada utilizará, clique em uma das figuras ou escolha outra categoria no menu à esquerda
gifs animados para blogs, orkut
Escolha a cor, tipo e tamanho da fonte e no campo abaixo (O texto da sua assinatura) digite seu texto e clique em OK.
cores gif animado
Agora você pode salvar a imagem no seu computador (Clique aqui descarrege para esta imagem) e depois utilizar esse gif animado no seu blog, Orkut ou onde mais quiser. Se tiver duvidas o próprio site tem um link de ajuda sobre como utilizar a imagem como assinatura de email, veja no link (Como utilizar a sua assinatura? Clique aqui se você precisar de alguma ajuda)
salvar gif animado
O blogger às vezes não trabalha bem com gifs animados, então sugerimos
hospedar a imagem no Imageshack antes de utilizar no blogger. E veja aqui outro de nossos tutoriais falando sobre criar banners online.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros
Você pode criar gifs animados online para usar no blog, Orkut e outros lugares onde achar interessante utilizar uma imagem com movimentos (gif animado). Tudo isso é feito online sem precisar baixar nem instalar programas para editar imagens. Esses gifs animados podem servir até como banners para seu blog.

E você poderá escolher a cor e tipo de letra que usará no seu gif animado além de muitas opções de imagens prontas dos mais variados estilos: tempo, alfabeto, palhaços, aniversários, amor, casamento, animais, cães e gatos, peixes, dinossauros, dragões, pássaros, personagens, artistas, lápis, flores, insetos, zodíaco, dia das mães, dia dos pais, diversos, esportes, ofícios, tweety, frutas, legumes, anjinhos, páscoa, smilies, halloween, natal.

Isso é feito de forma bem simples e intuitiva no site
Gif Mania.net, você só precisa escolher um tipo, cor e tamanho da letra (fonte), qual imagem animada utilizará, clique em uma das figuras ou escolha outra categoria no menu à esquerda
gifs animados para blogs, orkut
Escolha a cor, tipo e tamanho da fonte e no campo abaixo (O texto da sua assinatura) digite seu texto e clique em OK.
cores gif animado
Agora você pode salvar a imagem no seu computador (Clique aqui descarrege para esta imagem) e depois utilizar esse gif animado no seu blog, Orkut ou onde mais quiser. Se tiver duvidas o próprio site tem um link de ajuda sobre como utilizar a imagem como assinatura de email, veja no link (Como utilizar a sua assinatura? Clique aqui se você precisar de alguma ajuda)
salvar gif animado
O blogger às vezes não trabalha bem com gifs animados, então sugerimos
hospedar a imagem no Imageshack antes de utilizar no blogger. E veja aqui outro de nossos tutoriais falando sobre criar banners online.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros


Quando temos que fazer uma imagem para usar como textura no fundo do blog geralmente enfrentamos muitos problemas, pois é difícil fazer uma imagem que encaixe perfeitamente. Logo abaixo você tem imagens para usar como plano de fundo no seu site, você apenas precisa salvar e hospedar em algum lugar, sugerimos o http://imageshack.us





http://1.bp.blogspot.com/_UTkn-5f-k5E/SSHGK4WuVVI/AAAAAAAAAfU/Gneuuq6QU6c/s320/fundo2.gif
http://2.bp.blogspot.com/_UTkn-5f-k5E/SSHG9it8TgI/AAAAAAAAAfs/rPimDoCpAcs/s320/fundo4.gif
http://4.bp.blogspot.com/_UTkn-5f-k5E/SSHGK-rtUbI/AAAAAAAAAfM/fwAdFhTp53o/s320/fundo.gif
http://3.bp.blogspot.com/_UTkn-5f-k5E/SSHGLPcvbLI/AAAAAAAAAfc/XlF8XfEpYI4/s320/fundo3.gif


No site All Free Backgrounds e Free Backgrounds você encontra muitas outras imagens de fundo, e o procedimento é o mesmo, salvar e hospedar a imagem e depois você entra na pagina editar html do seu blog e coloca a linha de código background-image: url(endereço da imagem); junto com :
body{................
...........
..........}
E já está pronto, se você quiser testar essas imagens antes de colocar no seu blog copie esse código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {background-image: url(fundo4.gif);
}
-->
</style></head>
<body>
</body>
</html>


Cole no bloco de notas, altere onde está escrito fundo4.gif para o nome da imagem que você quer testar, mas não se esqueça de colocar .jpg ou .gif no nome da imagem porque isso também faz parte do nome da imagem. E salve no seu computador na mesma pasta onde salvou a imagem, com o nome planodefundo.htm, desse mesmo jeito o nome do arquivo precisa ter o .htm no final pois assim será como se fosse uma pagina de internet. Agora é só ir até a pasta e clicar sobre esse arquivo que ele abrirá em seu navegador de internet e você poderá ver como fica a imagem de fundo sem precisar hospedar e mexer no seu blog. Isso poupa muito trabalho, afinal somente irá mexer no seu blog depois de visualizar a imagem de fundo que escolheu e já tem certeza que deseja usar-la.

Veja também:

Por que a imagem não aparece
Posicionar imagem de fundo
Fixar imagem de fundo
Como hospedar imagens
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros

Quando temos que fazer uma imagem para usar como textura no fundo do blog geralmente enfrentamos muitos problemas, pois é difícil fazer uma imagem que encaixe perfeitamente. Logo abaixo você tem imagens para usar como plano de fundo no seu site, você apenas precisa salvar e hospedar em algum lugar, sugerimos o http://imageshack.us





http://1.bp.blogspot.com/_UTkn-5f-k5E/SSHGK4WuVVI/AAAAAAAAAfU/Gneuuq6QU6c/s320/fundo2.gif
http://2.bp.blogspot.com/_UTkn-5f-k5E/SSHG9it8TgI/AAAAAAAAAfs/rPimDoCpAcs/s320/fundo4.gif
http://4.bp.blogspot.com/_UTkn-5f-k5E/SSHGK-rtUbI/AAAAAAAAAfM/fwAdFhTp53o/s320/fundo.gif
http://3.bp.blogspot.com/_UTkn-5f-k5E/SSHGLPcvbLI/AAAAAAAAAfc/XlF8XfEpYI4/s320/fundo3.gif


No site All Free Backgrounds e Free Backgrounds você encontra muitas outras imagens de fundo, e o procedimento é o mesmo, salvar e hospedar a imagem e depois você entra na pagina editar html do seu blog e coloca a linha de código background-image: url(endereço da imagem); junto com :
body{................
...........
..........}
E já está pronto, se você quiser testar essas imagens antes de colocar no seu blog copie esse código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {background-image: url(fundo4.gif);
}
-->
</style></head>
<body>
</body>
</html>


Cole no bloco de notas, altere onde está escrito fundo4.gif para o nome da imagem que você quer testar, mas não se esqueça de colocar .jpg ou .gif no nome da imagem porque isso também faz parte do nome da imagem. E salve no seu computador na mesma pasta onde salvou a imagem, com o nome planodefundo.htm, desse mesmo jeito o nome do arquivo precisa ter o .htm no final pois assim será como se fosse uma pagina de internet. Agora é só ir até a pasta e clicar sobre esse arquivo que ele abrirá em seu navegador de internet e você poderá ver como fica a imagem de fundo sem precisar hospedar e mexer no seu blog. Isso poupa muito trabalho, afinal somente irá mexer no seu blog depois de visualizar a imagem de fundo que escolheu e já tem certeza que deseja usar-la.

Veja também:

Por que a imagem não aparece
Posicionar imagem de fundo
Fixar imagem de fundo
Como hospedar imagens
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros


Mostre link de outras postagens do seu blog no final de cada texto e isso ajudará a conseguir mais page views (visualizações de pagina). Existem muitas vantagens nisto: as pessoas podem ler outros posts do seu blog e com isso aumenta a chance das pessoas gostarem e você divulgação em redes sociais ou mesmo links para seu blog.

LinkWithin - Mostrar assuntos relacionados no blog
Outbrain - Assuntos relacionados e classificação com estrelas

Além disso, sites de busca (Google, Yahoo, Bing e outros) levam em conta o numero de visualizações para classificar os sites em seus resultados de buscas. A idéia é mais ou menos o seguinte quando mais paginas do seu blog os visitantes olharem é um sinal que seu conteúdo é interessante, ou seja, é um blog ou site de qualidade.

Sobre aparecer nos resultados das buscas do Google, leia também:
Como Evitar Punições do Google e Aparecer nos Resultados das Buscas

Já mostramos um serviço parecido com esse feito pelo Linkwithin, mas hoje vamos falar do Connecting bloggers (http://get.2leep.com). Para utilizar no seu blog é bem simples, coloque o endereço do blog na pagina onde vamos criar o widget de posts relacionados e clique no botão próximo, aguarde até o site recolher as informações.

gadget posts relacionados
Escolha um formato para seu gadget de assuntos relacionados e clique em próximo, mas como o próprio site avisa você poderá alterar isso depois.

links de postagens aleatórias
Agora digite um email e senha e quando clicar em registre-se, já aparecer a pagina onde poderá personalizar o modo que esses assuntos relacionados aparecem no seu blog, escolhendo o numero de linhas e colunas e o tamanho da imagem da miniatura que aparece apenas clicando e arrastando para ajustar o tamanho.

Quando clicar no ícone do blogger verá explicações sobre como adicionar ao seu blog. Mas não se preocupe é bem simples é apenas um código para colocar como um gadget (entre na pagina design > adicionar gadget > HTML/javascript e cole o código).

mostrar posts relacionados
Depois que finalizamos esse tutorial notamos que esse acessório pode ser utilizado por qualquer site e não somente pelo seu blog, ou seja, você pode criar um código nele e mostrar esse código para se outros blogueiros usarem e assim mostrar links para suas postagens. Apesar de ser um tipo de parceria um pouco mais difícil de conseguir pode ser interessante.

Ganhar Tempo e Conseguir mais Visitas no Blog

Essa é mais uma opção de posts relacionados que achamos valer a pena testar, afinal só fazendo testes poderemos descobrir o que é melhor para nosso site ou blog.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros



Efeito em imagem: Trocar a Imagem Quando Passa o Mouse

http://img22.imageshack.us/img22/7136/jornal.jpg
Respondendo uma duvida deixada em um de nossos comentários sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:

<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>


Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.

Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros

Mais um ano está terminando e chega a hora de repensar sobre o que fizemos ou deixamos de fazer durante o ano, mas principalmente planejar o que faremos em 2012 para que tenhamos realmente um feliz ano novo. A blogosfera cresceu muito em 2011, porém como muitos já sabem blogs são parecidos com micro empresas(Blogueiros: Os Novos Micro Empresários), ou seja, a maioria resiste pouco tempo no mercado ou na internet e justamente por isso devemos pensar por quais caminhos vamos seguir no próximo ano.

Fabiano Roberto10 comentários

Conteúdo

Mais visitas


Opções e Formatos do Botão Google +1

Já faz alguns meses que o Google lançou seu botão +1 para recomendar sites utilizando como base a sua própria rede social Google Plus, mas recentemente encontramos uma nova opção para utilizar o botão Google+1 no blog. Ou melhor, dizendo em vez demonstrar o numero de cliques no botão +1 dentro de um balão você pode mostrar em formato de texto: você e 200 outras pessoas marcaram isso com o +1. Claro que o numero 200 é apenas um exemplo.

Fabiano Roberto6 comentários

Acessórios

Ferramentas

Mais visitas

Redes Sociais


Modificar Menu Suspenso do Gadget Arquivo do Blogspot

No Blogger muitos blogueiros que usam o gadget Arquivo do blog no formato de menu suspenso (menu jump) mas quase ninguém faz modificações neste menu porém isso é bem simples de fazer, apenas precisa de cuidado na hora de alterar o código para não apagar coisas por engano, veja Porque os códigos não funcionam no blog. Então vamos mostrar como aumentar a largura, utilizar outras fontes ou mudar o tamanho da letra no gadget do arquivo do blog utilizando com o menu suspenso.


Fabiano Roberto18 comentários

Configurações Avançadas

CSS

Gadgets

Mais visitas


Personalizar Gadget Seguidores do Blog: Contador em Forma de Texto

Crie um botão personalizado em vez de usar o gadget de seguidores no seu blog. Isso pode ser feito misturando alguns códigos e imagens de fundo no seu blog. Assim você poderá criar um botão com contador de seguidores do seu blog com a imagem que desejar e poderá ficar com um tamanho que seja mais adequado ao layout do seu blog.

Fabiano Roberto14 comentários

Acessórios

Códigos

Personalizar

Redes Sociais

Scripts


Como Fazer um Menu Vertical Fixo no Blogger

Vamos mostrar como colocar um menu vertical fixo na lateral do seu blog, mas esse menu tem o estilo expansível, ou seja, quando passa o mouse sobre o menu o ícone expande e mostra o título do menu dando uma melhor aparência e atraindo atenção dos visitantes. Caso esteja procurando um menu com links lado a lado veja como fazer um menu horizontal.

Fabiano Roberto27 comentários

Acessórios

CSS

Efeitos

Scripts


Editar e Colocar Efeitos em Fotos e Imagens Online

Vamos falar sobre como criar efeitos em fotos ou imagens para usar no seu blog, redes sociais, enfim onde desejar. Os blogueiros sempre usam imagens para melhorar seus posts, mas colocar alguns efeitos, escrever sobre as fotos, colocar imagens de corações, opções de filtros, decorações, imagens animadas que piscam sobre as fotos e varias outras opções que podem deixar muito melhores as imagens que usa na internet.

Efeito em imagem: Trocar a Imagem Quando Passa o Mouse

http://img22.imageshack.us/img22/7136/jornal.jpg
Respondendo uma duvida deixada em um de nossos comentários sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:

<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>


Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.

Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros

Hospedagem de Imagens

Para colocar uma imagem no site ou blog primeiro precisamos colocar a imagem na internet, para isso usamos um site de hospedagem, nós sugerimos o ImageShack, você pode escolher entre fazer um cadastro ou não, nossa opinião é que vale a pena fazer assim poderá apagar alguma imagem se precisar após ter enviado e tem algumas outras utilidades como, por exemplo, poder sempre encontrar a url de uma imagem enviada há algum tempo atrás.

Depois de ter feito o cadastro clique em upload e na janela que abrir clique no botão arquivo, então encontre a imagem que deseja hospedar, após isso clique em upload e aguarde.

Agora a sua imagem já está na internet só falta copiar o link correto para ela, clique na letra i que está ao lado da imagem, e na janela que abrir copie o código na frente da palavra direct e já está pronto, essa é a url da sua imagem, agora é só usar como quiser, se precisar de ajuda para fazer a caixinha link-me ou código para postar a imagem use nosso gerador de código.

Para deixar mais fácil a explicação você pode ver na animação abaixo como fazer para colocar as imagens na internet.

Imagens Semi Transparentes no Blogspot

Um efeito legal de usar é deixar as imagens meio transparentes quando colocamos o mouse sobre elas, e o código para fazer isso pode ser usado em cada imagem separadamente ou em todas as imagens das postagens ou das colunas de menu do blog e ainda no blog inteiro se preferir.

O código pra deixar a imagem transparente você deve colocar na página editar html, depois de body{...}, mas cuidado para não colocar dentro das chaves do body porque tudo que estiver entre elas modifica a página inteira, veja na imagem:

http://4.bp.blogspot.com/_UTkn-5f-k5E/SXqB-nrZ6aI/AAAAAAAAAjI/-VxkOFYEwW4/s320/body.gif

no exemplo modificamos todas as imagens das postagens, caso esteja ruim de ver o código na imagem ele está aqui:

.post img{opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);}

.post a:hover img{opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);}


Da mesma maneira que fizemos isso com as postagens poderíamos fazer com a coluna lateral de menu, apenas trocando a palavra post por sidebar ou o nome que tiver a coluna do seu blog. Porém se quiser colocar esse efeito em apenas algumas imagens por exemplo nos banners que mostra no seu blog, faça da seguinte forma em vez da palavra post coloque no código banner, isso é apenas um exemplo poderia ser quaisquer outras palavras desde que você não tenha usado a mesma para nenhum outro estilo CSS. Isso também na página editar html. Então o código ficará assim:

.banner img{opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);}

.banner a:hover img{opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);}


Depois entre na página layout, clique em adicionar gadget, html/javascript e coloque o código das imagens (neste caso os banners), porém o código das imagens tem que estar entre divs (podem ser quantas imagens quiser), deste modo:

<div class="banner">Código das Imagens</div>


Isso fará que apenas as imagens que estiverem neste trecho fiquem semitransparentes quando colocar o mouse sobre elas. Seguindo a idéia de um comentário feito nesta postagem coloquei esse código no blog Meu Jornal, vocês podem ver que ao passar o mouse sobre as imagens das postagens elas ficam semitransparentes. Outra opção é deixar o fundo das postagens e menus semi transparentes isso dá um efeito muito legal, mas cuidado para não ficar ruim para ler os textos.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros


Fazer Banners para Redes Sociais, Parcerias e Outros

Existem muitos programas para editar e criar imagens grátis na internet e também muitos sites que fazem esse tipo de serviço online, nós mesmos já fizemos diversas publicações sobre programas e sites grátis para edição de imagens:

Editor de Imagens, Fotos e Banners Online
Download de Icones para Redes Sociais (Twitter, Facebook, Orkut)

Mas muitas pessoas ainda têm duvidas como fazer imagens com links para colocar no blog, isto pode servir tanto para banner de redes sociais (twitter, orkut, facebook, dihitt e outras) ou qualquer outro site que deseje linkar no seu blog. Então vamos às etapas para criar um banner.

Encontrar imagens para fazer um banner
A busca Google de imagens é um ótimo lugar para encontrar fotos e imagens, mas claro que existem outros mecanismos de busca e compartilhamento de imagens, portanto use aquele que gostar mais e souber melhor utilizar. Apenas sugerimos que se souber use as palavras em inglês, assim terá muito mais resultados nas suas buscas de imagens, por exemplo, nas imagens do Google fiz um teste e achei 1.370.000 de resultados para a palavra cachorro e 221.000.000 pesquisando a palavra dog.

Ajustando o tamanho da imagem para o banner
Provavelmente a imagem que encontrar na internet não estará no tamanho que você deseja utilizar, então você pode usar um Programa Grátis para Edição de Imagens ou um site de edição de imagens para modificá-la, veja como e onde editar fotos online

Então use o programa ou site que conhecer melhor uma coisa que li já faz bastante tempo num debate sobre qual o melhor programa para editar imagens e qual a melhor versão deles é que o melhor é aquele que você conhece e sabe usar, pois não adianta ter a versão mais recente do mais completo programa de edição de imagens se você não souber utilizar o programa.

Também é possível ajustar essa imagem pelo código HTML deste jeito alterando os valores 120(largura) e 60(altura):
<a href='http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html'target='_blank'><img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" width="120" height="60" /></a>

Mas isso não é recomendável por dois motivos: pode distorcer a imagem e perder a http://www.blogger.com/img/blank.gifqualidade da imagem, o segundo motivo é a demora para carregar a foto essa alteração no código só muda a visualização da imagem, mas o peso dela é o mesmo, ou seja, seu banner tamanho pequeno vai demorar o mesmo tempo que a imagem grande para aparecer na tela. Veja sobre Fazer um Blog mais Rápido.

Na hora de colocar o banner o primeiro passo é saber qual link vamos usar nele, ou seja, quando além clicar no banner para qual pagina da internet ele vai. Como falamos no começo você pode usar para qualquer rede social que tenha perfil só precisa copiar o endereço da sua pagina, veja alguns exemplos de endereços de nossas paginas assim você poderá ir até essas redes e pegar seu link:

Twitter: http://twitter.comhttp://www.blogger.com/img/blank.gif/fabianoroberto
Comunidade no Orkut: http://www.orkut.com.br/Main#Community?cmm=46751209
diHITT: http://www.dihitt.com.br/usuario/fabianoroberto

Fazer o código do banner ou enviar a imagem para o blogger
Agora que já temos a imagem e o endereço da pagina só falta postar isso no blog, temos duas opções ou você entra na pagina design, clica para adicionar um gadget e escolhe a opção imagem

banners e imagens no blogger
Então envia a imagem para o blog e coloca o endereço das redes social que desejar no campo link e pronto, agora é só salvar e posicionar o gadget onde quiser, mas no caso de varias redes deverá repetir o processo enviando uma imagem por vez.

Outra opção é criar o código HTML dos banners e depois de pronto adicionar como um gadget de html/javascript, veja o exemplo do código aqui:

<center>
<div style="float:left; width:33%"><a href='endereço do site'target='_blank'><img src="endereço da imagem" /></a></div>
<div style="float:left; width:33%"><a href='endereço do site'target='_blank'><img src="endereço da imagem" /></a></div>
<div style="float:left; width:33%"><a href='endereço do site'target='_blank'><img src="endereço da imagem" /></a></div>
<center>

Assim poderá colocar as imagens lado a lado como fazemos em nosso site (veja o tutorial aqui:Imagens Lado a Lado, Fazer Colunas nos Gadgets), existe varias maneiras de fazer isso uma delas você pode ver aqui: mas para isso será necessário hospedar as imagens antes achamos que as melhores opções podem ser hospedar as imagens diretamente no blogger ou usar o Google sites.

Lembre-se que maior parte dos erros com imagens que não aparecem ou link que não funcionam são erros na hora de copiar e colar os endereços das paginas então cuidado se faltar qualquer letra os códigos dos banners não funcionam.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros

Retirar o Links das Imagens das Postagens

http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s320/imagem.jpg
Depois de colocar alguns códigos que bloqueiam o botão direito do mouse, teclado e outras coisas surge um novo problema nas imagens das postagens é possível clicar nelas e abrir numa nova janela onde é possível copiar facilmente, então precisamos impedir que a imagem da postagem tenha um link para a própria imagem. Para resolver isso é bem simples: basta trocar o link para a imagem por # no código gerado pelo blogspot.
No caso da imagem postada acima o código original quando postei a imagem era:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s1600-h/imagem.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 300px; height: 100px;" src="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s320/imagem.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5292708043065404642" /></a>

Então no começo dele depois de href=" troque esse endereço por #, apague cursor:pointer; cursor:hand; e coloque no lugar cursor: default; isso faz não aparecer a mãozinha no lugar do cursor, o código fica desse jeito:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="#"><img style="display:block; margin:0px auto 10px; text-align:center;cursor: default;width: 300px; height: 100px;" src="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s320/imagem.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5292708043065404642" /></a>

E pronto agora mesmo que clicar sobre ela nada acontecerá.

Outra maneira de fazer isso é deixar apenas a parte do código que é a imagem e retirar o link, no caso do exemplo acima deixe apenas o que está entre , e apague cursor:pointer; cursor:hand; neste caso basta apagar não é preciso colocar nada pois o mouse não muda ao passar sobre a imagem, ficando assim o código:

<img style="display:block; margin:0px auto 10px; text-align:center;width: 300px; height: 100px;" src="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s320/imagem.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5292708043065404642" />

As duas explicações funcionam do mesmo jeito é apenas uma questão de qual achar mais fácil fazer, porém no caso de postar uma imagem maior que será reduzida automaticamente pelo blogspot não tem como usar essa explicação. O que resta a fazer então é publicar em um site de hospedagem de imagem (Photobucket ou ImageShack) e depois colocar o código aqui, claro se a largura do seu blog for suficiente para isso senão terá mesmo que reduzir o tamanho da imagem.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros

Mostrar os Titulos dos Posts e Miniaturas das Imagens

Recebemos um comentário pedindo para falar sobre como fazer uma pagina mostrando os marcadores do blog, mas exibindo apenas os títulos das postagens e uma miniatura da imagem publicada, então fizemos uma adaptação de outro código utilizado para Lista aleatória das postagens recentes do blog.

Mas o código que vamos mostrar pode ser utilizado também para mostrar uma lista de seus posts mais recentes com as miniaturas das imagens ao lado dos títulos das postagens, como fazemos em nossa pagina de postagens recentes.
http://4.bp.blogspot.com/-GEVetcV6yn8/ToIQHjshOkI/AAAAAAAACtQ/cewgPfJ16XE/s400/titulos-miniaturas-posts.jpg
Esse código pode ser utilizado numa das paginas extras do seu blog ou até mesmo em um gadget de HTML/javascript, porém é mais recomendado utilizar como uma pagina senão pode fazer seu blog ficar mais lento devido ao tempo para carregar os códigos e imagens.

Adicione uma pagina extra no seu blog e coloque o seguinte código:
<style type="text/css">
.arquivos a{color: #000000;padding: 5px;margin: 20px 5px; border: 1px solid #999;}
.arquivos a:hover{color: #009;border: 1px dashed #000;background-color: #FFC;}
</style> <div class="arquivos"><script type="text/javascript">
numposts = 5
imgr = new Array();
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif";
showRandomImg = true;
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 60;
summaryColor = "#0000ff";
icon2 = " ";
label = "";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s =s.join("");
s = s.substring(0,chop-1);
return s;
} function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img= new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
document.write('<a title="Leia mais..." style="display:block; text-decoration:none" href="'+posturl+'"><img style="float:left;border:none;margin-right:5px" src="'+img[i]+'" width="80" height="80"/><font style="font-size:120%"'+posttitle+' '+cmtext+ '</font><br/><div style="clear:both"></div></a>');
j++;
}
}
document.write("<script src=\"http://www.frasescurtas.com.br/feeds/posts/default/-/Auto Ajuda?start-index=1&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>

Você precisa alterar algumas partes do código para configurar o seu blog neste javascript:

Aparência dos links
.arquivos a{color: #000000;padding: 5px;margin: 20px 5px;border: 1px solid #999;}
.arquivos a:hover{color: #009;border: 1px dashed #000;background-color: #FFC;}

Isso é uma formatação em CSS normal, você pode ver aqui mais detalhes sobre: Alterar cores dos links - CSS e assim poderá mudar a aparência para que combine melhor com seu layout.

Quantidade de Posts Mostrados:
numposts = 5 – apenas altere o numero 5 para a quantidade que desejar, claro desde que tenha postagens suficientes neste marcador.

Postagens sem imagens
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif"; aqui você deve colocar um endereço de imagem para utilizar se o post não tiver imagens, ou seja, ela só parece se não houver miniatura disponível. Caso tenha duvidas sobre o endereço da imagem, veja aqui: Imagem não aparece no Blog ou Site

Endereço do Blog ou do Marcador
<script src=\"http://www.dicasparablogs.com.br/feeds/posts/default/-/Imagem de Fundo?start-index=1&orderby=published&alt=json-in-script&callback=showrecentposts

Tenha muito cuidado para alterar esse código, pois qualquer diferença ele não funciona, inclusive as letras maiúsculas no nome do marcador. Portanto altere o trecho:
http://www.frasescurtas.com.br/feeds/posts/default/-/Auto Ajuda

Assim por exemplo:
http://www.dicasparablogs.com.br/feeds/posts/default/-/Imagem de Fundo

Tamanho da miniatura ao lado do titulo do post
width="80" height="80" simplesmente altere esses valores como quiser, lembrando que width é largura e height é altura da imagem.
http://4.bp.blogspot.com/--WWXbUTCeR4/ToIQH_2w3WI/AAAAAAAACtY/5IAHOpkTbFc/s400/titulo-post-miniatura-imagem.jpg

Uma coisa importante sobre esse código é que para utilizar em uma postagem ou pagina extra, veja na pagina de criar postagens a configuração opções, ela deve estar marcado para Interpretar HTML digitado e não Mostrar HTML literalmente.

Veja outras formas de mostrar links de outras postagens no seu blog e assim fazer as pessoas ficarem mais tempo em suas paginas:

LinkWithin - Mostrar assuntos relacionados no blog
Outbrain - Classificação com estrelas nas postagens
E também como resolver o problema das Miniaturas das Imagens não aparecem

Esperamos que gostem e achem boas utilidades para esse código no seu blogger. Lembramos apenas que caso resolva utilizar isso como um gadget ele deixará a pagina do seu blog um pouco mais lento.
Related Posts with Thumbnails
Outros tutoriais para ajudar Blogueiros

Nenhum comentário:

Postar um comentário