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
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:
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:
Video Tutorial completo Amp Dompi
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
4 comentarios: