Banners para blogs

Créditos a: Blog Studio

Faça seu próprio template com o Draft Blogger

Para quem não conhece Draft Blogger é o Blogger em rascunho do Google.
Nele é testado novas funcionalidades antes de serem liberadas para todos.
Mas, qualquer um pode testá-lo e aproveitar suas novidades.
A novidade da vez é o Designer de Modelos.
Nele você cria seu próprio template sem preciar entender nada de códigos!


Como podem perceber na imagem acima template com 4 colunas, footer com 2 colunas, widget no header e tudo em questão de segundos!

Veja mais no seguinte vídeo:

Como colocar uma link-bar com imagens

Você está precisando colocar uma link-bar rapidamente no seu blog e não entende quase nada de código?
Hoje vamos numa dica ultra simples.

Primeiro:
Certifique-se de que seu Header aceita mais de uma widget.

Segundo:
Crie os botões da sua link-bar.
Pode até ser no Paint.
Num tamanho mais ou menos de 140 X 30.
Ex:

Agora hospede-as no Tinypic.
Anote o código HTML completo das imagens (a primeira opção).

Terceiro:
Vá em Layout - Elementos da Página.
Clique em Adicionar um Gadget no lugar que deseja instalar sua link-bar.
Escolha a opção HTML/JavaScript.
Cole os códigos das imagens.
Um do lado do outro sem deixar espaço.

Quarto:
Agora no link "a href=" de cada imagem substitua o link padrão deles pelos quais vai colocar na link-bar.
Ex: endereço do seu blog para home, e-mail para contato, seu twitter.
Por fim, renomeie as tags alt"" para que sua link-bar seja bem indexada no google.
Salve.

Sua link-bar está pronta.

Dica: faça-a o fundo da link-bar da mesma cor do fundo do seu blog.
Utilize o mesmo tipo de fonte e cor também.
Assim não parece que é apenas imagens!

Um exemplo: http://www.turmadamonica.net

Como excluir o Header do Blogger/blogspot

Eu sinceramente não gosto dele.
Alguns até o usam.
A maioria tenta escondê-lo.
Sim, o Header (cabeçalho) do blogger/blogspot não é lá muito querido.
Afinal, a maioria prefere simplesmente colocar uma imagem com o logotipo do blog, uma link-bar, ou outra widget qualquer.
Hoje vamos aprender a deletá-lo do template.

Como:
Vá em Layout - Editar HTML
Procure o seguinte código:

Agora vamos as mudanças.
Em "maxwidgets" mude o número de 1 para 4.
Em "locked" substitua true por false.
Salve.

Maxwidgets vai permitir que vocês acrescentem até 4 widgets no template.
Já locked vai destrancar o cabeçalho, ou seja, você vai poder excluí-lo tranquilamente.

Excluindo:
Vá na aba Layout - Elementos da página.
Clique em "Editar" no Cabeçalho.
Clique em excluir e salve.
Salve de novo e visualize.

Agora com o número de widgets permitida você pode acrescentar uma imagem, uma link-bar, uma barra de pesquisa, feed...

Ajustando largura e altura no Header

Imagine: você criou um banner lindo e quando foi colocar no seu blog viu que faltou espaço e o banner ficou pela metade.
Sim, isso é mais do que normal acontecer.
E agora, desisti do banner?
Nunca!
Para isso basta um simples ajuste no HTML de seu template.

Vá na aba Layout.
Clique em Editar HTML.
Procure por Header (ctrl + F)
Modifique de acordo com o tamanho de sua imagem:

• width: largura
• height: altura

Se o width estiver marcado 100%, procure o tamanho de Body ou Outer-wrapper para verificar qual a largura correta.
E por último se o seu blog possui uma link-bar não esqueça de colocar uma altura maior para que ela possa aparecer.

Backgrounds para blogger/blogspot

Cansou do mesmo fundo do seu blog mas ama seu template?
Então que tal fazer uma mudança básica?
Salve o fundo desejado.

Como colocar repetindo a imagem:
body
background: url (coleoendereçodesuaimagem) repeat;

Colocar com a imagem fixa, sem repetir:
body
background: url (coleoendereçodesuaimagem) no-repeat;

Para esses backgrounds recomendo repetir as imagens.

Como exibir conteúdo dos marcadores sem a widget de marcadores

