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

01 agosto 2009

isFirstPost - Exemplo 2


Continuando o post anterior, explicarei aqui como deixar o seu blog como o Exemplo 2. Neste exemplo, os posts aparecem resumidos na página inicial e em formato de lista nos marcadores e arquivos (como uso aqui no meu blog). Além disso, usei jQuery no primeiro post, que esconde e revela parte do conteúdo sem sair da página.
Como lembrar nunca é demais, lá vai o conselho da titia: Nunca faça modificações diretamente no seu blog 'oficial'. Crie um blog de  testes para isso, evitando desesperos e dores de cabeça.
Atenção: se você seguiu o tutorial anterior e colocou os códigos para o Exemplo 1, substitua tudo pelo que se segue:

1- Clique em Expandir Modelo de Widget, procure por <b:include data='post' name='post'/> e substitua por:

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

<div id='first'>
<b:if cond='data:post.title'>
<h1 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>
</h1>
</b:if>

<p><data:post.body/></p>

<br/>
<span class='commentlink'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='post'/>
</b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='first'>
<ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div></b:if></b:if></b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>

<b:else/>

<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

</b:if>

O que fiz aqui foi basicamente isso: Se a condição for o primeiro post na home page, o post aparecerá dentro da div First, exibindo título, texto e link para comentários, caso contrário, os posts aparecem normalmente nas páginas internas. E ainda, se for diferente das páginas internas e diferente da home page, o primeiro post deve aparecer em forma de lista ( <ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul> ). Se os posts não estiverem contidos em First (ou seja, todos os outros posts), também devem, nestas condições, aparecer em forma de lista (<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>) e fora de todas estas condições, os posts devem aparecer normalmente.

Provavelmente existe uma maneira mais simples e enxuta de organizar estas condições (e espero mesmo que sim!) mas confesso que passei muitas horas até conseguir organizar os códigos desta maneira e foi a única sequência lógica que realmente funcionou comigo. Prometo que assim que descobrir uma maneira mais simples ou direta de dispor as condicionais, volto aqui e explico para vocês.

Salve as modificações. Se você está começando agora, siga os passos do primeiro tutorial  para ver como aplicar o hack de resumos automáticos e esconder as informações de post-footer e data dos resumos, além do estilo para os resumos da página inicial. Lembre-se de modificar as medidas para que acompanhem a largura do primeiro post.

Se você já seguiu anteriormente o primeiro tutorial, a diferença aqui é que os estilos para First (tanto na página inicial quanto nas listas) serão colocados abaixo da tag ]]></b:skin>, dentro de uma condicional:

Estilo para First em forma de lista:

<style>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#first{margin:6px 0px;background:#fff;padding:6px;border:1px solid #e3e2e3; clear:both;}
#first ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;}
#first li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold}
</b:if></b:if></style>

<style>

Aqui estilo para First na home page:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
#first{ /* altere os estilos da forma que achar melhor */
float: left;
margin: 0px 0px 10px 5px;
width: 580px;
text-align:justify;
padding:0px 12px 12px;
font-size: 14px;
line-height: 1.4em;
font-family: &#39;Trebuchet MS&#39;;
color: #3b3b3b;
border-top: 1px solid #E9E9E9;
border-left: 1px solid #E9E9E9;
border-right: 2px solid #E9E9E9;
border-bottom: 2px solid #E9E9E9;
background: #f8f8f8
}
#first h1 {margin: 10px 0 0 0; padding: 3px 20px 6px 20px;font-size: 24px;font-family: Verdana;color:#fff;border-bottom:1px dotted #aeb4af} /* estilo para o título */

#first h1 a{margin: 0px auto; padding: 0px;font-size: 24px;font-family: &#39;Palatino Linotype&#39;;font-weight:normal;color:#e71ea7;letter-spacing:1px; } /* estilo para o título */

#first img{margin: 0 5px 5px 0px;padding: 5px; background: #fff; border: 1px solid #dfc8d1; float:left;width: 150px;height:180px; } /* estilo para as imagens em first-post */
#first .commentlink{float:right} /* estilo para o link de comentários */

#first .date-header{float:right} /* estilo para a data */

</b:if></style>

Agora acima de ]]></b:skin> os estilos para a div 'títulos' que apresenta os outros posts em forma de lista nos arquivos e marcadores:

#titulos{margin:10px 0px 6px;background:#fff;padding:6px;border:1px solid #e3e2e3} /* estilo para a div */
#titulos ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;} /* estilo para a lista */
#titulos li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold} /* estilo para os itens da lista */

Para ver o resultado, entre neste blog e clique em algum marcador ou no mês de julho dos arquivos.

Para colocar o efeito de revelar/esconder no primeiro post, siga este tutorial   no Empório Digital. O efeito também aparecerá nos posts internos, não apenas na página inicial.

O exemplo 3 dispensa um novo tutorial, pois a diferença está apenas na medida dos posts resumidos, que ocupa toda a largura da coluna, ao contrário do exemplo dois, onde cada resumo ocupa metade da medida, ficando dispostos lado a lado.

