http://s2meh.blogspot.com/2011/01/numero-de-comentarios-dentro-de-um.html Respondendo uma duvida deixada em um de nossos comentarios sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um codigo para trocar a imagem quando passamos o mouse sobre ela, e um codigo simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o codigo para fazer isso e:<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>Voce precisara 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 explicacao em video depois e so colocar os enderecos das imagens no codigo acima e pronto. Mas note que uma das imagens e repetida duas vezes no codigo.Apesar de falarmos em imagens para banners de parcerias esse codigo serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer e que esse codigo apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notara que ela ficou semi transparente a explicacao de como fazer isso voce encontra em nossa postagem sobre imagens transparentes. Que tal mostrar apenas os resumos das postagens no blog com uma miniatura da imagem somente alterando algumas linhas de html no seu blogger e sem usar nenhum codigo javascript. Isso e muito bom e certamente e bem mais facil de fazer que as versoes anteriores para fazer resumo das postagens:Postagem expansivel com miniatura da imagemMostrar resumo da postagemO procedimento e bem simples, voce entra na pagina editar html, marque a opcao para expandir modelos de widgets e procura por post.body, deve estar deste jeito no seu blog: <data:post.body />Entao apague essa linha e coloque isso no lugar:<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><b:else/><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/><b:if cond='data:post.hasJumpLink'><data:post.body/><b:else/><b:if cond='data:post.snippet'><b:if cond='data:post.thumbnailUrl'><div class='Image thumb'><img expr:src='data:post.thumbnailUrl'/></div></b:if><data:post.snippet/><div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></div><b:else/><data:post.body/></b:if></b:if></b:if></b:if>Cuidado para nao mostrar duas vezes a mesma coisa no seu blog! Veja se logo apos esse trecho se tem o codigo:<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></div></b:if>Se encontrar apague, pois isso fara que o link para ler a postagem completa apareca duas vezes como na imagem abaixo, mas se retirar esse codigo nao tera problemas.E ja esta pronto, agora e so visualizar seu blog e vera que na pagina inicial ou paginas dos marcadores do blog aparecem um trecho do seu texto e uma miniatura das imagens.Essas imagens foram feitas durante nossos testes em nosso outro blog Sites uteis e interessantes.Para melhorar o layout podemos adicionar algumas linhas de codigo CSS e deixar a miniatura da imagem ao lado do texto, volte na pagina editar HTML e coloque esse trecho antes de linha </b:skin> (caso tenha duvidas veja aqui: Onde colocar os codigos no blog):.thumb img {float: left;margin: 5px;}A parte float:left e o lado que a imagem ficara caso queira do lado direito entao use float: rightE se quiser personalizar o link leia mais, adicione essas linhas no mesmo local que colocou o outro codigo CSS:.jump-link {text-align: center;margin:auto}.jump-link a{font-size:16pt;color:#f00}.jump-link a:hover{color:#00f}Veja aqui como formatar texto ou colocar bordas. Veja como ficou depois de feitas essas alteracoes no layout.Encontramos e fizemos algumas modificacoes no tutorial publicado no