Como editar o template no Blogger para que fique com seu estilo
blog
,
blogger
,
editar
,
template
Um comentário
Editando template no Blogger
Neste artigo, explicaremos a estrutura do código-fonte no Blogger, para que você possa editá-lo e deixar com o seu estilo.Aconselhamos fazer um backup do template antes de iniciar qualquer tipo de alteração no código-fonte.
Seguindo a linha de raciocínio, o código-fonte do blog no Blogger, se divide em quatro partes. A primeira é a parte de apresentação do blog, onde ficam a referência de quem criou o blog, o título do blog, o Favicon e outros. Logo abaixo, vem os estilos CSS e CSS3.
Seguindo um modelo padrão, abaixo dos estilos, vem os scripts, que muitas vezes, são apenas links puxando arquivos externos, ou algumas vezes, os scripts estão escritos no próprio código-fonte.
Abaixo dos scripts, vem o HTML, que, basicamente, é a estrutura da página. É o HTML que irá chamar os scripts e os CSS que estão acima.
Editando o template do Blogger no Notepad++
Para começarmos, sugerimos que você faça o download do Notepad++ para editar o seu template (.xml). Para este tipo de arquivo, esse é o melhor programa. Você pode acessar a página de download do Notepad++ aqui.Vamos começar fazendo um backup do seu blog em sua área de trabalho:
Vá até o menu no painel do seu Blogger, e clique em modelo. Em seguida, você notará que existe um botão na parte superior da tela chamado Fazer Backup/Restaurar. Clique neste botão, e faça o download. Selecione sua área de trabalho (desktop), e salve. Siga o esquema da imagem abaixo:
Após fazer o backup, não altere o arquivo original. Faça uma cópia e abra o Notepad++. Agora, clique em Linguagem na aba superior do painel do programa. Em seguida, clique em XML. Agora, seu editor está apto para ler arquivos suportados pelo Blogger.
Veja o exemplo abaixo:
Após alterar a linguagem para xml em seu editor, volte para a cópia do arquivo original, o qual foi feito backup. Abra com o Bloco de Notas, dê um CTRL+A para selecionar tudo, depois CTRL+C, volte para seu editor e dê um CTRL+V para colar.
Você irá notar que todo conteúdo está destacado por cores. A parte destacada em laranja refere-se aos estilos de CSS. É nesta parte que pode-se redimensionar colunas, tanto da sidebar quanto da área das postagens. Também pode-se inserir logotipos, alterar fundo, inserir estilos de menu, etc...
Entre as tags ]]></b:skin> e </head> pode-se colocar qualquer script ou links de chamada externa, como arquivos hospedados em outros servidores.
Abaixo da tag <body> pode-se inserir qualquer estrutura HTML, desde que as tags não estejam quebradas. Esta é a parte mais importante da estrutura da página.
Não podemos definir as tags de chamada de scripts e CSS porque variam de template para template, mas existem alguns itens que são padrões em todos os templates.
Excluir, editar ou alterar Gadgets
Dentro do seu editor, dê um CTRL+F e procure pela linha showaddelement='no'Altere por showaddelement='yes'
Faça isto com todas as linhas iguais a esta que você encontrar dentro do seu template. Esta alteração fará com que você mude a posição de qualquer Gadget fixo que você não conseguia mudar antes.
Agora, procure pela linha locked='true' e substitua por locked='false'
Faça isto com todas as linhas como esta que você encontrar dentro do seu template. Este comando faz com que qualquer Gadget que estava trancado, ou seja, que não podia ser deletado ou alterado, agora possa. Como exemplo, o cabeçalho e o Gadget Attribution no rodapé, podem, agora, ser excluídos.
Porém, em alguns templates, o número de Gadgets é limitado em determinadas áreas, e é sobre isso que iremos falar agora:
Procure pela linha maxwidgets=
Substitua o número após esta linha pelo número de Gadgets que você deseja inserir naquele local. Aconselhamos colocar sempre o número 10 entre as aspas após o comando citado. Como exemplo, este aqui maxwidgets='10'
Faça isso com todos os comandos que você encontrar dentro de seu template. Agora, você poderá inserir até 10 Gadgets ou Widgets em qualquer área de seu template.
Trabalhando com a tag body - logotipo e fundo
Agora, vamos falar da logo e da cor de fundo. Quando falamos de logo e fundo, falamos de body. Existem muitas outras técnicas de CSS para se aplicar aos itens citados. Mas, para quem tem pouco ou nenhum conhecimento em HTML e CSS, iremos mostrar uma maneira simples de aplicar os itens citados:Voltando ao Notepad++, a parte destacada em laranja é o estilo da estrutura do blog, e é onde fica localizada a tag body, na qual iremos aplicar os efeitos citados. Dê um CTRL+F e visualize no Notepad++ este comando: body {
Dentro dele, podemos aplicar a logo e a cor do fundo. Vamos começar falando da logo. Dentro do comando citado acima, entre as tags de abertura → { e fechamento → } você, provavelmente, encontrará o seguinte comando:
background-image: url();
Com ou sem o endereço da imagem após a URL.
Caso este comando não esteja dentro da tag body, insira dentro da tag body, que está situada no estilo CSS, destacada em laranja no Notepad++, da qual estamos tratando. É através deste comando background-image: url(); que a sua logo será inserida. Para isto, basta copiar a URL de sua logo e inserir dentro dos parênteses → ( )
Se a sua logo estiver com uma dimensão diferente da do seu template, basta você acrescentar o comando background-size: ;
Este comando força o redimensionamento da imagem, mesmo que suas larguras e alturas sejam diferentes das dimensões de seu template.
Aconselhamos que você acrescente este comando, e dentro dele, defina as dimensões, como neste exemplo → background-size: 100% 300px ;
Através deste comando, a imagem de sua logo ficará com a largura de ponta a ponta do blog, e com altura de 300 px. Caso queira uma altura diferente, altere o número de pixels (px).
Vamos, agora, para a cor de fundo do seu blog. Ainda falando da tag body, procure pelo seguinte comando: background-color: ;
Caso sua tag body não tenha este comando dentro, sugerimos acrescentá-lo, pois é ele que fará com que seu blog possua uma cor de fundo padrão.
Não é possível definir o tamanho da logo e a cor do fundo ao mesmo tempo. Você terá que decidir se a tag body ficará com o fundo ou com a logo do seu blog. Isso acontece porque o fundo e a logo são dois itens diferentes, e o tamanho a ser definido dentro da tag body, só pode corresponder para um deles.
Quando aplicamos o código background-size: ; dentro da tag body, estamos definindo um tamanho de largura e altura. Tratando o fundo do blog, ficaria desta forma:
body { background-color: FFFFFF ; → cor de fundo background-image: url(); → imagem background-size: 100% 100% ; → tamanho da altura e da largura }
O conjunto, acima, define uma cor que você irá colocar, podendo substituir por qualquer uma, e define um tamanho de 100% de largura por 100% de altura. Assim, o seu blog ficará por inteiro com a cor que você escolheu. Siga o mesmo processo para a imagem da logo, definindo no background-size: a largura e altura que deseja.
Editando os links
O último item que iremos abordar e que é padrão para todos os templates, são as cores e os efeitos dos links no blog. Volte para o Notepad++, e na parte destacada em laranja, procure pelo seguinte comando:a {color: } a:hover {}
Este comando define a cor inicial dos links e a cor do link que irá se transformar ao passar o cursor do mouse.
É possível aplicar vários estilos de transição e gradiente de CSS. Não podemos definir todos aqui, pois são milhares, mas fica a dica para alterar a cor dos links:
Cor inicial dos links → a {color: } Cor dos links ao passar o cursor → a:hover {}
Consulte a tabela de cores RGB e HTML aqui.
Não podemos mostrar como escrever um template inteiro nesta postagem ou como editar cada tag, pois o texto ficaria cansativo para você, mas estamos à disposição para ajudá-lo a editar qualquer área de seu template.
Entre em contato conosco!
Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG
Um comentário :
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.
Assinar:
Postar comentários
(
Atom
)
Oi, será que você poderia me ajudar tenho um blog, e hoje fui mudar a imagem da seta voltar para o topo, mas a imagem ficou muito grande e agora não estou conseguindo excluir a imagem e no layout eu já excluir ela mas ela não sai do meu blog de jeito nenhum . o blog é http://mundoyuki.blogspot.com.br/ . Desde já agradeço.
ResponderExcluir