AMP html Blogger Template - AMP DOMPI

Una plantilla completa en Amp HTML totalmente gratis, exclusivo para los usuarios de Blogger, si necesitas una plantilla de Blogger que se realmente veloz has llegado al sitio adecuado. La plantilla Amp Dompi tiene toda la tecnología que necesitas para llegar a mas posibles clientes “Usuarios” que visiten su blog.

Características:

Material design
Responsive design
Box search
Widget Subscribe
Disqus Comments
Random post
Slideshow
Popular post horizontal
Popular post vertical
Menú responsive
Widget link list
Widget label
Widget card
Post card
AdSense
SEO
Amp HTML 100%

Amp Dompi

¿Fácil de usar he instalar?

La plantilla Amp Dompi fue creada pensando en la facilidad de uso del usuario, sin complicación alguna, lista para funcionar en los navegadores web.


¿Cómo saber si mi blog de Blogger esta validada en AMP?

Deberá utilizar el navegador de  Google Chrome he instalar la extensión AMP Validator

Una vez instalada la extensión le mostrara en la parte superior derecha de su navegador web “Google Chrome” el botón con el rayo de color verde de AMP Validator

A continuación, puede ver su demostración en el siguiente blog, como también puede descargar la plantilla completamente gratis

Demo Clic aquí Download Clic aquí

Video Template Amp HTML Dompi


Nota importante:

Antes de empezar este tutorial, se recomienda realizar una copia de seguridad de su blog de Blogger, o primero practicar en un blog de ejemplos. Si no sabe cómo realizar una copia de seguridad de su blog, puede seguir las instrucciones del siguiente enlace:

Realizar una copia de seguridad de mi blog de Blogger
Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:

Políticas de uso

Empezamos

Video Tutorial completo Amp Dompi


Suscríbase a nuestro canal de Youtube

Suscríbase a nuestro canal de Youtube
Instalar la plantilla Amp Dompi

1 Ir a Blogger.com

2 Un clic en Tema


3 Un clic en “Crear/Restablecer copia de seguridad”



4 Un clic en “Examinar”

5 Un clic en el archivo XML que se le envío


6 Un clic en “Subir”


7 Listo ahora ya tiene insertado la plantilla Amp Dompi en su blog

Instrucciones:

1 Un clic en Tema


2 Un clic en “Editar HTML”


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.



1 Configuración del Menú responsive


Busque el siguiente código

<a href='#'>Business</a>

Le mostrara un código similar al siguiente


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

Elimine los símbolos numerales #, y remplacelos por las URLs de sus entradas

2 Cambiar la imagen logo de la Cabecera principal del blog


Busque la siguiente URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHwANqOLcBOHExCOPv6Gvgzh6iKR5Ds9gL5OHIIRDeBgXM8calgcxoRlARZZjabYrg1ViL2se34XPWfTur9SBWzfZTQ6srNzA5P0d9HgslarXyyG4_yq5nXVUM6y8BSHVwoOpqfJlFuU/s1600/amp-html-template-blogger.png

Elimine la URL señalada y remplácelo por una nueva URL imagen que tenga una dimensión de 300x90px

3 Busque las siguientes palabras

Accelerated Mobile Pages en Blogger

Cambie todas las palabras por una pequeña descripción de su blog

4 Busque la siguiente URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5eLFDTL50CWCkuDHsjNszq7Atgl-3SgKCMvaxjE0PHshQNXx3wBChAYnUBP6VtxlJwhbNBF88fnrkYALsr19uG6FuribFU7Fm-iJ7wRj_YSjleVfhSomGwJY12EK-MN5XmctwAkAa5Y/s1600/plantilla-de-blogger-gratis-en-amp-html.jpg

Elimine la URL de imagen y remplácelo por una nueva imagen

5 Realizar los cambios en los datos estructurados

Busque la siguiente línea

<!--Datos estructurados-->


Mire el video tutorial y realice sus respectivos cambios tal como lo señalo

6 Cambiar el Id de la caja de comentarios de Disqus


Busque la siguiente línea

<!-- Seccion comentarios -->

Le mostrara un codigo similar al siguiente


Realice el siguiente cambio:

Remplace el ID blogamptemplate por el Id de su cuenta de Disqus

Realice los cambios pertinentes tal como lo muestro en el video tutorial

7 Ingresar la dirección URL de su blog de Blogger en el widget Random post


Busque el siguiente código

<!-- Seccion Random post -->

Cambie la dirección URL que se encuentra en la plantilla de ejemplo por la dirección URL de su blog de Blogger aumentando la letra S en https

Ejemplo:


Realice los cambios pertinentes tal como lo muestro en el video tutorial

8 Un clic en Guardar Tema


Un clic en diseño


1 Insertar anuncios de AdSense en los gadgets


En su pagina de diseño encontrara dos gadgets llamados:

HeaderBanner

Ayudadeblogger-left



Abrir en editar cada uno de ellos he ingresar el siguiente código

<amp-ad layout="fixed-height" height="100"
type="adsense"
data-ad-client="ca-pub-0062851945838444"
data-ad-slot="1641840555">
</amp-ad>

Realice los dos siguientes cambios:

Cambie los números que están marcados de color amarillo por los que dispone en su cuenta de AdSense

Al igual cambie los números que están marcados de color rojo por los de su anuncio de AdSense

Un clic en Guardar

2 Gadget Popular post Horizontal


Notara en la pagina de diseño de su blog el siguiente gadget

HeaderBanner2


Un clic en editar, mire su configuración


Un clic en Guardar

3 Configuración gadget Fan page de Facebook


Busque el siguiente gadget


Un clic en editar

Notara que tiene el siguiente código

