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).
Mostrando postagens com marcador Condicionais. Mostrar todas as postagens
Mostrando postagens com marcador Condicionais. Mostrar todas as postagens

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

Como ocultar a sidebar na home do blogger

Não é de hoje (não mesmo) que tento encontrar uma maneira de esconder a sidebar da home no Blogger. Minhas tentativas se iniciaram meses atrás, buscando por tutoriais, scripts e macetes. A única coisa que encontrei sobre o assunto era como esconder determinados widgets da home (ou de qualquer outra página), como explicam os tutoriais dos seguintes blogs (dentre muitos outros):

Templates e Acessórios
IceBreaker
UsuarioCompulsivo
MundoBlogger
Bloggersphera

Mas não era isso que eu queria. O que eu queria era que toda a sidebar ficasse oculta apenas na home, aparecendo nas páginas internas normalmente, ao lado da postagem. Deixei de converter muitos temas do wordpress para o blogger por não encontrar maneira de fazer isso. Hoje, enfim, descobri como.

Para que vocês entendam a dificuldade, se eu optava em colocar toda a sidebar dentro de uma condicional que determinasse que ela não deveria aparecer na home, ela realmente não aparecia, porém, também não aparecia na página 'Elementos de Página' e ai não havia como incluir, excluir, movimentar widgets. Não me adiantava nada lançar um template que impedisse os usuários de colocarem widgets na sidebar.



Hoje, conversando no twitter sobre o assunto, a Iara (@iarana)  me apontou um template que tem esta caracteristica: a sidebar aparece apenas nas páginas internas. Instalei o template e constatei que o problema também se apresentava: a sidebar havia sumido da página 'Elementos de Página', inutilizando, de certa forma, a coluna.

Bom, resumindo a novela, continuei insistindo no assunto hoje, por que estou trabalhando para converter este template do Wordpress para o Blogger (note que toda a home é ocupada por resumos de postagens e quando se clica em Style no menu, tendo acesso ao post completo, a sidebar aparece.), e finamente encontrei uma solução bastante simples:

Como retirar a sidebar da home do blog

Primeiro é preciso usar uma condicional. Após a tag ]]></b:skin> coloque o seguinte trecho:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#sidebar-wrapper{display:none}
</style>
</b:if>

Traduzindo em miúdos, determinei que a sidebar não apareça (display:none) se a condição for a página principal do blog (homepage).

Visualize e note que a sidebar realmente desaparece da home do blogger. Agora vá a página 'Elementos de Página' e veja que a sidebar não aparece ali.
Volte ao código do seu template e antes de body{ (logo no começo dos códigos CSS)  acrescente o trecho:

body#layout  #sidebar-wrapper{display:block;margin:0px;float:right;}

Salve e torne a visitar a página 'Elementos de Página'. Veja que a sidebar reapareceu e ainda assim, não aparece na home do blogger, apenas nas páginas internas. 
body#layout é o código para modificar a estrutura da página 'elementos de página', como já publiquei aqui.



Testei no Firefox, Chrome e IE8.

Meus agradecimentos aos meus amigos do Twitter que tentaram hoje me ajudar :)
Leia Mais

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.
Leia Mais

isFirstPost - um estilo diferente para o primeiro post


Uma nova condicional do Blogger chamou minha atenção dois meses atrás, mas só agora tive tempo de fazer alguns testes com ela: a condicional isFirstPost.

A tag <b:if cond='data:post.isFirstPost'> é uma condição para o primeiro post visível de uma página, seja a página inicial ou de arquivos/marcadores. Percebendo isso, vislumbrei a possíbilidade de destacar o primeiro post da home (coisa que queria muito  há bastante tempo, o que me levou a fazer as experiências mais escabrosas com o pobre Mínima antes da nova tag :D ), diferenciando-o dos demais.
Para que vocês possam entender logo do que estou falando, segue 3 exemplos com os testes que fiz nos últimos dias:

Exemplo 1
Exemplo 2
Exemplo 3

Vou ensinar primeiro o método mais simples para destacar o primeiro post. Quero lembrar antes que qualquer experiência deve ser feita sempre em um blog de testes, nunca faça nenhuma modificação diretamente em seu blog oficial.

Vá em Editar HTML e clique em Expandir Modelo de Widget. Procure pelo seguinte trecho do código:

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

Substitua o trecho pelo seguinte código:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div id='first'>

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

<div class='first-body'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<span class='post-comment-link'>
<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>
</div>

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

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

O que eu fiz foi criar uma nova div (#first) e colocá-la sob duas condicionais, isFirstPost e homepageUrl, ou seja, ela só é válida para o primeiro post da home page. Dentro da div First inseri o título e o link para os comentários.
Fora das condições especificadas, os posts devem aparecer normalmente.

Para dar estilo a First, acrescente no CSS (acima da tag ]]></b:skin>):

#first{ /* aqui especificações para a div first */
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
}