Artigos Relacionados

29 comentários:

bordadosdemim disse...

Oi Ariane!

Li os dois tutoriais, não entendi direito, mas também já é quase fim de noite, então, lerei outra vez amanhã pela manhã e já tentarei incrementar no meu blog de testes; Lembrando que uso o template black e estou estruturando um novo blog no template março, preciso descobrir qual estilo se adequa melhor a cada um, mas adorei os tutoriais, são tudo o que eu mais queria aprender!
Beijos, um lindo domingo pra você!

Ariadna Garibaldi

Juh disse...

Oi!

Achei lindo esse template que tá na fotinha desse tutorial.. qual template é esse? Se puder me responde por e-mail tá? falecomjuliana@yahoo.com.br Gostaria muito de coloca-lo no meu blog :)

Ariadna Garibaldi disse...

Oi Ariane! Eu de novo, rs

Deparei-me com um pequendo problema: Para instalar o hack é preciso hospedar o java script e não encontrei nenhum site gratuito, os q tentei parecem estar "fora do ar". O usuário compulsivo ensina um caminho pra hospedar o java no próprio blogger, mas claro, o código fica imenso e confesso que fiquei receosa em tentar. Mas o template blak que eu uso, salvo engano, já vem com um hack cuja instalação é bem simples isso basta? eu to muito confusa. Caso não, você pode indicar algum site free pra hospedagem java?


Obrigada

Ariadna Garibaldi

Ariadna Garibaldi disse...

Oi Ariane, já me "desconfundi" (rindo muito) o hack tem que ser o automárico, isso finalmente entendi; Fica a pergunta sobre o java: Melhor hospedar fora (orientação do bloggersphera) ou posso instalá-lo no próprio template seguindo a orientação do compulsivo para instalação de javas? Sei que a decisão é minha, só quero a forma mais segura, já que sou completamente leiga no assunto e não encontrei um bom site de hospedagem gratuita. Obrigada e desculpe o "aluguel". Ah, consegui instalar o perfil como vc orientou, o blog novo vai nascer já bem diferente. Beijos e obrigada pela paciência, rss

Ariadna Garibaldi

Ariane disse...

Ariadna, no primeiro tutorial eu mostrei como hospedar no próprio Blogger, o que eu prefiro mil vezes, pois estas hospedagens todas que tem por ai já me deixaram na mão. É muito melhor não depender de serviços externos, mesmo que o código fique grande.

Camila disse...

Eu gostei mto msm desse template.
Onde posso baixa-lo?
Eu estou lendo os seus tutoriais, do blogger.
Pois mudou algumas coisas, estava acostumada quando era apenas HTML.
Já estou na Parte III.
Percebi uma coisa que a Parte II não está no marcadores, de "Como fazer um template para o Blogger" tive que achar nos artigos relacionados.
Por acaso tem algum post, explicando os elementos dentro da tag "body" que é responsável por post, comentários, data, busca, essas coisas?
É que lembro que antigamente era mto fácil de indentificar essas coisinhas, e agora não está nada fácil!
Aguardo resposta!

Diana disse...

Oi! Meu nome é Diana, e eu gostaria de saber se este template que você usou como exemplo, do All-Star, está disponível? Por favor me mande um e-mail se sim, para drciana@hotmail.com . Obrigada, e parabéns pelo blog! ^^

Helô disse...

Nova leitora!.. ^^
Espero ansiosamente o exemplo 3 p/ os meus blogs teste hehe..

palekaiko disse...

hi ariane,

Thank for the tutorial .It's a very good and detailed tutorial. I think your tutorial will revolutionise the way people design magazine based template for blogger. It can make blogger homepage looks better now.

I use google translator so I can only grapsed the idea.

I love the template on http://testelabels.blogspot.com/. Is it available as free download?

Camila disse...

Oi Ariane,
Eu gostei mto do seu blog, adoro seus tutoriais, são bem explicados!
Eu estou lendo o "como fazer um template" do blogger, gostaria de informar que a parte II não está dentro do link marcador, de como fazer um template, tive que procurar nos artigos relacionados.
Eu adorei esse template do exemplo 2. Será que tem como eu baixa-lo?
Gostaria de saber também, se tem algum tutorial por aqui explicando os conteúdos dentro da tag body? Códigos responsáveis por post... comentários... buscas... etc. Se tem poderia postar o link?
Agradeço.
Estou aguardando a resposta.
E parabéns pelo esse blog!
ps: é impressão minha ou ultimamente o blogspot ñ tem aceitados comentários direito? Sempre aparece "Não foi possível processar sua solicitação. Tente novamente."

Guilherme disse...

Meus post são divididos em dois
tem como fazer com os dois primeiros post????

mauriciotrindade disse...

Olá ariane, coloque um post dizendo como aumentar a área de postagem do blospot!

blogpaedia.com.br disse...

Testando o comentário a pedido da Ariane.

OCP disse...

