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

Read More

Importante: Sobre as imagens dos Templates

Estou recebendo mensagens de pessoas que usam os templates que modifiquei com a queixa de que hoje perceberam que as imagens dos mesmos não aparecem no blog; no lugar delas uma mensagem do TinyPic, serviço de hospedagem que eu sempre recomendei e confiei:

No final de setembro, sem mais nem menos, o TinyPic resolveu fechar as portas para os usuários estrangeiros, assim, deixando todo mundo na mão, conforme este post da Mamanunes: Tinypic - Fechando para Estrangeiros. Depois o Tinypic voltou atrás e liberou os links das imagens novamente. Pelo menos no meu caso. E eu fiquei tranquila, tudo voltou ao normal, não me abalei.
Eis que fui acessar minha conta hoje para ver qual era a novidade e me deparo com uma mensagem que diz que minha conta foi banida! Sem motivo, sem explicações, sem avisos, nada. Baniram e pronto. O Tinypic fez de conta que reabriu para estrangeiros para logo depois banir a conta de vez. Muito bonito. Tomem cuidado.



Ok, muita calma agora. O jeito é hospedar tudo no Blogger (o que eu já devia ter feito antes) e alertar vocês para que façam o mesmo. Quando você faz o download de um template, junto com o código, na pasta zipada, estão todas as imagens usadas no template. Hospede as imagens no Blogger (como a Mamanunes ensina no post que mencionei) e coloque os links nos locais correspondentes no template (geralmente o título da imagem já dá uma pista de onde deve ser colocada, por exemplo post li, outer-top, etc). 

Peço desculpas a vocês, principalmente por ter continuado a confiar em um serviço que já vinha dando sinais de que iria me aprontar uma.

Read More

Estilo para o link Leia Mais

Se você costuma usar o resumo nativo do Blogger através do botão Inserir Jump Break, saiba que você pode personalizar a apresentação do link, não só do texto, que pode ser modificado em Elementos de Página (clicando em Editar no quadrado que corresponde a coluna do post):

Você pode também alterar a localização do link, bem como adicionar background, borda e imagens. Para isso, acrescente o seguinte trecho ao código do seu template:

.jump-link{
float:right; // aqui estabeleço que o link aparecerá à direita
margin: 0px 15px 10px 0px; // distância do link para o topo, direita, esquerda e base
font-size:13px; // tamanho da fonte do link
text-indent: 19px; // o quanto o link se afasta ou recua da esquerda
font-weight:normal; // tipo de fonte
padding: 0px 0px; // espaçamento
background: url(link da imagem)  no-repeat center left; // imagem/ícone que aparece à esquerda do link
}

.jump-link a, .jump-link a:visited{color:#0066CC; text-decoration: none; //cor do link em estado normal}

.jump-link a:hover{color:#0066CC; text-decoration: none; // cor do link em estado hover}

Retirei este exemplo do Template Mundo Verde e o resultado pode ser visto aqui.
Você pode optar por não usar um ícone mas criar um botão com bordas arredondadas com uma imagem de fundo, como uso aqui no TNB. Para isso, basta:

.jump-link{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 6px;
float:right;
background: url(link da imagem do bg)  repeat-x;}

O site CSS3 Generator vai te ajudar muito a  gerar os códigos para bordas arredondadas, textos com sombras, sombras em botões entre outros.

Mas Ariane, eu uso nos meus templates aquele resumo automático de postagens. Como faço para personalizar o link?


Bem, o código que eu usei em diversos templates para gerar resumo automático ( e creio que seja o mesmo que a maioria usa ) tem a class #showlink (ou .showlink ) . Então basta dar estilo a esta class e tudo certo. Porém, o interessante é fixar este link no post resumido e não apenas dar um espaço entre o final do resumo e o link. Por exemplo, note o botão comprar neste template em que estou trabalhando:

Aqui usei o resumo automático e o botão comprar nada mais é que o #showlink personalizado. Para fixar ele no canto inferior direito, independente do conteúdo do resumo, é preciso primeiro determinar uma altura fixa para os resumos em .post (estilo para a página inicial apenas, usando a condicional &lt;b:if cond=&#039;data:blog.pageType != &amp;quot;item&amp;quot;&#039;&gt; &lt;/b:if&gt;), e acrescentar position: relative, assim:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
position: relative;
height: 250px;
outros estilos....
}
</style>
</b:if>

em #showlink, position:absolute e determine as distâncias para o topo e para a esquerda, em relação ao post:

#showlink{
position: absolute;
top: 210px;
left: 200px;}

Isto vale para posicionar qualquer elemento. Determine position:relative na div principal (div1: post, header-wrapper, etc) e position:absolute no elemento que se pretende posicionar em relação a div1 (div2: #showlink, logo, etc).

É isso :)

Read More

Template Mundo Verde

Demo |Download

O template contém duas colunas e menu superior:

Menu: é o mesmo menu que foi mostrado neste post. Para editar os links do menu, procure no código do template por:

<!-- inicio do menu -->
<div class='container'>
<ul class='v2' id='topnav'>
<li><a href='http://templatesparanovoblogger.blogspot.com'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- fim do menu -->

Onde está o link do Templates Novo Blogger, apague e coloque o link do seu blog. Apague todos os # e coloque os links que desejar.

Resumo dos textos: o resumo utilizado é o resumo nativo do Blogger, o More (ou Jump-link);

Posts relacionados com imagem na página inicial (home) e também nas páginas internas:

OBS: se você estiver mexendo no código do seu template e clicar em Visualizar, não verá os posts relacionados, porém eles estarão funcionando normalmente (veja na home do blog).

Abaixo dos posts relacionados, links de redes sociais ('Sharing is Sexy'). Basta apenas editar o link do seu feed; para tanto clique em Expandir Modelo de Widget e procure por esta linha:

<li class='sexy-syndicate'><a href='Url_FeedBurner' title='Subscribe to RSS'/></li>

coloque a Url do Feed onde indicado.

Read More