Giro pelo Mundo: 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.
Entre na pagina designer >> adicionar gadget >> html/javascript e coloque os links que desejar usando esse código como exemplo:
<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>
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{
.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
Personalizar títulos do menu do blog
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.
<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>
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.
Como fazer Apresentaçao de Slides com Banners
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.
Postado por Fabiano Roberto às 13:59 10 comentários
Postado por Fabiano Roberto às 12:38 6 comentários
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.
Postado por Fabiano Roberto às 14:50 18 comentários
Postado por Fabiano Roberto às 13:18 14 comentários
Postado por Fabiano Roberto às 14:55 27 comentários
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.
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;
.post a:hover img{opacity:0.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;
.banner a:hover img{opacity:0.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.
· Organizar Banners ou Pagina de Parcerias entre Blogs
· Imagem seguindo o ponteiro do mouse
· Colocar bordas nas imagens do blog
· Colocar Efeitos em Fotos e Imagens: Bordas, Desenhos, Texto, Editar Cores
Retirar o Links das Imagens das Postagens
<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>
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" />