Um sonho, não? Mas é a mais pura realidade! Faça o teste agora mesmo e comemore!

É  altamente recomendável que vocês façam um backup do atual template

Tutorial Dicas Blogger – todos os direitos reservados

A primeira coisa a ser feita é acessar o Blogger in Draft ( a página de testes de novas funções do Blogger), procurar pelo link layout e depois por designer do modelo:

Preparem-se para o impacto, pois vocês serão direcionados para algo moderno e inovador.

Na parte superior, estão todas as ferramentas para customizar o seu novo template e na parte inferior, irá aparecer o atual modelo do seu blog. À medida que vamos aplicando os novos recursos, eles já vão aparecendo na parte inferior. Legal, né?

Na guia modelos (1), iremos escolher um dos templates pré-fabricados (2), clicando sobre eles. Logo abaixo, existem as variações do tema (3), com mudanças nas cores.

Na guia plano de fundo (1) , podemos alterar a cor do tema do nosso template (2) ou inserir uma imagem de fundo (3). Existem diversos modelos, todos lindos ;)

 

Na guia layout (1) é que a brincadeira começa a esquentar. Em layout do corpo (2), escolheremos a disposição do post e das barras laterais (sidebar) do novo template (3). Atentem-se aos diversos formatos que foram disponibilizados pela Equipe do Blogger :D

Ainda na guia layout, ao clicarmos em layout do rodapé (1), escolheremos o modelos do rodapé do template (2) –  com uma coluna, duas ou três.

Em ajustar largura (1), podemos ir acertando a largura (2) da área de postagens e das barras laterias (sidebar), de acordo com nossas necessidades.

Na guia avançado (1), temos as opções de personalização das fontes e cores (2) de diversas áreas do template, tais como links, título do blog, plano de fundo e etc.

Deslizando a barra de rolagem até o final, encontramos um campo para códigos CSS (1)
E aqui está uma prévia do futuro template do Dicas de informática ( meu falecido blog )

Para retirar a navbar, cole o seguinte código no campo para CSS e aperte enter

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Para deixar a navbar invisível, cole este código no campo CSS

#navbar-iframe { height: 0px; visibility: transparent; display: transparent; }

Ficou legal? Agora é só apertarmos o  botão aplicar no blog (1). Simples assim :D

Como nem tudo é perfeito, notei que gadgets que sempre ficaram invisíveis, como o do Google Analytics por exemplo, passaram a aparecer em branco, porém sombreados.

ATUALIZAÇÃO: Este problema pode ser resolvido, enviando os gadgets invisíveis para o footer ( rodapé ) e não acontece em todos os modelos. Bom, né?

IMPORTANTE: Todos os hacks que estavam instalados no template anterior, serão perdidos com esta mudança e várias funções já padronizadas no código do Blogger serão inseridas no novo template. Neste exemplo que usei, o hack para artigos relacionados, desapareceu. Em compensação, apareceram diversas funções nativas, tais como as avatar nos comentários, o jump break e as estrelas para votação dos posts

E agora, #comofaz? Basta reinstalar todos os hacks através do “editar html” do template. .

Se você usava um hack para resumir os posts na página inicial (hack Leia Mais) e não o Jump Break do Blogger, vai compensar muito mais reinstalar o hack do que ter que colocar o jump break em todos os posts manualmente.

Outra detalhe interessante: nenhum gadget será perdido e podemos movimentá-los dentro da própria área pertencente ao Designer de Modelo.

Em caso de arrependimento, pegue o arquivo .xml que você salvou no começo deste post, entre na guia layout, procure por “editar html” e faça o upload do seu antigo template.

Acredito que, em breve, este novo recurso já estará disponível na página oficial do Blogger.

Os templates criados para Blogger (Blogspot), costumam vir com a opção de alterarmos apenas a cor do plano de fundo (background), mas existe também a possibilidade de, no lugar de uma cor sólida, colocarmos uma imagem de fundo. Nos novos modelos padronizados, isso já pode ser feito diretamente do painel do Blogger.

• Designer do modelo – tutorial em vídeo
• Como criar um template para Blogger / Blogspot
• Novas funcionalidades de layout no Blogger

