Template - twitter para blogger

Se você é um super viciado em twittar eu tenho uma ótima notícia para te dar.

Encontrei um template muito parecido com o twitter, ele tem um ar de ser simples igual o original e é totalmente customizável.

Como podes ver na foto abaixo, ele é ótimo para quem publica textos pequenos (mini-posts).

Demonstração: (não liguem para a formatação, ele está em outro idioma)

Download

Template Flora Scent

Mais um template legal para vocês apreciarem.

É impressionante como podemos achar novos modelos para o blogger. Quem disse que o wordpress é a solução?

• Demonstração
• Download

Mais informações clique aqui.

Inserindo um novo template

Há alguns dias eu venho disponibilizando sites com templates gratuitos para o blogger, e muita gente que está começando nesse universo virtual fica perdido na hora de trocar o template atual por um novo, as vezes até desistem por não saberem por onde dar o ponta pé inicial.

Por padrão, os templates do blogger são no formato .XML, que é um tipo de compactação de códigos (html, css, as imagens que montam seu layout, formatação e etc..). Ou seja, todo tipo de informação relacionada ao visual do template fica contido no elemento “.XML”.

De acordo com a Wikipédia:

XML (eXtensible Markup Language) é uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais.

É um subtipo de SGML (acrônimo de Standard Generalized Markup Language, ou Linguagem Padronizada de Marcação Genérica) capaz de descrever diversos tipos de dados. Seu propósito principal é a facilidade de compartilhamento de informações através da Internet. Entre linguagens baseadas em XML incluem-se XHTML (formato para páginas Web), RDF,SDMX ,SMIL, MathML (formato para expressões matemáticas), NCL, XBRL, XSIL e SVG (formato gráfico vetorial).

Na hora de escolher o template você terá duas opções, a de criar um desde o inicio ou escolher pronto da web.

Se sua opção for a de criar um, a Ariane do templates para no blogger publicou um artigo ajudando no ponto de criação. Clique aqui!

Caso sua escolha seja a de adquirir um pronto, existem vários sites que fornecem modelos bacanas e totalmente customizáveis:

Mundo dos Blogues; (é claro)

Templates Para Você;

Dicas Blogger;

Códigos Blog;

Gosu Blogger;

 

Preparando a alteração

Depois que você baixou ou criou seu template está na hora de inseri-lo no blog, acesse o painel do blogger e entre nas guias, “Layout” -> “Editar HTML”.

Em seguida clique em “Baixar modelo completo”, para garantir caso ocorra algum erro durante o processo de mudança.

 

Salvando seus Widgets

Para salva-los eu recomendo copiar um por um e salvar no bloco de notas ou em algum outro blog de testes.

Para salvar de uma forma diferente, preservando o nome dos títulos e os widgets a Rô, do blog a la carte fez um passo-a-passo, clique aqui!

Instalando seu novo template no blog

Ainda na página de edição html, clique no botão “Arquivo”, depois localize o template .XML que você baixou e clique em “Fazer Upload”.

Uma mensagem conformando a exclusão dos widgets surgirá, clique em “Confirmar e Salvar”, pois você já salvou todos eles no passo anterior.

 

Pronto, se você seguiu todas as dicas acima seu blog está de cara nova, acesse seu endereço e aprecie seu template bonitão.

Como nem tudo é perfeito podem ocorrer erros durante o processo, tem uma mensagem que me causa dor de cabeça quando quero mecher no HTML:

O único jeito que eu sei até o momento para resolver isso é apagar TODOS os widgets, mas claro que faço um backup antes. Caso alguém souber de uma outra forma para "burlar" essa mensagem, deixe um comentário.

Curtam esse tutorial, e qualquer dúvida re-leia tudo de novo e depois comente aqui em baixo. =D

**Ícones por: http://www.iconesbr.net/

Mude o visual - Templates para blogger

 

Que tal mudar o visual do seu blog?

No site bloggertricks você encontra vários templates para o blogger, eu recomendo você dar uma olhada, são todos bem elaborados, com imagens e colunas centralizadas.

Se seu blog anda meio "velho", com o layout manjado essa é uma boa dica, quem sabe com uma mudança de visual suas visitas não aumentam, afinal, todo mundo gosta de novidades.

Aqui vai alguns exemplos para você ter uma nota:

Gostou? então acesse o site aqui e baixe já seu modelo, é gratis!

Template Wordpress Admin para o blogger

Demonstração

Download

Instalação

Templates e mais templates