Olá, me perguntaram como criar páginas no blogger/blogspot.
Para indexar um artigo utilizamos os famosos "marcadores".
O que vocês podem fazer é criar um marcador exclusivo para determinada página.
Ex: Sobre.
Nela escreve um pouco sobre você, o que faz, como criou o blog, etc.
Visualize o post, copie o link e coloque-o na link-bar por exemplo.
Outra possibilidade é vocês pegarem os links de cada marcador e colocá-los alinhado na link-bar em vez de uma lista lateral.
Um bom exemplo é o blog sobre o cantor Justin Bieber.
Não, eu não sou fã dele, mas a link-bar deles é um bom exemplo de como deixar o blogspot com cara de site.
Enfim, poderá salvar os links de seus marcadores e utilizá-los em fotos (use a widget imagem), assim cada imagem corresponde a uma categoria.
Ninguém precisa fazer uso da widget padrão de marcadores!
Basta ter criatividade.

Como criar sub-menus no blog

Gostaria de ter um daqueles blogs chiques, estilo portal, com menus, sub-menus, tudo bem organizadinho?
Acha que é impossível no blogspot?
Saiba que é muito simples e fácil deixar tudo organizado, veja:

• Vá em Layout - Elementos de Página - Adicionar um gadget - marcadores
• Dê um título (ex: vídeos).
• Agora opte por marcadores selecionados.
• Clique em editar e escolha os marcadores que farão parte dessa categoria (ex: clips, entrevistas, shows, ensaios).
• Salve.

Pronto!

Poderá ter uma visão melhor de como isso ajuda (e muito) nesse blog de Doação de Fotos, confira.

Como fazer e aplicar um cabeçalho ao blog

Incrementando o seu blog

Todo mundo gosta de ter (e visitar) um blog com layout interessante e funcional, certo?
E quando o menu lateral ( a famosa sidebar) fornece-nos opções para interagir melhor com nossos leitores?
Difícil colocar diversas opções?
Claro que não!
Através do próprio blogger (layout - elementos da página - inserir widgets) é possível:

Imagem:
Poucas pessoas dá o devido valor a essa widget, o que é uma pena.
Com ela podemos colocar uma imagem que combine com o blog e linkar para o de um amigo, o twitter, uma comunidade...

Enquete:
Quer maneira melhor, e mais fácil, de interagir com seus leitores do que com uma enquete.
Basta clicar nela, digitar a pegunta, as opções de resposta e pronto!

Lista de Links:
Outra daquelas topa tudo.
Você pode colocar uma lista de blogs que mais lê (link-love), sites que recomenda, downloads úteis e até seus melhores posts!

Twitter updates:
Com ela seus leitores saberão quando você atualiza seu perfil.

Então, viram como o próprio blog fornece ótimas opções?
Agora é só colocar mão na massa!
Eu mesma vou fazer isso aqui no ID e sexta-feira retomamos esse assunto.

6 lindos templates blogger/blogspot para download

Mais alguns belos templates blogger/blogspot para que seus blogs não fique na mesmice.
Agora enfatizando os templates web 2.0

Download: Pink 84

Download: MobiPress

Download: Magazeen

Download: Langit

Download: Hibrid News

Download: Blogger Tube

Mais alguns belos templates blogger/blogspot para que seus blogs não fique na mesmice.
Agora enfatizando os templates web 2.0

Trocando template blogger/blogspot

6 Lindos templates para blogger

Passeando pela internet, encontrei esses lindos templates.
Como já dissemos ter um template profissional é um requisito básico, então que tal trocar o seu?

Zinmag Renedyv

Download

Scrapbook

Download

Creative by Nature

Download

Chucky

Download

Revolution Church

Download

Manusay

Download

Posts relacionados com LinkWithin

Quanto mais visita melhor, certo?
Então, nada mais vantajoso do que utilizar uma widget de posts relacionados no blogger.
"Antigamente" era necessário configurar o layout do blogger em vários pontos para conseguir isso, o que levava tempo e um certo conhecimento técnico.
Agora com o LinkWithin, isso mudou.
Lembrando que você precisa fazer uso de imagens para que ela funcione corretamente.
Veja como é fácil:

• Acesse o site LinkWithin.
• Aparecerá o seguinte quadro.
  

• Coloque seu e-mail:
• O endereço do seu blog.
• Qual plataforma utiliza.
• Quantas caixinhas deseja.
• Se o seu template é escuro marque a opção "My blog has light text on a dark background".
• Clique em "Get Widget!".
• Ná página seguinte clique em "Install Widget".
• Acesse sua conta Blogger.
• Selecione o blog.
• Pronto!

Não precisa preocupar-se em onde colocar ela no template, já que essa parte ficará invísivel.
Visualize e, se gostou, salve.