Mas a maioria de nós ainda prefere personalizar seu próprio template, correto? Então, o que devemos fazer para colocarmos um plano de fundo diferente no Blogger?
Antes de mais nada é preciso entendermos o conceito de background e de patterns.
Segundo o DicWeb, background é:

[Ing.] (Fundo). 1. Área sobre o qual são apresentados textos e imagens em uma página Web. 2. Atributo utilizado em linguagem HTML, para definir o fundo de uma página. Definido, em geral, por um arquivo de extensão, gif ou jpg., é inserido entre as tags .

Já as patterns, segundo o blog Photo Filtre Studio, são:

Patterns são texturas que substituem as cores normais, as Patterns podem ser utilizadas em fundos, mask e fontes.

Ou seja, background é aquela área que fica ao fundo de uma página web (mas não só) e as patterns são uma das formas utilizadas para o plano de fundo.
Existem milhares de sites que disponibilizam background e patterns gratuitamente. Basta fazermos uma pesquisa no Google com as duas palavras, que já temos diversão para o ano todo. No blog Specky Boy encontrei uma resenha mostrando os 10 melhores sites com patterns gratuitas. Vale à pena conferir.

Top 10 Free Resources for Background Patterns and Textures for Web Designers

Muito bem. Agora vamos aprender como mudar o plano de fundo do Blogger usando uma imagem como background. Entre em design e procure pela aba editar html. Usando o Crtl+F do teclado, encontre algo parecido com isto:

body {
text-align:center;
color$textColor;
background: $backgroundColor;

Substitua a linha do background por:

background:#fff url (URL DA IMAGEM) repeat;

Onde URL DA IMAGEM é o endereço da imagem que será usada como plano de fundo e #fff é uma cor para o caso da imagem parar de funcionar. Veja tabela de cores.
Vamos para um exemplo prático. Vou utilizar uma pattern do site Background Labs, no template DB 3.0. A imagem escolhida será a Stripes Background 44. Podemos baixar a imagem, hospedar no Picasa e copiar a url. No site em questão, é permitido usarmos a url deles, contanto que sejam dados os créditos. Clique com o botão direito do mouse sobre a imagem ou sobre a url e copie o link.
Volte ao html do Blogger e cole o link no local indicado (em azul)

body {
text-align:center;
color$textColor;
background:#fff url(http://www.backgroundlabs.com/backgrounds/358.gif)repeat;

Clique em visualizar para fazer os devidos testes no template e se estiver bom, salve. Veja, na imagem abaixo, como ficou o template DB 3.0 com a pattern.

Para trocar o background dos novos modelos do Blogger, acesse este post:

Como trocar a imagem de seu background no Designer de modelo – Crazyseawolf Blog

Existem outras formas de se configurar o plano de fundo, alterando o final do código:

background-repeat: no-repeat; - imagem aparece uma vez
background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)
background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)

Solte sua criatividade e deixe sair o webdesigner que existe dentro de você ;)

Em linguagem web, blockquote ( ou simplesmente quote) é um recurso em HTML, utilizado para destacar parte de um texto ou para citar, dar referência a algo ou alguém. Em português, usa-se a denominação citação ou bloco de texto.
O blockquote não é usado somente em páginas da internet, sendo muito comum em livros, revistas, jornais e em toda forma de tipografia.
Segundo definição da Wikipedia:

Um bloco de citação (também conhecido como uma citação longa ou extrato) é uma citação de um documento escrito, que é definido fora do texto principal como um ponto distinto (ou bloco) (…) Bloco de citações são geralmente distinguidos visualmente utilizando o recuo , um diferente tipo de letra ou tamanho menor.

Como vocês podem notar, eu acabei de usar o blockquote para citar o texto acima.
Para usar blockquote no editor de textos do Blogger, passe o mouse sobre a área que será destacada e clique no ícone Citação (figura 1). Para usar no Windows Live Writer, procure por citação em bloco (figura 2)
Para mudar o modelo de blockquote dos templates do Blogger ( e eu acho que isso serve também para Wordpress), precisamos usar alguns códigos em CSS.
Antes de mais nada, entre no editar HTML do Blogger e procure por algo assim:

blockquote {
width:90%;
font:$quoteFont;
line-height:1.6em;
color:#333;
}

