Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

Lightbox do Blogger: O Retorno

Hoje foi apresentado mais um capítulo da novela Lightbox do Blogger...


No primeiro capítulo o efeito surgiu do nada e desagradou muita gente, principalmente por que não havia maneira de desativá-lo. No capítulo dois, depois de muitas reclamações dos usuários, o recurso foi suspenso. Agora retorna, mas com a sensata opção de desativá-lo, contentando Gregos e Troianos.

Se você Não deseja utilizar o efeito Lightbox nativo do Blogger, vá em Configurações -> Formatação e procure pelo trecho:


Depois de selecionar Não, desça toda a página e salve a alteração.
Leia Mais

Blogger e o efeito Lightbox

Efeito Lightbox nativo do Blogger
Ontem um leitor entrou em contato comigo para se queixar que, de uma hora para outra, todas as imagens do seu blog abriam de 'maneira estranha'. Ao verificar o blog, notei que o efeito Lightbox se aplicava à todas elas e que ele não havia colocado nenhum código no template para isso. Uma olhada no código fonte mostrou que o efeito era nativo do Blogger e alguns de vocês já devem ter notado o mesmo em seus blogs: ao clicar nas imagens elas se abrem expandidas sobre um fundo escuro e no rodapé da página aparece miniaturas de todas as imagens do post. Bem, nem eu nem o leitor que me procurou apreciamos o efeito e uma corrida até o Fórum de Ajuda do Blogger (em inglês), mostrou que muitos outros usuários estavam insatisfeitos. Uma coisa é você buscar por um efeito em sua página, outra bem diferente é ele ser imposto e até agora o Blogger não ofereceu nenhuma maneira de desativar o Lightbox (o que eu acredito que irá ocorrer em breve - oremos).

De qualquer maneira, aqui vai um hack para impedir o efeito, desenvolvido por Mark, do blog Code from English Coffe Drinker. Eu testei em alguns dos meus blogs e funcionou perfeitamente.

Copie o código abaixo e cole imediatamente antes da tag </head>:

<script type='text/javascript'>
  //<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmouseover=function() {
   var html = this.parentNode.innerHTML;
   this.parentNode.innerHTML = html;
   this.onmouseover = null;
  };
 }
}

if (window.addEventListener) {
 window.addEventListener('load',killLightbox,undefined);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>
Salve a modificação e faça um teste, clicando nas imagens dos seus posts. 
Pelo menos por ora, foi a única solução encontrada.
Leia Mais

Template Super Clean

Ver Demo| Download


página interna
O Template Super Clean contém:

Menu Horizontal
para editar os links do menu, porcure por:

<div id='menu'>
<ul>
<li class='selected'>
<a href='Link 01'>Home</a></li>
<li><a href='Link 02'>Tutoriais</a></li>
<li><a href='Link 03'>Portfolio</a></li>
<li><a href='Link 04'>Contato</a></li>
</ul>
 </div>


Slide
este modelo de slide encontrei no blog Mundo Blogger , onde vocês encontrarão um detalhado tutorial sobre como editá-lo. Para editar os links e imagens, procure por:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='galeria'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='url do post' rel='1'><img alt='' src='url da imagem 01'/></a>

<a href='url do post' rel='2'><img alt='' src='url da imagem 02'/></a>

<a href='url do post' rel='3'><img alt='' src='url da imagem 03'/></a>

</div></div>
<div class='paging'>
<a href='' rel='1'>1</a>
<a href='' rel='2'>2</a>
<a href='' rel='3'>3</a>
</div></div>
</div>
</b:if>

se não desejarem exibir o slide, basta apagar todo o código acima.

Resumo de postagens automática na Home e páginas de Marcadores e Arquivos. Quando não houver imagem no post, uma imagem substituta aparecerá.

Efeito Lightbox nas imagens. (prettyPhoto)
Para utilizar o efeito, siga as explicações do post do template Diary.

Ao final de cada postagem é exibida uma caixa com o avatar e informações sobre o autor. Para editá-la, clique em Expandir Modelo de Widget e procure pelo trecho abaixo:

<!-- Post-Autor -->

<div class='post-autor'>
<span class='autor-avatar'><img src='url do avatar'/></span>
<span class='autor-descrição'>

<h4>Título</h4>

<p>Descrição do autor.......................</p>

</span>
</div>

Os scripts para o funcionamento do efeito Lightbox-prettyPhoto (que acompanham o arquivo xml) devem ser hospedados e suas url's colocadas, substituindo o que está em negrito:

<script src='http://jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://jquery.prettyPhoto.js' type='text/javascript'/>
<script src='https/prettyphoto/custom.js' type='text/javascript'/>

Eu hospedei meus scripts no google sites e funcionam perfeitamente, mas, ao que parece, não funcionam para quem tem domínio próprio, por isso recomendo que busquem a melhor alternativa para cada caso.

De maneira nenhuma o link do Templates Novo Blogger (TNB) deve ser alterado ou retirado do rodapé do template.

Espero que apreciem :)
Leia Mais