<amp-iframe frameborder='0' height='220' sandbox='allow-scripts allow-same-origin allow-popups' scrolling='no' src='https://cdn.rawgit.com/Luis-Chavez/caja-seguidores-fb/7eb3c1ad/.html?page=ayudadeblogger' width='300'>
</amp-iframe>

Elimine la palabra que está marcada de color amarillo que dice ayudadeblogger, cambie dicha palabra por el nombre de su fan page de Facebook

Un clic en Guardar

4 Configuración del gadget Suscríbete


Busque el siguiente gadget


Un clic en editar, ingrese la URL de su Feed Burner de suscripción, aunque este ya es automático

Ejemplo:


Un clic en Guardar

5 Configuración gadget Lista de Enlaces


Notara que existen dos gadgets Lista de enlaces, debe abrir cada uno de ellos he ingresar lo que necesite mostrar


Ejemplo:



6 Configuración gadget Label “Etiquetas”


Busque el siguiente gadget


Un clic en editar, configurarlo tal como lo muestro en la siguiente imagen


7 Notara que existe un gadget llamado Barra de navegación




Abrir el gadget y configúrelo tal como lo muestro en la siguiente imagen


8 Configuración del gadget de video “Youtube”


Busque el siguiente gadget


Un clic en editar

Le mostrara el código siguiente

<amp-youtube width="240"
      height="173"
      layout=responsive
      data-videoid="WrpkFROqR0Q"
      autoplay>
  </amp-youtube>

Cambie el código que está marcado de color amarillo por el código ID de su video de Youtube, si no sabe cómo hacerlo, por favor revise el video tutorial.

9 Configuración del gadget Entrada destacada


Busque el siguiente gadget


Un clic en editar, y realice sus cambios respectivos

10 Configuración del gadget Slideshow


Busque el siguiente gadget


Un clic en editar

Le mostrara un código similar al siguiente

<amp-carousel id="hero-images"
      width="250"
      height="198"
      layout="responsive"
      type="slides"
      autoplay>

<a href="http://ampdompi.blogspot.com/2017/02/centrarnos-en-lo-fundamental-y.html">
      <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFwz4RT3AbsZjUFwwV6jXHvFGI0zai5Ziex2rjWG43Hbm0d5WkR4lNqcRf5Ch_pIm3ysq0GAokQTAEjpvAPe3N4XvLlgNuWpDc2GaSwQDleitaYlyRLzxLHHcNmQfk8zALUk8BhZ5AmmM/s300/lifestyle-15-750x430.jpg"
          layout="fill"
          alt="How To Style A Choker So You Don’t Look"
          attribution="visualhunt"></amp-img>
      <div class="caption">How To Style A Choker So You Don’t Look</div>
    </a>

<a href="http://ampdompi.blogspot.com/2017/02/herramienta-de-colaboracion-asincronica.html">
      <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEist7oAKw5oFiupq9KMcUTQJ0XLm7823kQeMeAf-h3jr65lXjvCZUwQK2i_v1EOov55PmMeZqc4fEEbIXXEbZfeu-4V86TgLHxDIvY-HDsaBUtqEoZDbG0an0Ne3OhRSk8NJY3cKHqcmAE/s300/lifestyle-10-750x410.jpg"
          layout="fill"
          alt="How to keep a long-haul flight from ruining"
          attribution="visualhunt"></amp-img>
      <div class="caption">How to keep a long-haul flight from ruining</div>
    </a>

<a href="http://ampdompi.blogspot.com/2017/02/sitio-web-que-se-actualiza.html">
      <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_e7h2fBtejDCHhuutMLnCGtDqz721a0WLMx-lonxVcqDEamyBQOTYNqfNIh74AiSdPwuN7_hacnNbJ1ZthGBQvCuSW5LSJjBGOb9sL8IsBOSEzO16UQvg-Wxh7o0Gi8jHqhnabCQ4Vo/s300/lifestyle-8-750x410.jpg"
          layout="fill"
          alt="Tips For Increasing Employee Motivation"
          attribution="visualhunt"></amp-img>
      <div class="caption">Tips For Increasing Employee Motivation</div>
    </a>
</amp-carousel>

Realice los siguientes cambios:

Cambie todas las URLs que están marcadas de color amarillo, estas representan a las imágenes

Cambie las direcciones URLs que están marcadas de color azul, estas sirven para mostrar las URLs de sus posts

Cambie las palabras que están marcadas de color rojo

Un clic en Guardar

11 Crear entradas validadas en Amp HTML

¿Cómo publicar una entrada de Blogger correctamente en Amp?


12 Hemos terminado

Es momento de disfrutar de lo sorprendente de Blogger en Amp HTML

Preguntas frecuentes

Cómo editar el amp-sidebar barra lateral de mi blog en AMP de Blogger
¿Cómo publicar una entrada de Blogger correctamente en Amp?
¿Cómo habilitar la plantilla móvil de mi blog de Blogger en AMP?
Cómo configurar los comentarios de Disqus de mi blog en AMP de Blogger
¿Cómo configurar el gadget Related post? de mi plantilla en AMP de Blogger
Invalid Amp Error al crear un nuevo Gadget/Widget en Blogger
¿Cómo agregar Google AdSense en un Widget de Blogger en AMP HTML?
¿Cómo añadir Google AdSense a tus entradas de Blogger en AMP HTML?
Anuncios automáticos AMP de texto y de display
Corregir error en los datos estructurados al configurar en Blogger
Corregir error en los datos estructurados - error detectado Breadcrumb
Cómo editar las meta etiquetas de las plantillas de Blogger en AMP
¿Cómo configurar los datos estructurados de mi blog de Blogger en AMP?

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Plantillas en AMP

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.