Todo o trecho deverá ser substituído por outro modelo de sua preferência.
Modelos de blockquote
Fonte: Css Tricks - Better Blockquotes

blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote {
display: block;
background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: bottom right;
}

blockquote {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

Aqui estão as duas imagens utilizadas nos modelos acima. Salve-as em seu computador e faça o upload no Picasa Web ou no serviço de hospedagem que preferir. Depois é só copiar a url e colocar nos locais indicados (em vermelho)

Hoje vou tentar explicar como usar bordas arredondadas nos templates para Blogger/Blogspot. Já adianto que o HTML varia muito de um modelo para outro e que este tutorial não se aplica aos novos templates do Blogger (Designer do Modelo).
As bordas arredondadas funcionam perfeitamente no Mozilla Firefox (Figura 1) e no Google Chrome, mas infelizmente não funcionam no Internet Explorer (figura 2).

Mesmo os templates do Designer do Modelo, demoraram a se acertarem com o IE e ainda hoje ficam estranhos, como se tivessem sombras nas bordas (um horror!).
ATENÇÃO: Recomendo a criação de um blog de testes para realizar toda e qualquer modificação no template do seu blog. Se der errado, você não terá nenhum prejuízo.
Para inserir as bordas arredondadas, entre no painel do Blogger, clique em design e depois em editar HTML. Dê um Crtl+F com o teclado e procure por “border”.
O código que devemos usar para arredondar as bordas é este:

-moz-border-radius:6px;
-webkit-border-radius:6px;
-goog-ms-border-radius:6px;

Os templates para Blogger são divididos em vários trechos, que começam com “#”. Temos como exemplos: #blog-wrapper (corpo do blog), #header-wrapper (cabeçalho),#linkbar (menu de links), #main-wrapper (área de postagem ) e etc.
São nestes locais que você vai ter que encontrar as bordas e colocar o código para arredondá-las. Vamos para dois exemplos, usando o html do Template DB 3.0:

ANTES #blog-wrapper { text-align:center; position:relative; width:970px; background:$blogframeColor; border:1px solid $blogBorderColor; margin:15px auto 10px; padding:6px 8px 6px 6px; }

DEPOIS #blog-wrapper { text-align:center; position:relative; width:970px; background:$blogframeColor; border:1px solid $blogBorderColor; -moz-border-radius:6px; -webkit-border-radius:6px; -goog-ms-border-radius:6px;

#linkbar { width:100%; position:relative; background:$linkbarbgColor; border:0 solid $contentBorderColor; border-bottom:1px solid $contentBorderColor; margin:0px 0 0; padding:0; }

#linkbar { width:100%; position:relative; background:$linkbarbgColor; border:0 solid $contentBorderColor; border-bottom:1px solid $contentBorderColor; -moz-border-radius:6px; -webkit-border-radius:6px; -goog-ms-border-radius:6px;

O código (em vermelho) deve ser inserido logo abaixo da linha da borda. Repita o mesmo procedimento em todas as áreas onde as bordas devem ficar arredondadas.
Para cada borda arredondada, clique no botão visualizar para ir conferindo o resultado e só salve o template quando estiver tudo do seu gosto.
Quando você tiver certeza que aprendeu a colocar as bordas arredondadas no blog de testes, aí sim você pode fazer o mesmo no template do seu blog.
Repito: o html varia muito de um template para outro e é preciso fazer vários testes até encontrar os locais corretos para inserção do código. Divirtam-se ;)

Antes de realizar qualquer edição no html do seu template, é altamente recomendável fazer um backup. Vá em “layout”,”editar html” e clique em “salvar modelo completo”

Se algo sair errado, bastará fazer o upload deste arquivo que você salvou.
Outro problema muito comum aos novatos e absolutamente inesquecível é que, após a troca de template, muitos dos widgets serão perdidos. Para evitar esta desgraça este transtorno, podemos nos utilizar de dois métodos:

• fazer uma cópia de todos os códigos no Word
• fazer uma cópia de todos os códigos em um blog de testes

Eu uso a segunda opção, até porque é uma boa forma de visualizar os widgets no novo template, antes de alterá-lo definitivamente.