Fica muito complicado eu postar tutoriais para cada pedido, ou ensinar cada um individualmente, porque são muitas as variações que me pedem e que podem ser aplicadas.
Prefiro então, ensinar a vocês o conceito, e depois é só deixar a preguiça de lado e usar sua criatividade em um blog de testes, ok? :P
Vou usar exemplos complexos, cheios de condicionais, para explorar bem o assunto. Hoje será um exemplo para a home. Depois veremos como ampliar este exemplo, complicando mais um pouco e diferenciando outras páginas.
Vejamos como é o código dos posts.
Obs.: Este é o código do template Mínima - o seu pode ser um pouco diferente:
<!-- includable do post -->
<b:includable id='post' var='post'>
<!-- início do post -->
<div class='post hentry'>
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'/>
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<!-- fim do corpo do post -->
<!-- início do jump-break "Leia Mais" -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<data:post.jumpText/></a>
</div>
</b:if>
<!-- fim do jump-break "Leia Mais" -->
<!-- início do rodapé do post -->
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<!-- códigos na linha 1 do footer -->
</div>
<div class='post-footer-line post-footer-line-2'>
<!-- códigos na linha 2 do footer -->
</div>
<div class='post-footer-line post-footer-line-3'>
<!-- códigos na linha 3 do footer -->
</div>
</div> <!-- fim do rodapé do post -->
</div> <!-- fim do post -->
</b:includable> <!-- fim do includable do post -->
Prestem atenção em cada div - onde elas abrem e onde elas fecham. Essa é a parte mais complicada: abrir e fechar corretamente as divs e as condicionais b:if.
Entendendo o código, escolhemos o que queremos em cada nova classe que iremos criar, para que depois essas classes recebam estilos diferentes.
Vamos então começar com um exemplo, criando uma classe para o primeiro post da página inicial e uma classe para os outros posts, também da página inicial.
A condicional para a página inicial:
<b:if cond='data:blog.url == data:blog.homepageUrl'>A condicional para primeiro post:
<b:if cond='data:post.isFirstPost == "true"'>Daremos a essa classe o nome de first-post:
<div class='first-post'>E a classe dos posts restantes será chamada de index-posts
No primeiro post da página inicial iremos colocar o título do post e o corpo do post (post-body) com o jump-break. Deixaremos de fora o rodapé do post (post-footer). Nos posts restantes colocaremos apenas o título do post. Precisaremos então usar a condicional b:if (SE) e b:else (SENÃO). As demais páginas terão o código normal dos posts do Blogger.
Decidido isso, iniciamos a montagem do código para os posts da página inicial, abrindo e fechando cada condicional b:if / b:else e as divs das classes first-post e index-posts (Escreva primeiro o código em um bloco de notas para visualizar certinho onde começam e terminam as tags):
<b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:post.isFirstPost == "true"'> <div class='first-post'> <!-- AQUI SERÃO COLADOS OS CÓDIGOS ESCOLHIDOS PARA O PRIMEIRO POST --> </div> <!-- fecha a div class first-post --> <b:else/> <!-- condicional: se não for o primeiro post, o código será o seguinte --> <div class='index-posts'> <!-- AQUI SERÃO COLADOS OS CÓDIGOS ESCOLHIDOS PARA OS POSTS RESTANTES --> </div> <!-- fecha a div class index-posts --> </b:if> <!-- fecha o código condicional para a página inicial --> <b:else/> <!-- condicional: se não for a página inicial, o código será o seguinte --> <!-- AQUI FICARÁ O CÓDIGO DAS OUTRAS PÁGINAS --> </b:if> <!-- fim das condicionais -->
Montamos a base do código condicional, agora precisamos copiar e colar nos locais corretos, os códigos dos posts do Blogger. Até fechar o código
</b:if> que finaliza a condicional para a página inicial é fácil. Você deve prestar atenção no local onde colocar a última </b:if>.Vamos então, primeiro, copiar o código do título do post, corpo do post e jump-break, que escolhemos para colocar no primeiro post e colar em nosso bloco de notas:
<!-- includable do post -->
<b:includable id='post' var='post'>
<!-- início do post -->
<div class='post hentry'>
<!-- início da condicional para a Home Page -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- início da condicional para o First-Post -->
<b:if cond='data:post.isFirstPost == "true"'>
<div class='first-post'>
<!-- AQUI FICAM OS CÓDIGOS ESCOLHIDOS PARA O PRIMEIRO POST -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'/>
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<!-- fim do corpo do post -->
<!-- início do jump-break "Leia Mais" -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<data:post.jumpText/></a>
</div>
</b:if>
<!-- fim do jump-break "Leia Mais" -->
</div> <!-- fecha a div class first-post -->
<b:else/> <!-- condicional: se não for o primeiro post, o código será o seguinte -->
<div class='index-posts'>
<!-- AQUI SERÃO COLADOS OS CÓDIGOS ESCOLHIDOS PARA OS POSTS RESTANTES -->
</div> <!-- fecha a div class index-posts -->
</b:if> <!-- fecha o código condicional para a página inicial -->
<b:else/> <!-- condicional: se não for a página inicial, o código será o seguinte -->
<!-- AQUI FICARÁ O CÓDIGO DAS OUTRAS PÁGINAS -->
</b:if> <!-- fim das condicionais -->
O código deve ser colado logo depois da div que inicia a área de posts. É recomendável repetir a âncora da ID do post, em cada condicional
<a expr:name='data:post.id'/> Nos demais posts, escolhemos colocar apenas o título dos posts. Pegamos então o código do título e colamos no local adequado no bloco de notas:
<!-- includable do post -->
<b:includable id='post' var='post'>
<!-- início do post -->
<div class='post hentry'>
<!-- início da condicional para a Home Page -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- início da condicional para o First-Post -->
<b:if cond='data:post.isFirstPost == "true"'>
<div class='first-post'>
<!-- AQUI FICAM OS CÓDIGOS ESCOLHIDOS PARA O PRIMEIRO POST DA HOME -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'/>
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<!-- fim do corpo do post -->
<!-- início do jump-break "Leia Mais" -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<data:post.jumpText/></a>
</div>
</b:if>
<!-- fim do jump-break "Leia Mais" -->
</div> <!-- fecha a div class first-post -->
<b:else/> <!-- condicional: se não for o primeiro post, o código será o seguinte -->
<div class='index-posts'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS RESTANTES DA HOME -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!-- fim do título do post -->
</div> <!-- fecha a div class index-posts -->
</b:if> <!-- fecha o código condicional para a página inicial -->
<b:else/> <!-- condicional: se não for a página inicial, o código será o seguinte -->
<!-- AQUI FICARÁ O CÓDIGO DAS OUTRAS PÁGINAS -->
</b:if> <!-- fim das condicionais -->
O código condicional para a página inicial está montado. Agora você deve colar o código completo do post no local indicado, desde
<a expr:name='data:post.id'/> até a /div que fecha o post-footer. Ou seja, a /b:if que finaliza as condicionais deverá ficar entre a /div que fecha o post-footer e a /div que fecha a área dos posts.<!-- includable do post -->
<b:includable id='post' var='post'>
<!-- início do post -->
<div class='post hentry'>
<!-- início da condicional para a Home Page -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- início da condicional para o First-Post -->
<b:if cond='data:post.isFirstPost == "true"'>
<div class='first-post'>
<!-- AQUI FICAM OS CÓDIGOS ESCOLHIDOS PARA O PRIMEIRO POST DA HOME -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'/>
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<!-- fim do corpo do post -->
<!-- início do jump-break "Leia Mais" -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<data:post.jumpText/></a>
</div>
</b:if>
<!-- fim do jump-break "Leia Mais" -->
</div> <!-- fecha a div class first-post -->
<b:else/> <!-- condicional: se não for o primeiro post, o código será o seguinte -->
<div class='index-posts'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS RESTANTES DA HOME -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!-- fim do título do post -->
</div> <!-- fecha a div class index-posts -->
</b:if> <!-- fecha o código condicional para a página inicial -->
<b:else/> <!-- condicional: se não for a página inicial, o código será o seguinte -->
<!-- AQUI FICA O CÓDIGO DAS OUTRAS PÁGINAS -->
<a expr:name='data:post.id'/>
<!-- início do título do post -->
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!-- fim do título do post -->
<!-- linha abaixo do título do post -->
<div class='post-header-line-1'/>
<!-- início do corpo do post -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<!-- fim do corpo do post -->
<!-- início do rodapé do post -->
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<!-- códigos na linha 1 do footer -->
</div>
<div class='post-footer-line post-footer-line-2'>
<!-- códigos na linha 2 do footer -->
</div>
<div class='post-footer-line post-footer-line-3'>
<!-- códigos na linha 3 do footer -->
</div>
</div> <!-- fim do rodapé do post -->
</b:if> <!-- fim das condicionais -->
</div> <!-- fim do post -->
</b:includable> <!-- fim do includable do post -->
Escrito o código HTML, na parte de estilos você usa as classes que nomeamos e coloca os estilos que preferir:
.post h3{
/* estilos para o título do post nas outras páginas */
}
.first-post h3{
/* estilos para o título do primeiro post */
}
.index-posts h3{
/* estilos para o título dos outros posts da home */
}
.post-body{
/* estilos para o corpo do post nas outras páginas */
}
.first-post .post-body{
/* estilos para o corpo do post do primeiro post */
}
.index-posts .post-body{
/* estilos para o corpo do post dos outros posts da home */
}
etc....
Observação:
Sem querer ser antipática, e já sendo... :PNão dá prá ficar atendendo cada dúvida individual, me desculpem!
Perguntas como:
queria tirar a data
quero mudar a imagem na home
nos outros posts quero colocar o link dos comentários
vão ficar na geladeira enquanto eu não tiver tempo sobrando.
Já fiz um tutorial bem mastigadinho, é só navegar um pouco pelo BloggerSPhera e os outros blogs sobre o Blogger (vejam no meu blogroll), que tenho certeza que vocês acharão suas respostas conseguirão fazer do jeito que desejarem, tá? ;)
Comentários: 9
Estou sumido *-*
mas é para uma duvida + novidade !
vc consegue fazer um formulario de comentario igual ao deste site ?
link o criador o fez usando form e talz (bem melhor que o iframe) e o melhor compativel com o blogger .
Enfim , se puder me ajudar a crialo por favor ...
rsrs
Oi Gama! Tá sumido mesmo :O
Não é difícil montar o formulário, mas não consegui resolver 2 problemas:
1) O formulário usa script PHP (como a maioria dos forms com method='post') e não consigo achar uma hospedagem grátis pra rodar o script. Não tentei aquelas que precisam de registros complicados. Os hosts tipo RipWay não rodaram.
O arquivo php é este:
bloggercomment.php
Se você conseguir um host que rode PHP me passe o link e testo de novo.
2) Não consegui ativar a moderação. O comentário é publicado mesmo com a moderação configurada no Blogger. Eu teria que fuçar o código do script prá ver se acho um jeito, mas sem host que rode, nem dá prá fazer testes.
Prá montar o form, coloque o código abaixo no lugar do código do comment-form:
código-form-comentarios.txt
Testa com o php do blog que vc deixou o link (http://www.ctrlcblog.com.br/bloggercomment.php) - hospedagem do Blog do CTRL+C no Wordpress. Dá certinho :D
Pena que o Blogger não hospeda :(
Beijão!
N ro ...
este ai é o script JS gerado do php , este não é o PHP em si ..
então n serve x)
Olá Rô, esse tutorial está fantástico, você fez um ótimo trabalho ai.
Andei estudando um pouco dos códigos da plataforma blogger e confesso que não tem mistério, só é necessário dedicação e um tempo sobrando.
Parabéns pelo trabalho.
Abçs!
Olá Rô faz mais barato ae pra nois !!!
tá ino muito rápido¨¨O¨¨¨¨O¨¨
Gama: Estou meio aperriada prá ver isso direito agora. Coloquei na lista de tarefas, assim que der, olho com mais calma, tá?
Oi Douglas! Também acho simples (até demais) a estrutura do Blogger. Com conhecimentos básicos de HTML e programação eu faço a festa... hehe. Obrigada, viu?
Nando: Ah.. vai.. tá mastigadinho.. não choramingue.. :P
Abraços, pessoal!
Lherme publicou um post sobre.. Título do Post
Para quem comentou sobre o formulário de comentário do CTRL+C: é um script em PHP feito por mim que cuida de alguns dados necessários para o comentário ser enviado.
Fiz na época que ainda utilizava o Blogger como plataforma para publicações, e continua funcionando até hoje. Está hospedado no meu domínio que está rodando Wordpress hoje.
Podem utilizar o link da minha própria hospedagem por enquanto, mas não garanto que vai funcionar pelo resto da vida.
Ahh... e o SuperAtiva também utiliza o meu script mesmo. É o blog da minha ex-namorada =P
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
Feed dos Comentários<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Blog This!