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.
Entre na pagina designer >> adicionar gadget >> html/javascript e coloque os links que desejar usando esse código como exemplo:
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.
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>
<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}
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}
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.
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.
Naturalmente
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:
Naturalmente
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>
<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>
<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>
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.
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).
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.
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).
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90_1EjAnaWf0pvYAknLDsntibbAFZIERZIKVwkIseQMvtOQFH9F47udPuI0BozYsmHYh4yQ8gk2rI_KCq91kyJOQ6OZV7uE9YeMZXIWZ8gP43kdnzcEaN4pkThbHFccuOXTVTcXPeAYg/s400/dicas2.jpg" /></a><a href='http://www.dicasparablogs.com.br'target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90_1EjAnaWf0pvYAknLDsntibbAFZIERZIKVwkIseQMvtOQFH9F47udPuI0BozYsmHYh4yQ8gk2rI_KCq91kyJOQ6OZV7uE9YeMZXIWZ8gP43kdnzcEaN4pkThbHFccuOXTVTcXPeAYg/s400/dicas2.jpg" /></a>
</div>
.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90_1EjAnaWf0pvYAknLDsntibbAFZIERZIKVwkIseQMvtOQFH9F47udPuI0BozYsmHYh4yQ8gk2rI_KCq91kyJOQ6OZV7uE9YeMZXIWZ8gP43kdnzcEaN4pkThbHFccuOXTVTcXPeAYg/s400/dicas2.jpg" /></a><a href='http://www.dicasparablogs.com.br'target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90_1EjAnaWf0pvYAknLDsntibbAFZIERZIKVwkIseQMvtOQFH9F47udPuI0BozYsmHYh4yQ8gk2rI_KCq91kyJOQ6OZV7uE9YeMZXIWZ8gP43kdnzcEaN4pkThbHFccuOXTVTcXPeAYg/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.
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.
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:
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
»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
Escolha a cor, tipo e tamanho da fonte e no campo abaixo (O texto da sua assinatura) digite seu texto e clique em OK.
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)
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.
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
Escolha a cor, tipo e tamanho da fonte e no campo abaixo (O texto da sua assinatura) digite seu texto e clique em OK.
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)
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.
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
Escolha a cor, tipo e tamanho da fonte e no campo abaixo (O texto da sua assinatura) digite seu texto e clique em OK.
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)
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.
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
Escolha a cor, tipo e tamanho da fonte e no campo abaixo (O texto da sua assinatura) digite seu texto e clique em OK.
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)
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.
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
 |
 |
 |
 |
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>
<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
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
|
|
|
|
|
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>
<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
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.
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.
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).
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.
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.
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.
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).
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.
Outros tutoriais para ajudar Blogueiros
Efeito
em imagem: Trocar a Imagem Quando Passa o Mouse
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.
<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.
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.
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.
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.
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.
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.
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
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.
<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.
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.
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:
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.
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:
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.
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):
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90_1EjAnaWf0pvYAknLDsntibbAFZIERZIKVwkIseQMvtOQFH9F47udPuI0BozYsmHYh4yQ8gk2rI_KCq91kyJOQ6OZV7uE9YeMZXIWZ8gP43kdnzcEaN4pkThbHFccuOXTVTcXPeAYg/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
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.
Outros tutoriais para ajudar
Blogueiros
Retirar
o Links das Imagens das Postagens
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRF-qowPc1bmbmW3BmPcG_pN7ftGxNPXj4b1z1n_ediI9WB2wzT-KcBmqMeC0fs8xVTkhthKmw_5oFY6rxTTGY-ESgiNpwWGhQ5RMslCSyYV0fgcFpceJUBzLZAUiADpKNc1l_NHNrzzY/s1600-h/imagem.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 300px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRF-qowPc1bmbmW3BmPcG_pN7ftGxNPXj4b1z1n_ediI9WB2wzT-KcBmqMeC0fs8xVTkhthKmw_5oFY6rxTTGY-ESgiNpwWGhQ5RMslCSyYV0fgcFpceJUBzLZAUiADpKNc1l_NHNrzzY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRF-qowPc1bmbmW3BmPcG_pN7ftGxNPXj4b1z1n_ediI9WB2wzT-KcBmqMeC0fs8xVTkhthKmw_5oFY6rxTTGY-ESgiNpwWGhQ5RMslCSyYV0fgcFpceJUBzLZAUiADpKNc1l_NHNrzzY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRF-qowPc1bmbmW3BmPcG_pN7ftGxNPXj4b1z1n_ediI9WB2wzT-KcBmqMeC0fs8xVTkhthKmw_5oFY6rxTTGY-ESgiNpwWGhQ5RMslCSyYV0fgcFpceJUBzLZAUiADpKNc1l_NHNrzzY/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.
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.
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.
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:
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>
.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.
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.
Outros tutoriais para ajudar
Blogueiros
Nenhum comentário:
Postar um comentário