Você sabia que criar páginas personalizadas no Blogger pode transformar a forma como seu blog é organizado e apresentado? Se você está buscando uma maneira de otimizar a estrutura do seu blog, personalizar as páginas e melhorar a navegação dos seus leitores, este guia passo a passo é perfeito para você. Aprenda a como configurar páginas personalizadas no Blogger, como organizar o conteúdo e adicionar uma navegação dinâmica usando marcadores e links. Com dicas práticas e simples, você poderá oferecer uma experiência mais atrativa e organizada para o seu público, tudo dentro das possibilidades que o Blogger oferece.
Passo a Passo para Criar uma Página Personalizada no Blogger
1. Acesse o Painel do Blogger
- Faça login no seu painel do Blogger.
- No menu à esquerda, clique em Páginas.
2. Crie uma Nova Página
- Clique em Nova página para criar uma página personalizada.
- Dê um título à sua página, como "Educação e Desenvolvimento" (ou o nome da categoria que deseja criar).
3. Insira o Código HTML da Página Personalizada
- Após criar a página, selecione a opção de HTML (não a opção de "Composição").
- Copie e cole o código abaixo na área de HTML.
Código da Página Personalizada
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Acompanhe as últimas notícias sobre economia e finanças com artigos sobre o mercado financeiro, investimentos, e tendências econômicas." name="description">
<meta content="index, follow" name="robots">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
/* Estilo para o parágrafo de introdução */
#intro-texto {
margin: 20px auto;
padding: 15px;
max-width: 800px;
font-size: 1.2em;
color: #333;
line-height: 1.6;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
}
/* Responsividade para telas pequenas */
@media screen and (max-width: 768px) {
#intro-texto {
font-size: 1.1em;
padding: 12px;
margin: 15px auto;
}
}
/* Estilo para o post-item */
.post-item {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
width: 100%;
box-sizing: border-box;
justify-content: flex-start;
}
.post-imagem {
flex-shrink: 0;
width: 150px;
height: 100px;
margin-right: 20px;
overflow: hidden;
border-radius: 8px;
}
.post-imagem img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-conteudo {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
.post-conteudo h2 {
font-size: 1.5em;
margin-bottom: 10px;
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
width: 100%;
}
.post-conteudo h2 a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
}
.entry-excerpt {
font-style: italic;
color: #555;
margin-bottom: 10px;
background-color: #f9f9f9;
padding: 10px;
border-left: 4px solid #007bff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
line-height: 1.6;
font-size: 1.1em;
}
.leia-mais {
font-weight: bold;
color: #007bff;
text-decoration: none;
display: inline-block;
margin-top: 10px;
}
#veja-mais-container {
margin-top: 20px;
text-align: center;
}
#veja-mais {
background-color: rgb(179, 0, 0);
border-radius: 10px;
border: none;
color: white;
cursor: pointer;
font-size: 1.2em;
font-weight: bold;
padding: 10px 20px;
text-transform: uppercase;
}
#veja-mais:hover {
background-color: rgb(150, 0, 0);
}
</style>
</head>
<body>
<!-- Parágrafo de introdução -->
<div class="introducao">
<p id="intro-texto">
Acompanhe as últimas <strong>notícias sobre economia e finanças</strong> com artigos sobre o mercado financeiro, investimentos, e tendências econômicas que estão impactando a sociedade.
</p>
</div>
<div id="conteudo-economia-e-financas"></div>
<div id="veja-mais-container">
<button id="veja-mais">Veja Mais</button>
</div>
<script type="text/javascript">
var limitePosts = 5;
var postsCarregados = 0;
function carregarPostsMarcador() {
var marcador = "economia-e-financas"; // **Modificar aqui**: Altere para o marcador que você deseja usar (por exemplo: "educacao-e-desenvolvimento")
fetch('/feeds/posts/default/-/' + marcador + '?alt=json')
.then(response => response.json())
.then(dados => {
var posts = dados.feed.entry;
var conteudo = '';
function carregarPosts(inicio, limite) {
for (var i = inicio; i < inicio + limite && i < posts.length; i++) {
var post = posts[i];
var titulo = post.title.$t;
var link = '';
for (var j = 0; j < post.link.length; j++) {
if (post.link[j].rel === 'alternate') {
link = post.link[j].href;
break;
}
}
var imagem = '';
if (post.media$thumbnail) {
imagem = post.media$thumbnail.url;
}
var descricao = '';
if (post.summary) {
descricao = post.summary.$t;
if (descricao.length > 150) {
descricao = descricao.substring(0, 150) + '...';
}
} else if (post.content) {
var contentHTML = post.content.$t;
contentHTML = contentHTML.replace(/<img[^>]*>/g, '');
var paragrafoMatch = contentHTML.match(/<p[^>]*>(.*?)<\/p>/g);
if (paragrafoMatch) {
for (var k = 0; k < paragrafoMatch.length; k++) {
var paragrafoTexto = paragrafoMatch[k].replace(/<[^>]*>/g, '').trim();
if (paragrafoTexto !== '') {
descricao = paragrafoTexto;
break;
}
}
}
if (descricao === '') {
descricao = 'Descrição não disponível';
}
if (descricao.length > 150) {
descricao = descricao.substring(0, 150) + '...';
}
}
conteudo += '<div class="post-item">';
if (imagem) {
conteudo += '<div class="post-imagem"><img src="' + imagem + '" alt="' + titulo + '" loading="lazy"/></div>';
}
conteudo += '<div class="post-conteudo">';
conteudo += '<h2><a href="' + link + '">' + titulo + '</a></h2>';
conteudo += '<p class="entry-excerpt">' + descricao + '</p>';
conteudo += ' <a href="' + link + '" class="leia-mais">Leia mais</a>';
conteudo += '</div>';
conteudo += '</div>';
}
}
carregarPosts(postsCarregados, limitePosts);
postsCarregados += limitePosts;
document.getElementById('conteudo-economia-e-financas').innerHTML = conteudo;
if (postsCarregados < posts.length) {
document.getElementById('veja-mais').style.display = 'inline-block';
} else {
document.getElementById('veja-mais').style.display = 'none';
}
document.getElementById('veja-mais').addEventListener('click', function() {
carregarPosts(postsCarregados, limitePosts);
postsCarregados += limitePosts;
document.getElementById('conteudo-economia-e-financas').innerHTML = conteudo;
if (postsCarregados >= posts.length) {
document.getElementById('veja-mais').style.display = 'none';
}
});
})
.catch(error => console.error('Erro ao carregar os posts:', error));
}
window.onload = carregarPostsMarcador;
</script>
</body>
</html>
4. Modifique as Seções do Código Conforme Necessário
-
Marcador: A linha importante que você deve modificar é onde o marcador (label) é configurado dentro do código JavaScript:
var marcador = "economia-e-financas"; // Altere para o nome do marcador desejadoAltere
"economia-e-financas"para o marcador que você quer usar. Por exemplo, se for "educação e desenvolvimento", altere para:var marcador = "educacao-e-desenvolvimento"; -
Descrição de Introdução: Altere a descrição que aparece na introdução da página personalizada:
<p id="intro-texto"> Acompanhe as últimas <strong>notícias sobre economia e finanças</strong> com artigos sobre o mercado financeiro, investimentos, e tendências econômicas que estão impactando a sociedade. </p>Altere o texto dentro da tag
<p>para o conteúdo específico de sua página personalizada.
5. Salvar e Publicar
- Depois de personalizar o código, clique em Salvar e depois em Publicar a página.
Título e Descrição de Pesquisa
Título: Notícias sobre Educação e Desenvolvimento Descrição: Acompanhe as últimas notícias sobre educação, inovação e desenvolvimento com artigos sobre tendências educacionais e sociais. Marcador: educação e desenvolvimento
Resumo
- Você criou uma página personalizada para o Blogger que organiza os posts por marcador de forma dinâmica, com conteúdo estático único (introdução) para cada página.
- Para personalizar o código, altere os valores de marcador e a descrição de introdução conforme sua necessidade.
- A página gerará uma lista de posts baseada nos marcadores e permitirá que o usuário veja mais posts ao clicar em "Veja Mais".
Isso deve ser suficiente para você começar a organizar suas páginas personalizadas no Blogger de forma eficiente e sem problemas de conteúdo duplicado.
Mais sobre otimização para AdSense e indexação
O conteúdo do código acima pode ser otimizado para AdSense e indexação se algumas práticas forem seguidas. Vou comentar sobre a otimização e, depois, fornecer as informações solicitadas para o título, descrição de pesquisa, URL, marcador e imagem.
Otimização para AdSense e Indexação
1. Para AdSense:
- Estrutura limpa e organizada: O código já possui uma estrutura bem organizada, com conteúdo dividido em seções, o que facilita a leitura tanto para os usuários quanto para o Googlebot.
- Uso de texto rico: A introdução e a descrição de cada post (incluindo o texto da introdução e a descrição) são ricas em palavras-chave e ajudam a otimizar para SEO. Isso é importante para melhorar a indexação e aumentar as chances de exibição de anúncios relevantes.
- Responsividade: O design do código é responsivo, o que melhora a experiência do usuário em dispositivos móveis, fator importante para o Google e para AdSense, já que o Google prioriza a experiência do usuário, especialmente em dispositivos móveis.
2. Para Indexação:
- Uso de Meta Tags: O código inclui uma meta tag
description, que é essencial para indexação, ajudando o Google a entender o conteúdo da página. - Conteúdo Único: Como o código exibe postagens específicas e únicas, não há risco de conteúdo duplicado, o que é ótimo para SEO. O conteúdo está sendo carregado dinamicamente, o que também pode ajudar na indexação, pois os posts são gerados a partir de uma fonte estruturada e limpa.
- Uso de Marcadores: A utilização de marcadores ajuda a categorizar e organizar o conteúdo, o que melhora a navegação no blog e facilita a indexação de conteúdo relacionado.
Título, Descrição de Pesquisa, URL, Marcadores e Imagem
Título Principal:
"Notícias e Tendências sobre Economia e Finanças: Como o Mercado está Evoluindo"
Descrição de Pesquisa (até 150 caracteres):
"Fique por dentro das últimas notícias sobre economia, finanças e tendências do mercado financeiro."
URL do Post:
Para um post específico com a URL no formato /p/titulo.html, a URL do post dependerá do título do post. Por exemplo:
- URL sugerida:
https://www.gazetacruzada.com.br/p/noticias-e-tendencias-sobre-economia-e-financas.html
Marcadores:
A melhor opção de marcador depende do conteúdo do post. Considerando que o post fala sobre economia e finanças, o marcador mais adequado seria:
- economia-e-financas
Outros marcadores que podem se encaixar, dependendo do foco do conteúdo, incluem:
- noticias-e-atualidades (caso o post traga atualizações importantes)
- empreendedorismo-e-estrategias (se o post envolver alguma análise estratégica relacionada a negócios e finanças)
Tipo de Imagem para o Post:
A imagem que você usa no post deve ser relevante para o conteúdo e otimizada para SEO. Para um post sobre economia e finanças, uma imagem que represente temas como:
- Gráficos financeiros, indicadores de mercado, ou imagens relacionadas ao setor bancário.
- Imagens que retratem crescimento financeiro, investimentos, ou análise de mercado.
Certifique-se de que a imagem:
- Seja de alta qualidade.
- Tenha um tamanho otimizado (não muito pesada para carregar rapidamente).
- Tenha um atributo
altdescritivo, usando palavras-chave relacionadas (exemplo:alt="gráfico de crescimento econômico").
Conclusão
Para garantir que seu conteúdo esteja bem otimizado para AdSense e indexação, siga estas práticas recomendadas:
- Use meta tags relevantes.
- Organize o conteúdo de forma limpa e estruturada.
- Inclua descrições ricas em palavras-chave, como no código fornecido.
- Utilize imagens de alta qualidade, relevantes para o tema.
- A URL deve ser amigável e incluir palavras-chave.
A URL do post sugerida e o título de pesquisa otimizado devem aumentar suas chances de indexação adequada pelo Google e melhorar a experiência de navegação para os usuários.
Postar um comentário
Os comentários não é a nossa opinião e, portanto, o autor da mensagem é quem se responsabiliza pelo conteúdo postado.