É altamente recomendável que vocês façam um backup do atual templateTutorial Dicas Blogger – todos os direitos reservados
E aqui está uma prévia do futuro template do Dicas de informática ( meu falecido blog )
Para deixar a navbar invisível, cole este código no campo CSS#navbar-iframe { height: 0px; visibility: hidden; display: none; }
Ficou legal? Agora é só apertarmos o botão aplicar no blog (1). Simples assim :D#navbar-iframe { height: 0px; visibility: transparent; display: transparent; }
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.
[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.
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 {Substitua a linha do background por:
text-align:center;
color$textColor;
background: $backgroundColor;
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.
Volte ao html do Blogger e cole o link no local indicado (em azul)body {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.
text-align:center;
color$textColor;
background:#fff url(http://www.backgroundlabs.com/backgrounds/358.gif)repeat;
Existem outras formas de se configurar o plano de fundo, alterando o final do código:Como trocar a imagem de seu background no Designer de modelo – Crazyseawolf Blog
background-repeat: no-repeat; - imagem aparece uma vezSolte sua criatividade e deixe sair o webdesigner que existe dentro de você ;)
background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)
background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)
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 {
Todo o trecho deverá ser substituído por outro modelo de sua preferência.
width:90%;
font:$quoteFont;
line-height:1.6em;
color:#333;
}
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 {
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)
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;
}
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;
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.
-webkit-border-radius:6px;
-goog-ms-border-radius:6px;
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;
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.
#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;
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:
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:
A Equipe do Blogger In Draft (página de testes de novas funções do Blogger), anunciou ontem em seu blog oficial, que já é possível mudar a imagem (foto) do background (plano de fundo) dos novos templates do Blogger (Designer do Modelo) de forma simples e sem gambiarras.
Entre no Blogger in Draft, acesse o link design e depois designer do modelo. Clique em plano de fundo e, lá no alto, clique na opção fazer upload da imagem.
Segundo consta nas instruções, você pode fazer upload de um arquivo JPG, GIF ou PNG com até 300 KB. Para preencher todo o plano de fundo, use imagens com 1800 x 1600 pixels ou maiores. Para enviar a imagem, clique em escolher arquivo.
Procure pela imagem dentro do seu computador e aguarde o carregamento.
Por enquanto, este recurso só está disponível através do Blogger In Draft.
Como agora existem várias opções de templates para o Blogger, também existem várias formas de trocarmos esses templates. Antes de prosseguir, leia atentamente o artigo anterior, onde expliquei cada um dos modelos disponíveis atualmente:
Designer do modelo
Neste post você encontrará todos os detalhes:
Modelos de layout lançados em 2006
Para maiores detalhes, acesse este post:
Modelos Clássicos
Templates criados pelos usuários
A maioria dos blogs que disponibilizam templates gratuitos para download, costumam colocar um link para exibição de uma versão de demonstração. Clique neste link - demonstração, demo ou live demo - para visualizar o template.
Depois, faça o download do arquivo e salve em seu computador.
O arquivo pode estar nos formatos .XML, .ZIP ou .RAR. O .XML já está pronto para a instalação. Os outros dois vão precisar ser descompactados:
Procure pelo arquivo .XML dentro da pasta que você acabou de descompactar.
Entre no painel do Blogger, clique em design e depois em editar HTML.
Por precaução, salve seu antigo template clicando em baixar modelo completo.
Os gadgets são salvos pelo Blogger, mas como o seguro morreu de velho, abra um por um e copie cada código, salvando–os no bloco de notas ou no WordPad.
Clique agora em selecionar arquivo (1) e procure pelo arquivo .XML (2)
Clique em abrir para selecionar o template (3) e, depois, clique em fazer upload (4)
Se no seu blog existiam vários gadgets, será perguntado se você deseja mantê-los ou excluí-los. Faça sua escolha e o novo template será instalado.
Caso fique faltando algum gadget, abra o arquivo que você salvou no bloco de notas e vá colando cada código em seus respectivos compartimentos.
Detalhes importantes:
No Blogger, gadget e widget são sinônimos.
Se você está usando um template do designer do modelo e pretende trocar por um personalizado, saiba que o gadget atribuition será tranferido para o novo template e não será possível excluí-lo. Para resolver tal problema, antes de trocar o template, coloque o Mínima, vá nos elementos de página e exclua o gadget atribuition.
O template é uma das partes mais importantes de um blog. Eu já escrevi sobre isso em outros posts, mas repetir nunca é demais.
O template – para quem não sabe – é o desenho do blog, também chamado de tema ou modelo. É onde iremos escrever e colocar novos recursos.
Template (ou "modelo de documento") é um documento sem conteúdo, com apenas a apresentação visual (apenas cabeçalhos por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação — por exemplo conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final.
Além da questão estética, um template otimizado pode influenciar positivamente na indexação pelos mecanismos de busca e fazer com que as páginas de um blog abram com maior velocidade e estabilidade. Possuindo boa navegabilidade, auxilia na fidelização dos leitores e no número de exibições de páginas, entre outras coisas.
Web templates (ou "modelos de página") são instrumentos utilizados para separar a apresentação do conteúdo em web design, e para a produção massiva de documentos web. Os templates são interpretados por um "sistema de template". Fonte: Wikipedia
Hoje em dia temos 4 opções de templates para o Blogger:
Todas estas opções usam em seu código-fonte HTML e CSS:
HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.Fonte: Wikipedia
Designer do Modelo
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.Fonte: Wikipedia
Lançados em março deste ano, estes são os novos modelos fornecidos pelo Blogger. São mais modernos, com várias opções de plano de fundo e de colunas (sidebar) e são relativamente fáceis de usar, mas são pouco personalizáveis quanto às cores, fontes e instalação de hacks e de novos recursos via HTML - visto que o código é muito diferente dos modelos mais antigos.
Modelos de layout lançados em 2006
Quando o Google adquiriu o Blogger, a plataforma passou a se chamar Novo Blogger e seus templates passaram a ser em formato .XML. O mais famoso desta época é o Mínima – de onde partiu muitos dos modelos criados pelos usuários
Modelos Clássicos
Estes eu não cheguei a usar, mas pelo que eu vi só existe um modelo e é o usuário que deve customizá-lo através de HTML e CSS.
Templates criados pelos usuários
Estes são templates, geralmente baseados no Mínima, customizados e disponibilizados para download pelos próprios usuários do Blogger.
Existem algumas modelos mais fáceis de usar - com fontes e cores personalizáveis - e outros que já vem “prontos” e que para alterá-los é preciso ter conhecimento em HTML e CSS. Os primeiros são os mais indicados para os novatos.
Se você, caro leitor, tem ambições maiores com o seu blog, é essencial entender CSS, HTML e SEO para poder otimizar o template do seu blog e posicioná-lo melhor frente aos mecanismos de busca. Ou então, contratar alguém que possa fazer isso para você, pois já vi casos de blogs muito bons em matéria de conteúdo, com um número grande de posts no ar e mal indexados porquê os códigos e a apresentação visual do template não estavam organizados adequadamente.
No próximo post vou explicar, detalhadamente, como trocar os templates do Blogger.
Dois novos templates para os que apreciarem, um da Miley cyrus e outro chamado Food.
E mudando agora de assunto, não sei vocês , mas aqui no meu bairro há muitos assaltos de celulares, até já fiz um post a respeito.
Resolvi pesquisar entre conhecidos e perguntar o que eles achavam possivel fazer para evitar ser assaltado? Vejam uma das resposta.
Carol responde: - Bem...faz assim, ao ver um suspeito aproximar-se, imediatamente pega a chave da sua casa caso esteja com ela, começa a rodar a chave e ao mesmo tempo começar a correr em circulo gritando fogo!fogo!fogo!
Isso vai impedi-la de ser assaltada, quem vai assaltar uma louca!
Cara resolvi postar esta resposta, porque sem dúvida é ilária.
Essa história passaou.
Hoje a tarde tive que por o lixo para fora, dai quando estava colocando vem um deses homens recicladores puxando uma carraço bêbado igual a uma porca, não sei porque escrevi bêbado igual a uma porca, porca nem bebe, dai vem em minha direção querendo pegar o saco de lixo, ai eu digo para ele, olha não vale a pena pegar o lixo está cheio de côco de cahorro e resto de comida, o lixo reciclado tá ali, ai ele balbucia umas palavras inesplicáveis, talvez uma lingua que desconheça, algo assim: -asno chavaaa iiichoo, vcs conhecem essa língua?
Fechei o portão e fiquei a observa-lo a por os objetos no carrinho através do olho mágico, uma tarefa simples de pegar o objeto e coloca-lo, levou muito tempo até conseguir, meio cabalendo e coisas e tals, dai aparece um outro homem este estava atá bem arrumadinho gritando, ELiaaaaneee, bem ao menos foi isso que entendi, aproximou-se do outro que já estava saindo de lá, amparou-se no carrinho e os dois meio que indiferentes um ao outro balbulciaram aquela lingua desconhecida, e partiram, será que falam a mesma linguá?
É isso pessoal que aconteceu exatamente hoje neste último momento que resolvi postar.
 Demo |  Demo |
Template em 3 colunas, 4 colunas no footer, slide, resumo de posts na primeira página, menu social.
 |
| DEMO/PEGAR CÓDIGO |
Tenho recebido vários comentários de pessoas que não conseguem instalar os meus templates. Me escrevem que dá erro, que não entra de forma alguma, mas atenção, você precisa reverter o Blogger para o modelo antigo, entendeu ? É que o Blogger desde julho do ano passado modificou completamente a estrutura do Blogger, isso para facilitar a vida e a costumização do blog. Eu já havia publicado um post sobre isso, então deixarei este post em evid~encia, para facilitar para vocês.
Vamos então ao que interessa.
Vá até o editor de modelo de seu blog, o tal do HTML. Veja como se faz nas imagens abaixo.