Se você é fanatico por templates irá gostar da dica, O Blogger Buster possui vários templates da plataforma blogger para download (baixar), são só templates estilosos, daqueles que deixam qualquer um de boca aberta. Se você quer deixar seu blog todo bonitão corra, acesse essa página e escolha o seu novo layout.

Exemplos:

 

 

 

 

 

 

Como eu disse, no site tem muitos outros templates, para baixar clique aqui.

Personalizando os comentários do seu blog

Se você é um blogueiro assíduo e vive entrando em sites e fóruns de ajuda deve saber que o blogger é totalmente customizavel, ou seja, você pode mexer em tudo que é código, modificar e adicionar elementos sem problema algum, no entanto você tem que conhecer bem no que você irá mexer para não causar danos ao seu template e acabar perdendo todo seu trabalho.

Por isso vim mostrar a vocês como personalizar o campo de comentários, destacando o comentário do autor do blog e adicionando cores diferentes. Essa dica eu ví lá no blog a la carte, achei muito interessante e resolvi implementar mais um pouco, adicionei uma imagem para o autor e uma fixa para os demais usuários.

*Esse código será aplicado baseado no template mínima do blogger.

Vamos aplicar o código, mas primeiro veja como funciona as tags do código mínima:

• "comment-author" - O autor do comentário
• "comment-body" - Corpo do comentário
• "comment-timestamp" - Horário da postagem
• "comment-footer" - Rodapé dos comentários

Agora que você já está a par do código vamos aplicar no template:

Entre em "Layout" -> "Editar HTML" -> marque a opção "Expandir modelos de widgets" e encontre esse trecho do código:

/* Comments
----------------------------------------------- */

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Substitua tudo pelo seguinte CSS personalizado:

/* Comments
----------------------------------------------- */
#comments {margin:1em 10px 1.5em;line-height:1.6em;}
#comments .comment-author {margin:.5em 0;}
#comments .comment-body {margin:.25em 0 0;}

#comments .comment-body p {margin:0 0 .75em;}
#comments p a {text-decoration: none;}
#comments p {margin-left: 10px;line-height: 1.1em;}
.deleted-comment {font-style:italic;color:gray;}

.commentlist ul {margin: 0;padding: 0;}
.commentlist li {list-style-type:none;padding:5px;margin-top: 0;}

.commentlist-author {color: #000000;background: #f6f6f6;
border-bottom: 1px solid #0000FF;border-right: 3px solid #0000FF;}

.commentlist-general {background: #ffffff;
border-bottom: 1px solid #0000FF;border-right: 3px solid #0000FF;}

.commentlink-date {float: right;font-size: 80%;text-decoration: none;padding: 2px;}

.commentlink-author {color: #0000FF;text-transform: lowercase;float: left;}

Os termos em azul é o que você poderá modificar para deixar as cores da tabela adequada ao seu blog.

Depois que você aplicou o css deve colocar o código que aparecerá no template, para isso encontre o trecho abaixo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Depois substitua tudo por esse:

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<img align='left' src='http://LINK_DA_IMAGEM_DO_AUTOR_DO_BLOG.png'/> <li class='commentlist-author' style='margin: 10px; padding: 5px;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<span class='commentlink-author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>
</cite>
<span class='commentlink-date'><a class='commentlink' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p style='margin-left: 0;'><data:comment.body/></p>

<div class='clear'/>

</li>
<b:else/>

<img align='left' src='http://LINK_DA_IMAGEM_DOS_LEITORES.jpg'/> <li class='commentlist-general' style='margin: 10px; padding: 5px;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<span class='commentlink-author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>

</cite>
<span class='commentlink-date'><a class='commentlink' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p style='margin-left: 0;'><data:comment.body/></p>

<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

Lembrando que esses códigos foram aplicados no template mínima do blogger, caso seu blog tenha um modelo diferente, procure detalhadamente pelo código de comentários para não causar danos ao template. Visualize e depois salve para garantir.

Baixe aqui o template mínima já com o código aplicado

Template google chrome para seu blog

Depois do sucesso do novo navegador do google "google chrome" resolveram ir mais além, criando um template para o blogger idêntico ao novo navegador.

Se você é um fanático por produtos google vai adorar a novidade, ele possui um visual leve e com cores light, seu blog será visualizado mais rápido, garantindo um retorno de visitantes no quesito "velocidade do blog".

Destaques do template

• Menu em abas no topo;
• Campo de busca igual a barra de endereços do navegador;
• Cores bonitas e um visual clean.

Ver demonstração
Download