Mostrando postagens com marcador Blogspot. Mostrar todas as postagens
Mostrando postagens com marcador Blogspot. Mostrar todas as postagens

Como adicionar Anúncios Fixos Inferiores Responsivos no Blogger

Nenhum comentário

20 de fev. de 2024

Deseja adicionar anúncios RESPONSIVO no final do seu site do Blogger e aumentar a receita no Adsense, então este artigo será super útil para você.

Alsorsa.News

Mas, antes disso, você precisa entender o básico do que são anúncios fixos, diferentes tipos de anúncios fixos e quais são as orientações fornecidas pela equipe do Adsense para a implementação adequada desses anúncios.



O que é um anúncio fixo?

Um anúncio fixo é um anúncio fixo que permanece visível exatamente na mesma posição, independentemente da rolagem do usuário pelo conteúdo. Eles geralmente são usados no cabeçalho, rodapé, barra esquerda / direita, barra lateral esquerda e direita.


Tipos de anúncios fixos

Anúncios fixos são amplamente divididos em duas categorias. Por exemplo. Horizontal vertical.


Anúncios horizontais são geralmente colocados no cabeçalho e rodapé de um site e geralmente são espalhados de uma extremidade a outra na forma de paisagem.


Os anúncios âncora que obtemos na seção "anúncios automáticos" do Adsense são um exemplo de anúncio fixo horizontal.


Anúncios fixos verticais são geralmente colocados na barra lateral de um site e, em alguns casos, fora dela. Eles são projetados de forma que fiquem na barra lateral mesmo que o usuário role a página para baixo


Benefícios do uso de anúncios fixos no Blogger

Anúncios fixos são uma ótima maneira de aumentar sua receita do Google AdSense, pois aumentam a impressão geral e a taxa de cliques [CTR] de seu website, além de melhorar seu valor de CPM com o tempo.


Aqui estão alguns dados estatísticos que comprovam o ponto acima.


  1. CTR 40-60% superior: em comparação com anúncios gráficos normais
  2. Melhorar a visibilidade: até 200% mais visível do que outros formatos nos mesmos canais.
  3. CPM 30-70% mais alto: os anunciantes gastam mais com esses anúncios.


Também discutiremos as diretrizes para colocar anúncios fixos no Blogger, mas antes disso vamos entender como você pode adicionar anúncios fixos de rodapé ao seu site.


Antes de prosseguir com as etapas abaixo, certifique-se de fazer um backup do seu tema, para que, se você fizer algo errado, você possa restaurar facilmente o seu site à sua posição original, carregando o arquivo de backup.


Como criar anúncio flutuante responsivo no Blogger

Para adicionar um anúncio aderente na parte inferior do Blogger, siga as etapas abaixo.


Etapa 1: copie o código CSS abaixo e cole-o logo acima deste]]> </ b: skin> código ou cole-o na seção CSS adicional do seu tema

Alsorsa.News


Copie o código CSS abaixo

AMP no Blogger: Configuração básica

Nenhum comentário

7 de ago. de 2023

 AMP no Blogger: Configuração básica

Alsorsa.News

Eu sou um usuário da plataforma Blogger e acho um lugar realmente incrível para um novato começar. Muitos dos meus blogs usam o Blogspot. Todo mundo está falando sobre o AMP e realmente é brilhante no sentido de velocidade de carregamento das páginas mobile. Levou o padrão de carregamento da página para um novo nível.


O que é o Google AMP?

Basicamente é "Accelerated Mobile Pages", ou seja, páginas aceleradas para acesso móvel. É um projeto do Google que visa criar páginas móveis com conteúdo estático que seja mais rápida. As páginas da AMP usam AMP HTML, AMP JS e AMP CDN para processar e entregar páginas com muita mais rapidez. O Google introduziu a AMP com a visão de que os editores possam criar conteúdos otimizados para acesso móvel ´para carregá-los instantaneamente em todos os lugares.

Como configurar o AMP no Blogger?

Passo 1 - Criar o html AMP

Antes de tudo save o seu templante para se caso ocorra algo de errado é só você voltar de onde começou.


Agora vá em Configurações > Editar html e substitua todo código <html>, que fica no começo do templante por:

<html amp='amp' lang='pt-br'>

Passo 2 - Adicione as meta tags Charset e Viewport logo após <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Passo 3 - Adicione a tag Canonical

Confira se no seu html já existe essa tag. Se não estiver presente, adicione dessa maneira abaixo logo após o código anterior:

<link expr:href='data:blog.url' rel='canonical'/>

Passo 4 - Configurando o CND AMP

Cole este código logo acima da tag </ head>:

<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>

Passo 5 - Código AMP das imagens

Se você já possui imagens em seus posts altere pelo seguinte código:

<amp-img alt="Texto da imagem" height="560" layout="responsive" src="link da imagem" title="Título da imagem" width="840"></amp-img>

Agora é só substituir conforme indicado e colocar conforme o tamanho de sua imagem.

Conclusão

Espero que isso te ajude. o AMP é um projeto apoiado pelo Google e o Blogspot é a plataforma de blogs do Google, mas ainda assim o Blogger atualmente não suporta AMP. Então, não podemos esperar por eles e nem sabemos quando eles começarão a suportar. Então, use essas dicas e ajustes para adicionar suporte AMP no seu blogger. Se você tem muitas postagens terá que ajustar todas as imagens para que todo o blog seja válido para AMP, ou você pode ajustar só os principais e os novos.


*Meu Blogger

Não Perca!
© Todos Os Direitos Reservados
Por JPCN.Blog