All For The Game - Série Traduzida

Esse é o primeiro template que disponibilizo no blog, o modelo Sweetener, é inspirado no novo álbum da cantora Ariana grande.
O template segue os padrões dos novo modelos do blogger, ou seja, é um modelo v.3 [1] personalizado. O grande diferencial nesse novo modelo de temas do blogger, é sem duvidas, a nova caixa de comentários que também pode ser personalizada.
Há também mudança nas tags condicionais e css, mas isso fica para quem já e avança do no assunto.

Características:

• Modelo 100% responsivo.
• Menu suspenso com sub-categorias.
• Ícones de redes sociais no menu suspenso.
• Área suspensa para categorias destacadas.
• Modelo de 2 colunas (post e sidebar).
• Resumo automático (primeira imagem + resumo do texto).
• Postagem em destaque.
• Emojis personalizados.
• Fancybox (visualizar imagens com zoom).
• Widget de posts relacionados.
• Widget de feed do instagram.
• Widget da sidebar: autor; redes sociais, post populares, caixa de pesquisa, inscreva-se por e-mail, categorias, mutual, arquivo.
• Página de categorias e pesquisa em formato de mosaico.
• Contador de likes nas postagens.
Atualização: 23/07/2020
• Alterar a largura do modelo na opção Design de tema.

Requisitos:

• Imagens: As imagens usadas nas postagens devem ter pelo menos 700px de largura, ou mais, para melhor visualização. Certifique-se de selecionar a opção "Tamanho original". Em hipótese alguma use imagens menores ou gifs animados como primeiras imagens da postagem, caso contrario elas poderão parecer esticadas e deformadas.
• Widget de postagens relacionadas: É necessário o uso de marcadores nas suas postagens.

Importante:

• Não é permitido a revenda deste. Este modelo é apenas para uso pessoal.
• Cores, fontes, larguras e espaçamento podem ser alteradas na opção "Personalizar" no painel "Tema".
• Não remova os créditos no rodapé.
• Qualquer dúvida em relação é só deixar nos comentários.
• Leia a documentação para configurar seu template corretamente.

• Demo Visualizar
• Zip 26,5 KB

Documentação

Upload do arquivo .xml

Em um artigo já ensino como é feito, mas vou recapitular brevemente.

1. Descompacte o arquivo baixado.
2. Clique na aba Tema > Fazer backup/Restaurar > Escolher arquivo

3. Escolha o arquivo .xml do tema que você baixou.

Menu

Você pode adicionar páginas estáticas ou links externos.

Adicionando Páginas Estáticas

É necessário ter as páginas já criadas para adicioná-las ao menu. Caso não tenha, clique na opção Páginas no painel > Nova Página.
Para adicionar as páginas ao menu vá para a aba Layout, abra o widget Menu Horizontal e selecione as páginas que deseja exibir.

Criando Sub-menu

1. Para criar um nível no menu adicione Undeline(_) antes do título da página.
2. Use jogo da velha (#) para quando a opção do menu, ondo o sub-menu aparecerá, não tiver um lik.

Ícones das redes sociais

1. Na aba Layout, abra o widget de redes sociais (há no menu do topo e na sidebar).
2. Adicione o nome e o url do seu perfil e clique em adicionar link.

É apenas isso, os ícones vão aparecer automaticamente no seu tema.
Apenas as principais redes sociais foram adicionadas, mas caso você queira adicionar uma rede social não muito conhecida é só deixar nos comentários o nome.

Área de categoria em destaque

No widget Destaque do Topo Você pode adicionar uma categoria ou uma postagem manualmente.

1. Adicione o título.
2. Uma legenda (é opcional).
3. O link da categoria ou postagem.
4. Adicione uma imagem de sua preferencia.

Data e hora

A data e hora devem ser configurados da seguinte forma, caso contrario não funcionará. Preste bastante atenção em cada formato.
Vá para Configurações > Idioma e Formatação

Design de tema

Nesta opção você pode personalizar mudando as cores e fontes do tema.
Você também pode estar alterando a imagem do fundo, as dimensões são 1500x450

Formulário de contato

NOTA: Este é o widget de formulário de contato padrão do Blogger. Ele enviará as mensagens que as pessoas enviam para o e-mail que você cadastrou sua conta do Blogger.

Usuários mais antigos certamente cadastraram com e-mail de outros serviços: Hotmail, Yahoo e R7(esse é seu e-mail primário). Mesmo agora tendo sua conta atualizado para Gmail as mensagens serão enviadas para o e-mail primário(o antigo).

1. Acesse o painel do seu blog > Páginas > clique em "Nova página" > adicionar Contato como título.
2. Clique em HTML (ao lado de Escrever) e adicione o código:

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Nome" vinput="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Email" vinput="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mensagem" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
<script>
$(".blog-posts").each(function () { $(this).html(function(index, html) {
return html.replace(/.emoji/ig, ".moji");
});});
</script>

3. Publique a página e envie uma mensagem de teste para certificar-se de que tudo está funcionando.