Template Diary

Esta semana me encantei com este tema para wordpress, criado por Site5.com e decidi compartilhá-lo com os usuários do Blogger:

template Diary

Configurações:

Search
procure por:
<div id='topSearch'>
<form action='http://diary-notebook-template.blogspot.com/search' id='searchform' method='get'>

onde está em negrito, coloque o nome do seu blog

Social Icons
procure por:
<!-- Begin Social Icons -->
<div id='socialIcons'>
<ul>
<li><a class='twitter tip' href='http://twitter.com/ArianeN_' title='Follow Us on Twitter!'>Follow Us on Twitter!</a></li>
<li><a class='facebook' href='https://www.facebook.com/pages/Templates-Novo-Blogger/208491902533894' title='Join Us on Facebook!'>&quot;Join Us on Facebook!</a></li>
<li><a class='rss' href='http://feeds2.feedburner.com/TemplatesNovoBlogger' title='RSS'>RSS</a></li>
</ul>
<a href='http://templatesparanovoblogger.blogspot.com/2009/02/templates-novo-blogger.html' id='butContact'>Contact</a>
</div>
<!-- End Social Icons -->
altere o que está em negrito por suas url's

Twitter Updates
procure por: 
<div id='twitter'>
<h3>Latest Tweets</h3>
<script>
$(function(){
$(&quot;#twitter&quot;).tweet({
avatar_size: 24,
count: 3,
username: &quot;ArianeN_&quot;,

altere o que está em negrito pelo seu nick no Twitter

JavaScript

este tema usa uma série de scripts. Para sua segurança, hospede os códigos em seu site de preferência e troque as url's em:
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/jquery.tweet.js' type='text/javascript'/>
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/jquery.prettyPhoto.js' type='text/javascript'/>
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/custom.js' type='text/javascript'/>
O script prettyPhoto (vale à pena visitar o site e conhecer todos os recursos disponíveis) permite uma visualização das imagens em estilo Lightbox. Para usar este recurso, acrescente ao código da imagem o trecho: rel='prettyPhoto', como no exemplo abaixo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-NHqyTrcd5qk/TlELKp_tOaI/AAAAAAAAaFs/TIvm_zZWcxA/s1600/bg3.jpg" imageanchor="1" rel="prettyPhoto"><img border="0" height="266" src="http://3.bp.blogspot.com/-NHqyTrcd5qk/TlELKp_tOaI/AAAAAAAAaFs/TIvm_zZWcxA/s400/bg3.jpg" width="400" /></a></div>

Para usar o recurso galeria (veja no primeiro post do Demo) acrescente ao código da imagem o trecho: rel="prettyPhoto[pp_gal]"
Para usar os outros recursos, visite o site do desenvolvedor.

É expressamente proibido retirar os créditos do autor e do TNB.


Leia Mais

Links para o final de semana - Icones

Segue a indicação de alguns pacotes de ícones gratuitos bem  bacanas, para você aproveitar o fim de semana e dar aquela repaginada no visual do seu blog :)












Leia Mais

Lista de Postagens Populares na Horizontal

 
Um dos novos widgets que eu mais gosto (e uso nos meus outros blogs) é o de Postagens Populares. É uma maneira interessante de atrair seus visitantes para outros textos que talvez não se apresentem na página inicial, além de mostrar os assuntos que mais agradam seus leitores. No entanto, por padrão, a lista aparece na vertical, limitando a possibilidade de mostrá-la em outras áreas do blog que não a sidebar, além de ocupar bastante espaço da coluna lateral, mesmo que se escolha poucos posts a serem mostrados.
Uma maneira que considerei interessante foi mostrar esta mesma lista na horizontal, dentro de alguma div que ocupe toda a largura da página, como a div #crosscol-wrapper (e neste caso, apareceria abaixo do cabeçalho, como neste blog).

Também é possível arrastar o widget para o Footer, por exemplo, e a apresentação dos Posts Populares ficaria no final da página

Tutorial para quem usa os Modelos de Layout(2006)

A primeira coisa que se deve fazer é se certificar da largura total de #outer-wrapper (a div que engloba todas as outras). Procure no CSS do seu template por #outer-wrapper e veja o valor que está em width. Se no seu template este valor for 100%, será preciso então definir um valor para #content-wrapper (a div que engloba #main-wrapper e #sidebar-wrapper). Se o valor de width em #outer-wrapper for algo como 980px, não será preciso definir #content-wrapper.

Para definir uma largura para content-wrapper, acrescente no CSS (imediatamente acima da tag ]]></b:skin> ):

