Bom , vamos simplificar as coisas , para esse tutorial não ficar extenso demais :)
Não vou entrar muito em detalhes de instalação , mais segue um tuto bem rápido , porém completo , de como instalar , configurar e editar a seu gosto um modelo de Template
Passo 1a :
Clique na setinha referente ao seu Blog , e vá em Modelo
Dica : Clique na imagem para amplia-la .
Passo 2b :
Clicado , agora vá em Editar HTML como na imagem abaixo
Dica : Clique na imagem para amplia-la .
Passo 3c :
Detalhe : Bom , como eu havia dito ná pagina de tutoriais , é bom você ter sempre um EDITOR HTML em mãos . Pode usar o Notepad ( Bloco de Notas ) , não é errado , só que para principiantes , eu indico o Notepad ++ . Para baixar , clique AQUI .
Bom , com o conteudo aberto , você seleciona tudo , copia e cola aonde irei mostrar a vocês agora .
Dica : Clique na imagem para amplia-la .
Passo 4d :
Com o Conteúdo devidamente copiado , você cola nessa caixa em branco , e depois clique em Salvar Modelo .
Detalhe : Ele não aparece nenhuma mensagem de que esta tudo OK , porém aparece se estiver alguma coisa errada . Então se você salvou e não aparecue nada , isso é bom :p
Dica : Clique na imagem para amplia-la .
================= FIM DA PRIMEIRA PARTE DO TUTO =================
Nessa parte do tutorial , nós vamos mudar os nomes , adicionar os Gadgets do template e customizar .
Parte 2a :
Detalhe : A esse ponto , nós já temos o nosso modelo de blog instalado , e ele se encontra assim . Se você clicar em Visualizar Blog ali em cima , vai poder ver .
Vamos começar a Editar de cima para baixo .
Primeiro vamos mudar o Nome do Blog . Aonde está escrito Teste Bllog . Vamos alterar .
Dica : Clique na imagem para amplia-la .
Parte 2b :
Clique em Layout . Assim que abrir , você aonde esta Escrito "
teste blog ( Cabeçalho)" e clica em Editar no canto inferior direito , conforme imagem .
Dica : Clique na imagem para amplia-la .
Logo Após vai abrir uma nova janela . Você edita conforme a imagem .
Detalhe : Você pode também enviar uma logo do seu computador . Isso fica a seu critério . Mais nesse template , não é legal colocar logo , pois a fonte que colocaram para preencher as letras , ficou muito show , e já fica uma logo bm legal . Mais isso fica a seu critério .
Terminando , clique em salvar logo abaixo . Vamos ver como ficou ?
Dica : Clique na imagem para amplia-la .
RESULTADO :
Dica : Clique na imagem para amplia-la .
Bem legal né ?
Detalhe : Todo o modelo de template para blogger é customizável . Você pode mudar essa fonte também ( A Fonte da Logo ) , mais não vou entrar nesse tutorial agora , se não atrasaria muito e perderia-mos o foco . mais fica a dica que dá para mudar :)
Bom , mudamos a logo , agora vamos para a parte 2c , que é mudar os Botoes lá em cima .
Passo 2c :
Detalhe : Dá para fazer usando o Editor HTML do Blogger , porém eu vou fazer usando o Notepad++ , porque eu já acostumei e é bem melhor . Eu ACONSELHO A USAR TAMBÉM , Fica a dica ;)
Bom , usando o NOTEPAD++ , de um CTRL + F para localizar um termo na folha , e pesquise pelo termo :
<ul class='menus menu-secondary'>
O Código para editar essa parte ( que seria o menu ) é esse :
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li><a href='#'>Editar</a>
<ul class='children'>
<li><a href='#'>Sub1</a></li>
<li><a href='#'>Sub2</a></li>
<li><a href='#'>Sub3</a></li>
</ul>
</li>
<li><a href='#'>Editar</a>
<ul class='children'>
<li><a href='#'>Sub1</a></li>
<li><a href='#'>Sub2</a></li>
<li><a href='#'>Sub3</a>
<ul class='children'>
<li><a href='#'>Sub1.1</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Editar</a>
<ul class='children'>
<li><a href='#'>Sub1</a>
<ul class='children'>
<li><a href='#'>Sub1.1</a></li>
<li><a href='#'>Sub1.2</a></li>
<li><a href='#'>Sub1.3</a></li>
</ul>
</li>
<li><a href='#'>Sub2</a></li>
<li><a href='#'>Sub3</a></li>
<li><a href='#'>Sub4</a></li>
</ul>
</li>
</ul>
</div>
Passo 2d :
Eba , mais uma parte se foi . Já editamos a Logo e os menus , agora vamos editar a frase que aparece na home , que no caso é :
Dica : Clique na imagem para amplia-la .
Bom para editaresse termo , vá até a o termo :
<div class='quotation_wrap'>
Essa frase se encontra abaixo desse termo acima , basta edita-lo a seu gosto Vou editar como exemplo , segue a imagem :
legal né ? Vamos ver como ficou :?
Dica : Clique na imagem para amplia-la .
Lecal né ? Bem facil mesmo . Antes de ir para a outra etapa , tem um detalhe , essa imagem também pode ser editada . E o interessante , é que o link fica logo acima de onde editamos , olha só :
É só alterar com uma imagem a seu gosto , lembrando que as dimensões dessa no caso é : 1600x1000
Vamos para a próxima etapa ?
Passo 3 :
Editando o formulário de contato e implementando a localização , com o google maps :
Passo 3a : Editando os textos do formulário de contato :
Proucure pelo termo :
<h2 class='title'><data:title/></h2>
E edite a seu gosto
Bom , vamos para a próxima etapa que é implementar o mapa .
Vá em Blogger / Layout e proucure pela Widget Our Location
Mais antes de editar , vamos primeiro criar um mapinha para implementar ali . Acesse o Google Maps clicando
AQUI
1 : Digite seu endereço
2 : Clique em Buscar
3 : Clique na Correntinha
4 : Copie o codigo HTML para implementar-mos .
Depois de copiado o Código ,agora você clica em EDITAR la naquela widget
Our Location , e cole o codigo todo lá , conforme a imagem .
E depois clique em salvar , vamos ver como ficou ?
Uhul , mais um sucesso !
Passo FINAL :
Agora falta só editar o Rodapé , para editar o rodapé , vá até o Termo :
<div id='footer-credits-wrap'>
E edite a seu gosto :
IMPORTANTE !!! NÃO RETIRE OS DIREITOS AUTORAIS !! APENAS ADICIONE O NOME DO SEU BLOG , OU O SEU !!
FIQUE A VONTADE PARA PERGUNTAR ! ESTOU AQUI PARA AJUDA-LOS :)
ABRAÇOS , E ATÉ A PRÓXIMA !
Blogger
Google+
Facebook
Twitter