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%


¿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
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:
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://2.bp.blogspot.com/-UkxGJiDCiJg/WX6YgX8QYTI/AAAAAAAABnU/LtWqLhsy_TsQBOI6Kq0OY0LOvZUU7__TwCLcBGAs/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://3.bp.blogspot.com/-fqoGqlEPyTM/WX652wY4xfI/AAAAAAAABnk/Rp8CnVaPBoo_EoXbjc6yIGkzDhLb3cUpQCLcBGAs/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://4.bp.blogspot.com/-KW8TXLYZXE4/WX57K074blI/AAAAAAAABmg/OIOHl-Ehowk6OUY6Ux-tz3P__W0hCH9zgCLcBGAs/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://3.bp.blogspot.com/-IffxEmWMPL4/WX57SeJRsnI/AAAAAAAABmk/cNFevNSfI4IEcDazxoO9azN3ZNbuSOe6ACLcBGAs/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://1.bp.blogspot.com/-8XGd8tcgyes/WX57WZ_zVWI/AAAAAAAABmo/RxfuisVuCg0034UYxOGVnYy0IGzheKDPgCLcBGAs/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



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.

Related post

Comentarios

4 comentarios:

  1. Hola buenas noches me puede enviar el diseño a info@t-conecta.com , una consulta su diseño tambien se adapta a publicaciones de video, quiere decir que capta la imagen del video en miniatura o debo ingresar aparte una imagen?

    ResponderEliminar
    Respuestas
    1. Hola, sobre su pregunta, no se adapta a la primera imagen de video, tendrá que ingresarlo como imagen

      Se le envió la plantilla a su dirección de correo, por favor reviselo.

      Saludos

      Eliminar
  2. Hola buenas tardes, serias tan amable de enviarme la plantilla al correo zapatajs1@hotmail.com Saludos y gracias...

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta, puede descargar el tema del siguiente enlace;
      https://drive.google.com/file/d/18A8a_cfxr8ZLVxlKYKRBkS01ty5mdm97

      Saludos

      Eliminar