#content-wrapper{margin: 0 auto; width: 990px}

o valor de width deve ser alterado conforme a largura que você desejar.

Tendo definido uma largura para content-wrapper, acrescente também este trecho (ainda acima da tag ]]></b:skin> ):

#crosscol-wrapper{margin: 0 auto; padding: 0px}
#PopularPosts1{width: 100%; margin: 0px auto; padding: 5px 0px} /*define que o widget ocupe 100% de largura */
#PopularPosts1 h2{font-size:18px;text-align:left; border-bottom: 1px dotted #fff} /*estilo para o título do widget */
.PopularPosts .widget-content{float:left;margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.PopularPosts .widget-content ul {margin: 0px auto;padding: 0px 0px;width: 100%; list-style:none; } /* estilo para a lista de posts */
.PopularPosts .widget-content li {margin: 0px 6px 10px 6px;width: 182px;padding: 0px;height: 180px; overflow:hidden;list-style:none; float:left; border: 1px solid #fff;} /*estilo para cada item da lista. Altere os valores de width, height, border, etc, para que se encaixem na largura total. */
.item-content{font-size: 12px; text-align:left; padding: 5px 10px} /* estilo para o resumo do post */
.PopularPosts img{margin: 0px 0px;padding: 4px; background: #fff; float:right} /*estilo para a imagem */
.PopularPosts .item-title{line-height:1.3em} /* estilo para o titulo de cada post */

Salve a modificação. Em Elementos de Página, arraste o widget Postagens Populares para sob o cabeçalho (ao arrastar, deve aparecer um retângulo  onde se deve encaixar o widget), ou para #footer.

Se você desejar, poderá também colocar no início ou final da coluna dos posts, mas deverá modificar as medidas para que se encaixem na largura da coluna.  No meu exemplo, as medidas são ideais para #content-wrapper com width: 990px; mostrando cinco posts populares por 'linha'.

Se quiser mostrar os posts populares apenas na primeira página, vá em Editar HTML, clique em Expandir Modelo de Widget e encontre o widget PopularPosts expandido. É um código bastante extenso e a condicional (em vermelho) deve ser colocada logo após <b:includable id='main'> e seu fechamento logo antes de </b:includable> como mostrado abaixo:


<b:widget id='PopularPosts1' locked='false' title='Populares' type='PopularPosts'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
 ......... mais código .........


  </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:if></b:includable>
</b:widget>

Para os que usam os Modelos de Designer

Para os que usam os novos modelos, fiz este teste mas é necessário fazer algumas aterações no HTML. Primeiro vá em Designer do Modelo => Avançado e em Adicionar CSS, acrescente os códigos passados acima (aqui, a única diferença será que você deve especificar uma medida exata de largura e altura para #crosscol-wrapper, como na imagem abaixo - clique para ampliar -):


Salve a modificação e vá em Editar HTML e procure por:

<div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
    </div>

E acrescente depois de </div>:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
Salve as modificações e em Elementos de Página, arraste o widget Posts Populares para o espaço abaixo do cabeçalho.

Se quiser mostrar os posts populares apenas na primeira página, deixe desta maneira:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>

</b:if>

Como sempre, acho muito mais fácil fazer do que explicar, por isso, se tiverem dúvidas, não hesitem em deixar nos comentários.
Leia Mais

Template Pin-Up 2

Este é o Template Pin-Up reformulado: o formato dos resumos automáticos foram modificados, bem como detalhes nos títulos dos posts e sidebar. Além disso, acrescentei os posts relacionados em forma de slide, que foram usados no Template Blogger Games. O script utilizado é de autoria do JMiur, blog Vagabundia:

Posts Relacionados em Slide


Para editar os links do Menu1 (no alto, à direita), basta criar uma lista de links e arrastar para o espaço acima do cabeçalho, em Elementos de Página.
Para editar os links do Menu2 (abaixo do título do blog) você deve procurar o seguinte trecho no código HTML do template:

<!-- Inicio do Menu2 -->
<div id='subscribe'>
<ul>
<li class='link1'><a href='coloque aqui o seu link'>Categorias</a></li>
<li class='link2'><a href='coloque aqui o seu link'>Fotos</a></li>
<li class='link3'><a href='coloque aqui o seu link'>Arquivos</a></li>
<li class='link4'><a href='coloque aqui o seu link'>Sites</a></li>
</ul>
</div>
<!-- Fim Menu -->

Coloque os links entre as aspas, depois de a href= e modifique os nomes Categorias, Fotos, Arquivos e Sites.

Todas as fontes e cores podem ser modificadas no painel de fontes e cores do Blogger (Designer do Modelo => Avançado)

Um template bem feminino, espero que gostem :)
Download
Leia Mais

Template Blogger Games

Antes de apresentar o novo template TNB, devo fazer uma confissão: costumo gastar muitas horas de internet entretida com joguinhos em flash. Me diverte, distrai, estimula o meu raciocínio e minha agilidade mental. Enfim, eu gosto. E gosto tanto que tenho vários blogs de jogos no Blogger (os meus jogos preferidos são os do tipo Physics e Escape Room). Para criar meus blogs procurei  por templates que pudessem apresentar na página inicial uma grande quantidade de jogos, mas não tive muita sorte. Assim, passei a modificar o Template Mínima usando o hack de resumos automáticos e um pouco de condicionais. O template que disponibilizo agora é uma versão melhorada dos templates que eu mesma uso e espero que seja útil para quem tem ou pretende ter um blog de games no Blogger.

Blogger Games Template: versão sem slide na sidebar (clique na imagem para ver o blog).



A versão com slide na sidebar pode ser conferida AQUI

    O Arquivo para Download contém:
    • XML: dois arquivos xml; um com a versão sem slide e outro com slide; escolha um modelo para fazer o Upload.
    • Backgrounds: 10 backgrounds diferentes (na verdade só muda a cor do cabeçalho);
    • Imagens: as imagens utilizadas no template;
    • Screenshot: captura de telas com indicações dos trechos que devem ser modificados no template (e que constam no tutorial abaixo).
    Por favor, antes de instalar o template, leia atentamente as explicações abaixo!
    O Template Blogger Games utiliza o hack de resumos automático juntamente com o mesmo script utilizado no Template Feminina, que mostra na página inicial resumos de postagens por categoria. A diferença aqui é que, além de mostrar os resumos por categoria também aparecem os últimos posts publicados. Em Formatação, determine que apareça um número múltiplo de 3 na página inicial. Os resumos por categorias aparecerão abaixo das últimas postagens publicadas (Last Games).
    Para editar o script, leia o tutorial do Template Feminina, o procedimento é o mesmo.

    Não se esqueça: Você deve colocar o nome dos Marcadores exatamente como os criou, ou seja, se você criou um  marcador todo em letra minúscula (ou só com a primeira em maiúscula, seja como for) você deve colocar exatamente igual no script! Cuidado para não apagar nenhuma aspa ou vírgula. Não se esqueça de colocar a url do seu blog nos locais indicados e o nome dos marcadores na mesma ordem do início do script.

    Passo 1: Localize este trecho do código e coloque o nome dos marcadores, exatamente como foram criados, entre aspas duplas e separados por vírgulas. Faça isso, na mesma ordem, na primeira e segunda linha.

    Passo 2- Coloque a url do seu blog onde indicado.

    Passo 03- Coloque o link do seu blog e o nome do Marcador (na mesma ordem do Passo 01) onde indicado. Não modifique mais nada!

    Atenção! :No script está determinado que deve aparecer 3 posts por categoria; se você não tiver no mínimo 3 posts publicados em uma categoria, nada vai aparecer. Por isso, certifique-se de publicar primeiro um mínimo de 3 posts em cada categoria!

    Social e Linkbar:

    Social é o menu horizontal à esquerda com links para Twitter, Facebook e RSS. Estes links devem ser colocados diretamente no código do template, como mostra a imagem abaixo:


    Linkbar: é o menu à direita. Basta criar uma lista de links e arrastar para o topo, em Elementos de Página, como mostra a imagem:


    Menu: menu horizontal abaixo do cabeçalho; tal qual a Linkbar, é criado à partir de uma lista de Links em Elementos de Página.

    Galeria: uma série de 10 widgets de imagens fixas abaixo do menu. Para editá-las, clicar em Editar, remova a imagem e coloque a imagem do jogo e o link para o post onde ele se encontra. A Galeria é mostrada em todas as páginas mas se você desejar mostrar apenas na página inicial, procure pelo trecho: <div id='galeria'> e acrescente os códigos em vermelho:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <div id='galeria'>

    <b:section class='galeria' id='galeria1' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Image89' locked='true' title='' type='Image'/>
    </b:section>

    .......................................

    </div>
    </b:if>

    Posts: os posts foram adaptados para mostrar jogos e suas descrições, com miniatura das imagens dos mesmo. A estrutura do post que usei foi: código do jogo + class description. Dentro desta class deve ser colocada a imagem do jogo mais a descrição. Para utilizar a class description, vá em Configurações, Formatação e em Modelo de Postagem coloque o código:
    <div class='description'>
    </div>

    salve a alteração e note que em todo post que iniciar (clicando na Aba HTML do Editor de Postagem) o código aparecerá. Coloque o código do jogo acima de <div class='description'> e antes de </div>, a imagem e a descrição. Deve ficar assim:


    Toda imagem colocada dentro de <div class='description'> será reduzida automaticamente. Se não quiser ter uma imagem reduzida ou se desejar escrever um texto que não seja uma descrição do jogo, basta apagar o código antes de escrever seu post.


    Post Footer: além dos dados costumeiro (postado por, marcadores, reações, etc), o post-footer conta com os links de compartilhamento do AddThis e posts-relacionados em forma de slide, mais um presente que o JMiur nos oferece (e fiz questão de acrescentar os créditos por seu trabalho no script que ele criou).

    Slide: para quem pretende usar a versão com o slide na sidebar, saiba que ele é automático, ou seja, não é preciso editar nada, ele mostra as últimas publicações automaticamente. Este slide é tão bacana que você pode escolher mostrar publicações que não estão na home. Ou seja, se você mostra 9 publicações em Last Games, não vai querer que estas 9 apareçam no slide também, então você determina no script que ele mostre os posts anteriores a estas 9 publicações. Para isso, procure o trecho que aparece na imagem abaixo e modifique o valor apontado para o número de posts que pretende exibir na página inicial:

    Aqui, quem nos oferece este recurso genial é a Rô Zanchetta do excelente BloggerSphera. (Aliás, os dois blogs que mais consulto na internet: BloggerSphera e Vagabundia).


    Background: o arquivo contém 10 imagens diferentes de backgrounds (na verdade só alterei a cor do cabeçalho). Hospede as imagens em um post, copie a url da imagem escolhida e coloque em body, conforme abaixo:


    Outras alterações: Como alterar ícones, favicon, logo, link Jogar!: o arquivo contém imagens apontando para os locais exatos onde as modificações devem ser feitas.

    Todas as fontes e cores podem ser alteradas pelo painel do Blogger: clique em Desiner do Modelo e em Avançado.


    DEMO 01
    DEMO 02
    Download

    • Testado nas últimas versões dos navegadores: Internet Explore, Chrome e Firefox. 
    • Os jogos e imagens incluídos nos dois blogs onde se encontram os Demos foram retirados do site MochiMedia, que fornece uma quantidade enorme de códigos de jogos em flash de várias categorias.
    • A barra no rodapé do Demo 01 é um serviço oferecido pelo site Wibiya (é necessário fazer  cadastro).
    • O link para o Templates Novo Blogger não deve ser retirado do rodapé do template!
    • Espero que gostem ;)

    Obs: se desejar, você pode entrar em contato para contratar o serviço de instalação deste template (apenas instalação e edição dos códigos. Suporte para modificações no modelo não disponível).
    Leia Mais

    Ocultando elementos das páginas internas

    Hoje, pela manhã, recebi a seguinte pergunta, através do formulário de contato, do leitor Victor Hugo Filgueiras:

    "[...] Queria só tirar uma dúvida sobre gifs, queria saber se tem algum jeito da Gif rodar somente dentro do post e não rodar na página inicial, como esse site aqui: www.forgifs.com, [...] obrigado,
    Victor."
    Sobre gifs:

    Colocar gifs animadas nos posts do Blogger sempre foi um tanto problemático por que a imagem perdia seu movimento e a saída era hospedar a imagem em outro site que não o Blogger. Porém, a pergunta do Victor me chamou a atenção para o assunto e fui fazer meus testes. Notei que a imagem se comporta de maneira diferente dependendo do modo em que é inserida no post. Se a imagem for colocada pela aba Escrever, o gif não perde seu movimento, o que não ocorre se for colocada na aba Editar HTML. Veja aqui os testes que fiz (tanto no Blogger in Draft quanto no Blogger.com). Isto por que, quando se coloca a imagem no modo HTML ela é automaticamente redimensionada, o que não ocorre quando se coloca no modo Escrever.



    Nos testes que fiz, se a imagem é colocada no modo HTML, perde seu movimento definitivamente, independente de suas dimensões. Talvez por que  na aba Editar HTML é obrigatório escolher uma dimensão para a imagem, o que não ocorre na aba Escrever e isso talvez influencie o comportamento da imagem, não sei. Quem souber, por favor, me avise :)

    Antes de prosseguir e definitivamente responder a pergunta do Victor, só mais uma observação: se você colocar um gif animado pela aba Escrever e ele não apresentar movimento, clique na imagem e selecione a opção Tamanho Original

    Agora, respondendo definitivamente ao Victor...

    Como fazer um gif apresentar movimento apenas dentro do post (página interna)

    1) Se você usa o resumo de postagem do Blogger: 
     
    A primeira coisa que devemos fazer é criar uma condicional para garantir que um determinado conteúdo não apareça na página interna (no post), apenas na página inicial (home). Para isso, vá em Design =>Editar HTML (o código html do seu template), e coloque o seguinte trecho acima da tag  </head>:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    .home{display:none}
    </style>
    </b:if>

    Esta condicional envia a seguinte mensagem: o que estiver contido na class home não deve aparecer na página interna (post).

    Salve a alteração, abra uma nova postagem e nela coloque o gif animado duas vezes, ambas pela Aba Escrever e redimensione a primeira imagem, para que ela perca o movimento (deixe-a maior ou menor que o original) e garanta que a segunda esteja no seu tamanho original. Se está usando um resumo de postagem, insira a segunda imagem após o link do resumo (more), assim:


    <div class='home'>
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s1600/Clap-Clap.gif" imageanchor="1"><img border="0" height="240" src="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s400/Clap-Clap.gif" width="320" /></a></div>
    </div>

    < !--more-- >

    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" /></a></div>

    Note que o código da primeira imagem está entre <div class='home'> </div>.  Isso faz com que a primeira imagem não apareça na página interna. Tudo o que for colocado dentro destas tags ficará oculto na página interna. Veja o exemplo no último post que aparece nesta página: a primeira imagem e o texto em lilás não aparece na página interna (clique em Leia Mais).

    Você também pode simplesmente trocar o separator (a classe da imagem no Blogger) por home:

    <div class="home" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s1600/Clap-Clap.gif" imageanchor="1"><img border="0" height="240" src="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s400/Clap-Clap.gif" width="320" /></a></div>


    2) Se não usa resumo de postagem :

    Agora, vamos supor que você não use nenhum recurso de resumo de postagem. Apenas deseja mostrar uma imagem estática na página inicial e que, clicando nesta imagem, você seja levado para a página interna, onde ela ganha movimento (como no exemplo do site que o Victor passou). Para isso, faremos o seguinte, criaremos duas condicionais e duas classes:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    .home{display:none}
    </style>
    </b:if>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    .pagina{display:none}
    </style>
    </b:if>
    </head>

    No post, trocaremos, na primeira imagem, o separator (a class para imagem do Blogger) por home e na segunda, por pagina e alteraremos a  url da primeira, direcionando-a para o post. Mas como direcionar uma imagem para um post que ainda não foi nem publicado? 

    Por padrão, a url do post tem este formato:

    http://testenovasidebar.blogspot.com/2011/07/gif01.html

    url do blog + ano e mês da publicação + nome do post (todo em letra minúscula) + html.

    Se o titulo do post contiver mais de uma palavra, elas serão separadas por traços:

    http://testenovasidebar.blogspot.com/2011/07/uma-imagem-qualquer-de-teste.html

    Assim, basta acrescentar no código da primeira imagem a url que o post terá (com o título que você criou):

    <div class="home" style="clear: both; text-align: center;">
    <a href="http://testenovasidebar.blogspot.com/2011/07/gif01.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s200/Clap-Clap.gif" width="200" /></a></div>

    <div class="pagina" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s1600/Clap-Clap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s1600/Clap-Clap.gif" /></a></div>

    No pior dos casos, se você não acertar a url, publique normalmente, verifique como ficou a url e acrescente o link na imagem, editando o post :)


    Veja este exemplo em funcionamento aqui (clique na imagem do primeiro post que aparece). Você pode depois editar e apagar o título da postagem, para que fique apenas a imagem (como eu fiz).

    ********************************************************************************
    Este post ficou muito maior do que eu havia planejado mas espero, sinceramente, que não esteja muito confuso e que tenha conseguido responder a pergunta do Victor ;)
    Leia Mais

    Retirar marcadores dos posts

    Algumas pessoas me perguntam como manter a lista de marcadores na sidebar sem que os mesmos apareçam nos finais das postagens.

     

    Para isso, vá em Editar HTML, clique em Expandir Modelo de Widget, procure  e apague todo o trecho abaixo:

    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span>

    Feito isso, clique em Visualizar e se tudo estiver ok, clique em Salvar.
    A lista de Marcadores continuará aparecendo na coluna lateral (sidebar), porém, não mais aparecerá  abaixo das postagens.
    Leia Mais