.first-body{/* Aqui especificações para o text do post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
color:#ccc;
}

#first h3{ /* Aqui estilo para o título do post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 19px;
padding: 0px 0px 4px 0px;
font-family: 'Palatino Linotype';
text-align:center;
line-height:1.4em;
color: #f5f5f5 }

#first h3 a, #first h3 a:visited{color:#fff} /* cor do título */
#first h3 a:hover{color:#fff} /* cor do título no estado hover */

.first-body img{ /* estilo para as imagens */
padding:10px;
background:#fff;
border: 1px solid #333}

#first .comment-link{ /* estilo para o link comentários */
float:right;
padding: 0px 5px 15px 0px}

Este é o procedimento básico e o resultado é este: Exemplo Básico.

Partindo do princípio básico, mostrarei como conseguir o efeito dos 3 exemplos que coloquei no início do post:

Exemplo 1

Obs: Para este exemplo trabalhei com as seguintes medidas:
#Outer-wrapper width:990px;
#main-wrapper width: 780px;
#sidebar-wrapper width: 200px;

No exemplo 1, apliquei o hack de resumo automático de postagens, menos no primeiro post. Para conseguir este efeito é preciso que primeiro você aplique o código para os resumos automáticos, que você encontra neste post do BloggerSphera. O arquivo JavaScript que deve ser hospedado, pode ser colocado diretamente no código do template da seguinte maneira:

<script type='text/javascript'>
//<![CDATA[
// <!-- Summary Posts with thumbnails for Blogger/Blogspot version 3.0 (C)2008 by Anhvo -->
// <!-- http://www.vietwebguide.com/ -->
// <!-- See the tutorial (in portuguese) to install on http://bloggersphera.blogspot.com -->
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Feita a instalação do hack de resumos automáticos, vá em Editar HTML, clique em Expandir Modelo de Widget e faça os passos para o Exemplo Básico e salve as modificações. Agora coloque os estilos para os resumos na página inicial, abaixo de ]]></b:skin>:

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

.post{
width:185px;
height:240px;
margin:0px 10px 23px 0px;
float:left;
overflow:hidden;
padding:10px;
line-height:1.4em;
font-size:13px;
color: $textcolor;
background: url(http://i31.tinypic.com/2llg4jr.jpg) no-repeat top left;}

.post h3{
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
color:$titlecolor;
letter-spacing:1px;
border:none;
font-size: 15px;
background: url(http://i25.tinypic.com/ra2lub.jpg) repeat-x bottom left }

.post h3 a, .post h3 a:visited, .post h3 strong{
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
border:none; padding:0 0 0}

.date-header{display:none}

.post img{ border:none}

.post-body{padding: 0px; margin:0px;line-height:1.4em;}

#showlink{padding: 5px 10px 0 0; float:right;}

</style>
</b:if>

Não se esqueça de especificar um número baixo de caracteres para os resumos, ou o texto sairá do espaço. Neste exemplo eu usei a seguinte numeração:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 220;
summary_img = 120;
img_thumb_height = 100;
img_thumb_width = 100;
</script>


Agora, acima da tag ]]></b:skin> coloque o estilo para o FirstPost, como no Exemplo Básico, mas com width:540px;

#first{
width: 540px;
margin: 0px 15px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
clear:both
}

Agora, para que o post-footer (tudo o que vai no rodapé do post, como nome do autor, marcadores, etc) não apareça nos resumos, procure o seguinte trecho:

<div class='post-footer'>

e acrescente logo abaixo dele:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

e para fechar a condicional, procure por este trecho e acrescente o que está em vermelho:

<div class='post-footer-line post-footer-line-3'>    
........

</div>
</b:if>
</div>
</div>
Para que as datas só apareçam nas páginas internas e não interfiram com os resumos, busque por este trecho e acrescente o que está em vermelho:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>

Neste Exemplo 1 os posts aparecerão resumidos na Home Page, na lista de Marcadores e na lista de Arquivos.


Para que este post não se estenda demais, amanhã explicarei como proceder para obter o efeito do Exemplo 2 e Exemplo 3.
Leia Mais

Como criar uma pagina de abertura para o Blogger

Muitas pessoas me perguntam como dar um estilo diferente para  a primeira página do blog ou mesmo para fazer com que uma determinada postagem seja sempre a primeira a ser vista, como um texto fixo de apresentação e boas-vindas. Para fazer com que um texto fique fixo na primeira página do blog, publique-o normalmente, depois entre na página de edição do texto e programe uma data para o futuro, como mostra a a imagem abaixo:


Jogue a data para 2019  por exemplo e este sempre será o primeiro post visível em seu blog, encabeçando todos os outros que publicar. Para que apareça apenas este post na primeira página, vá em Configurações ->Formatação e programe para aparecer apenas uma postagem:



Para dar a primeira página um estilo diferente das páginas internas do blog, acrescente após a tag ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

aqui os estilos para a primeira página

</style>
</b:if>

O que faço aqui é o uso de uma condicional (em negrito) que determina que o estilo se aplique apenas à Home do blog.

Vamos tomar por exemplo um Template Mínima do Blogger (faça sempre experiências com um blog de testes, nada de ir direto modificando seu blog oficial, ok?) que está neste blog de testes; note que a primeira página está com as cores modificadas, a largura de outer-wrapper é maior e eu inverti o posicionamento das colunas: passei a sidebar para a esquerda e a coluna do post para a direita. Clique no título do post para ver a página interna, onde aparece o template Mínima sem modificações.

Para isso eu acrescentei os seguintes códigos:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

body{background: #111;}
#header-wrapper{width: 100%;height:120px; background: #303030; border:none;}
#header{border:none}
#outer-wrapper{width: 900px}
#main-wrapper{float: right; width: 600px;background: #f5f5f5}
#sidebar-wrapper{float: left; width: 280px; background: #303030}

body#layout #header-wrapper, body#layout #sidebar-wrapper, body#layout #main-wrapper{background: none}

</style>
</b:if>

o que está em negrito é o estilo para o painel Layout, pois se não especificarmos que não há background, as cores ou imagens escolhidas para a primeira página aparecerão alí também.

Este é apenas um exemplo bastante simples para que entendam como diferenciar a home das outras páginas do blog. Existem muitas possibilidades e aí é que entra a criatividade de cada um :)

É possível criar outros estilos para as  diferentes  páginas do seu blog  e eu recomendo que leiam este post do Bloggersphera, onde tenho aprendido muito sobre o assunto.
Leia Mais
Assinar: Postagens (Atom)