Já tentei fazer isso desde que li mas ainda não consegui. :(

Mas não desisti. Vou tentar num template minima já que tenho testado no que tenho agora e já está muito personalizado...

Ademir disse...

Ariane por favor encontrei um template wordpress,o mais bonito que eu já vi até hoje, só que não sei como converter para blogger da uma olhada nele
http://demo.camelgraph.com/bubble-light/ ele é muito similar a esse outro com a diferença da coluna dos posts no centro http://falknerpress.blogspot.com/ esse já convertido para blogger,
vç não poderia converte-lo para a nação blogueira ? eu ficaria muito grato, caso vç tope converte-los,eu fiz upload dos dois e deixo aqui o link para download, pra não te dar tanto trabalho
http://www.easy-share.com/1907225303/pelo%20amor%20de%20deus%20convert%20esse%20tema.rar
desde já eu te agradeço.

Bárbara Olimpia disse...

Ain.. qero muito esse layout do all star.. onde consigo ? bj...

barbara.olimpia.fcdofabio@hotmail.com

Laerte disse...

Gostei dos dois tutoriais. Parabéns Ariane!

Abraços!
www.bolagirando.blogspot.com

Joana disse...

Oi Ariane!
Há algum tempo teu blog já vem me ajudando com as dicas aqui postadas. Mas tenho um problema q não consigo encontrar solução em parte alguma: sempre quis deixar o background da sidebar com um efeito de transparência, e consegui. Porém, as palavras e imagens colocadas na sidebar tbm ficam transparentes. Gostaria de saber se é possível deixar apenas o fundo da sidebar transparente...
O endereço do meu blog de testes é esse: http://joana--teste.blogspot.com/ (observe como os letras e a figura contidas na sidebar estão transparentes...)
Desde já agradeço.

:)

adolescencte disse...

Hey Ariane!

Eu quero lhe fazer uma perguntinha...

No template que uso não tem como eu colocar anúncios adsense junto das postagens, eu queria saber se voce sabe como eu posso “destravar” meu template para colocar os anúncios.

Eu uso o template “Gamezine”!

isaabeelaa disse...

ariane, amei esse template.. passa no seu blog ai para nós podermos fazer o download para blogger ;)
beijos, visita eu http://legalmentebela.blogspot.com
;*

John Érico, disse...

Olá, Ariane!

Bem, eu adorei a sua postagem, é bem interessante e deixa o blog mais "leve" de textos... já até tentei fazê-lo mas é muito acima do que eu posso fazer, então, eu gostaria de tirar uma dúvida fora do assunto, eu ficaria muito grato se você me ajudasse a resolver... bem, no meu blog: http://boogst.blogspot.com/ você pode perceber que tem bordas na postagem e na sidebar, entretanto, os textos, images e vídeos estão "colados" nessas bordas, e eu não consegui de modo algum resolver isso... Se puder me ajudar, eu realmente ficaria muito grato!

Abraços!

Patriarca disse...

Vc é d+ seja lá quem vc for me ajudou muito...
agora quero te abusar mais um pouquinho, como eu faço para nas minhas postagens ao invés de aparecer o linnk postagen mais recente, home e postegem mais antiga, apareça uma imagen assim: "<.>", como tem no seu blog?

Pâmela Rodrigues disse...

Ariane, este template do exemplo 2, possui o código dele aqui no blog?
Eu o achei lindo e gostaria de ter o código.
Beijossss

Vanessa disse...

Oi Ariane

Amei esse template, só q não faço a mínima ideia de como colocar no meu blog. Eu sou nova aki...
Espero q vc me ajude.

Bjks e parabéns pelo blog

Márcia disse...

Oi estou tentando criar um template diferente do que o Blogger oferece - é uma maneira de passar o tempo. Gostaria de agradecer à vc e a outros blogs porque de alguma maneira lendo-os aprendo um pouco - além das informações que o próprio Blogger do Google oferece - apesar de ter deixado nas configurações do blog apenas eu como leitora e para não aparecer nas listagens de procura do google, etc. Gostaria entretando de aprender um pouco mais e procurei por vários blogs como mudar o footer, ou seja as imagens que aparecem como comentários, etc. No Cria e Recria e no Templates e acessórios existe essa informação, mas tenho seguido as instruções sem nada conseguir. Você possui essa informação .... Bjs,

July disse...

Olá, não como colocar esse template para baixar??? a forma de baixar o modelo e fazer upload é mais fácil pra mim, obrigada!

Ricardo Nunes disse...

o hack e quase perfeito so falta e aparecer a data fora do post

Thaynara Paiva disse...

Achei lindo esse template que tá na fotinha desse tutorial.. qual template é esse? Se puder me responde por e-mail tá? thaynaralnp@hotmail.com Gostaria muito de coloca-lo no meu blog :)

Laah Moraes' disse...

Nem ligue Ariane, sou nova e estou criando meu blog hoje ^^
Já fiz várias coisas que mostram em seu blog e adorei... Mais uma pergunta (acho que totalmente besta) "Clique em Expandir Modelo de Widget" como assim? onde acho isso para clicar? =[

Vllw

Postar um comentário

Os comentários são moderados.