Otimize seu template

Como dissemos anteriormente, muitas pessoas ainda acessam a internet através da conexão discada, portanto nossos blogs não pode ter um template pesado, que demora preciosos minutos para entrar.
Hoje vamos aprender a otimizá-lo para carregar mais rápido sem a necessidade de trocar o template ou dispensar suas funções.

Remova as metatags desnecessárias:
Algumas metatags realmente só ocupam espaço, tirando title, description e keywords as outras são relevantes.

Remova os espaços e linhas em branco:
Isso polpa tempo do navegador na hora de "ler" os códigos.

Remova as tags </p>:
Como sabemos as tags de parágrafo não são obrigadas a serem fechadas.

Coloque altura e largura para suas imagens:
Assim o navegador não será obrigado a fazer esse "cálculo" e carregará a imagem mais rápido.

Abrevie o código:
Em vez de colocar um atributo em cada linha (width, height, align...) coloque-os na mesma.

Hospede as imagens em mais de um servidor:
Os navegadores conseguem ler imagens hospedadas em vários servidores então, faça uso disso!
Hospedar as imagens em um só farão com que elas sejam carregadas uma a uma.
Hospedando em vários, elas serão carregadas simultâneamente.

Prefira as imagens em png:
Para imagens utilizadas no template como banners, barras... sempre é melhor utilizar png.
As imagens ficam mais leves e não perde qualidades como as jpgs.
Atenção: isso não vale para fotos!

Salve e teste seu template!

Pequenos detalhes na hora de desenvolver um template:

Essa é para quem está desenvolvendo seu próprio template ou deseja fazer alguma modificação em blog (na plataforma blogger).

Vá em Layout, clique em editar HTML e clique em expandir modelo de Widget.

Modificando a cor do template (body):

• Procure: Body {
• embaixo dele localize: background:
• substitua a cor marcada (em código hexadecimal) pela qual você deseja.
• Visualize e, se gostar, salve.

Cor da área de postagem:

• Localize: #main-wrapper {
• Em baixo dele: background-color:
• Siga o procedimento de body.

Modificando a cor das colunas:

• Localize: #sidebar-wrapper {
• Em baixo dele: background-color:
• Siga o procedimento de body.

Modificando o tamanho das colunas:
Para quem deseja aumentar um lado só do template ou dar mais espaço para a área de postagem.
Localize: #outer-wrapper {
Embaixo dele vai estar o valor de width e as seguintes seções:

• #main-wrapper { (área da postagem);
• #sidebar-wrapper { (coluna de navegação);
• #newsidebar-wrapper { (para quem tem um template de três colunas).

O tamanho geral do seu template localiza-se em #outer-wrapper.
Os width das seguintes de suas seções (acima) somados tem que ter esse mesmo valor.
Você pode modificar os valores para obter a coluna do tamanho que deseja (aumenta o número de uma seção e diminua de outra).
Lembrando sempre que a soma das três tem que ser sempre igual ao valor total.

Modificar o tamanho do Header:
Para quem criou um banner lindo para o blog e na hora que foi colocar ficou deformado, faltou ou sobrou espaço dando uma aparência estranha.
Localize: #header-wrapper {
Embaixo dele vai estar os seguintes valores (medidos em pixels):

• width: largura
• height: altura
• margin: margem de distância
• border: borda

Modifique esses valores para a medida em que criou o banner ou, caso deseje manter essas medidas faça um banner usando-as.

Um bom site para localizar código de cores hexadecimais:
http://www.verinha.de/tabela_de_cores_hexadecimais.htm

Espero ter ajudado a esclarecer essas dúvidas que sempre acabam aparecendo e mexendo com nossa paciência.

Templates para blogger/blogspot: onde baixar

Hoje em dia com as dezenas de sites com lindos templates para blogger/blogspot, ninguém merece usar os que vêem pré-definidos.

Para trocar:
Faça o download do template que gostar e descompacte (lembre-se: tem que ter a extensão .xml).
Vá em Layout, clique em Editar HTML, selecione o arquivo faça o upload, e salve.
Não se esqueça: sempre é bom fazer um backup completo de seu template antes de trocá-lo (isso inclui todas as widgets também!).

Onde procurar:

22 Blogger Templates by Carl Galloway
Blogger Templates Directory
Blogger templates
Templates e Recursos para Blogger
5 column Template
All Blog Tools
Blogspot Template
Btemplates
Paperback Designs
101 Excellent Blogger XML Templates
Templates para Blogger
Psychorm
Templates para você