Selasa, 26 Juli 2011

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).

    Kamis, 14 Juli 2011

    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 ;)