Tutorial - Template Magazine
Autor: Rubens Júnior | Publicado: 2010-05-13T11:07:00-07:00

Com o advento do designer  de modelo, eu pensei não seria mais necessário criarmos templates  personalizados. Com o tempo e passada a euforia inicial, percebi que os  novos modelos do Blogger, apesar de serem lindos, possuem muitas  limitações, sendo a pior delas a impossibilidade de escolhermos todas as  fontes e  cores do template. Entusiasmada com os  novos templates, fiz a mudança em 3 outros blogs que cuido (blogs de  familiares), mas à cada semana me aparece um novo problema. Sendo assim,  concluo que ainda não está na hora de nós criadores de templates nos  aposentarmos:)   Live Demo – Download – Termos de Uso Por  favor, não retire os créditos!     HACKS INSTALADOS Posts  Relacionados  Retirada  da Navbar  Retirada  “Feeds Atom”  Caixa  de busca no cabeçalho  Personalização  dos ícones de navegação  Nova  caixa de comentários  Compatível  com o Jump Break (NOVO)  Avatar  nos comentários (NOVO)  Botão  para redes sociais (addThis)  CARACTERÍSTICAS DO TEMPLATE  Cores e fontes personalizáveis  Compatível com  qualquer navegador  3 colunas à direita  3 blocos de  widgets no rodapé  Diversos hacks instalados  Design  clean  Nome do seu blog  no rodapé  CSS otimizado  Carregamento  mais rápido   O Template Magazine foi feito  pensando não só em beleza, mas também em leveza e rapidez, já que agora o  Blogger conta com um sistema de auto-paginação e o Google irá rankear  melhor as páginas que apresentarem uma maior velocidade. Cuidados  com o layout do seu blog  auto-paginação  do Blogger  Desempenho  do site - Ajuda do Ferramentas do Google para webmasters  Google  Now Using Site Speed As A Search Ranking Factor Sendo assim, o template não possui imagens externas e  todo o CSS foi otimizado no site CleanCSS (dica do Compulsivo - Otimização  e compressão do CSS no Blogger). Duas outras  novidades são: instalação do hack para mostrar o avatar dos  comentaristas e a compatibilidade com o Jump Break do Blogger. Além  disso, incluí um código que mostra automaticamente o nome do blog no  rodapé. Basta instalar o template que o nome do seu blog já aparecerá  nos créditos e com todos os direitos reservados ;)  Modo de Usar  Descompacte a pasta TemplateMagazine.zip (botão  direito do mouse>abrir). Dentro dele você vai encontrar o arquivo  .xml e a imagem do cabeçalho no formato .psd. Atualmente  o Blogger já faz o backup de todos os widgets, então parta para a  mudança de template - Dicas  Blogger: Como trocar o template do Blogger (recomendo que isso seja  feito antes em um blog de testes). Já fez a troca? Então vamos aprender  a usar o template ;) Inserindo a imagem do cabeçalho   O arquivo .psd que está dentro da pasta do template,  pode ser editado no Photoshop. Caso você não se sinta à vontade para  mexer nesse programa, crie uma imagem  de 950px de largura por 70px de  altura no Paint ou em um editor online, tipo o Pixlr e salve-a no  formato .png. Entre em elementos de página e clique no  editar (1) do cabeçalho. Na próxima janela, clique em enviar  arquivo (2) e procure a imagem que você criou. Marque a opção em  vez do título e descrição e salve. Veja a imagem abaixo:  A fonte que utilizei  pra fazer a imagem que está junto com o template é a 20 days later:   http://www.dafont.com/28-days-later.font  Usando o Jump Break para resumir posts Faça  seu post normalmente. Depois clique no ícone do jump break e publique.  Para saber mais sobre o Jump  Break, acesse:  Dicas  Blogger: Jump Break – o hack “Leia mais” do Blogger  Dicas  Blogger: Problemas com a sidebar? Veja a solução! O template é compatível também com o hack Leia Mais,  modelo 2. Então, quem já usava o hack pode mudar de template sem medo,  pois os antigos posts continuarão resumidos. Dicas  Blogger: Como colocar o hack “Leia Mais” no Blogger Colocando  links na linkbar Para colocar links no menu que fica  embaixo do cabeçalho, entre em layout > editar html> linkbar e  siga as instruções contidas neste post - Como  inserir links na linkbar.  Retirada da caixa de  busca Entre em editar html  do template, clique em expandir modelos de widgets e  procure (Crtl+F do teclado) pelo trecho abaixo, apagando-o por completo         Colocando  a caixa de busca do AdSense  Siga o procedimento  anterior e cole na parte vermelha o código fornecido pelo AdSsense.    CÓDIGO DO ADSENSE    Botão  para compartilhamento em redes sociais Neste  template, coloquei o botão AddThis  para que os leitores do seu blog possam imprimir, enviar por email e  compartilhar os posts nas principais redes sociais. Caso queira retirar o  botão, entre no html do template, clique em expandir widgets  e procure por:   Logo embaixo dessa linha você encontrará o código do  AddThis. Apague-o.   ATENÇÃO  – Se você for instalar o Template Magazine em um blog que esteja usando  um dos novos templates do Blogger, será necessário usar antes o Mínima  para “limpar” o código. Caso você queira realizar alterações na  estrutura do template, tais como adicionar ou retirar sidebar ou mesmo  instalar outros hacks, pesquise  como fazer.  Veja também os Termos  de Uso, Licença  e FAQ  - Perguntas Frequentes do Dicas Blogger.  ©Template  by Dicas  Blogger – todos os direitos reservados. Não retire  os créditos.