Landing page Amp HTML en Blogger Tutorial

Una Landing page creada en Blogger y con 4 diferentes páginas estáticas con la estructura completa en AMP HTML, un diseño único y sorprendente.

Necesitabas cambiar el diseño de tu blog de Blogger a un diseño web profesional y sobre todo que tenga la implementación de AMP HTML?, ahora lo podrás tener.

Una página principal y cuatro diferentes secciones de páginas, a las cuales se podrá seguir creando las páginas que necesite, siguiendo las pautas de este tutorial creado exclusivamente para usuarios de Blogger.

Características:

Parallax en Amp HTML
Menú desplegable en Amp HTML
Menú responsive en Amp HTML
Iconos Fond Awesome
Widget carrusel en Amp HTML
Información de contacto, mapa
4 paginas estáticas, Nosotros, Servicios, Contactos y Autor (Con esta opción se puede crear las páginas que necesite)
Diseño Material design
Implementación de Bootstrap
Iconos sociales
Implementación de anuncios AdSense
Buscador integrado en las entradas
Widgets en Amp HTML
Un random post en las entradas
Caja de comentarios Disqus en Amp HTML
Implementación de videos Youtube, Vimeo, etc.
Entradas populares en Amp HTML
Slideshow en Amp HTML
Entrada destacada en Amp HTML
Footer
Sidebar
Diseño Responsive
Color barra de navegación desde un dispositivo móvil
Boton +1 de Google+ en Amp HTML
Widget caja de seguidores de Facebook en Amp HTML
Widget caja de seguidores de Google+ en Amp HTML
Widget caja Tweets de Twitter en Amp HTML
Widget autor estilo Material design
Datos estructurados
SEO amistoso

Landing page Amp HTML

¿Cómo saber si mi Landing page 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í

Suscríbase a nuestro canal de Youtube
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

1 Instalar la Plantilla

Video Tutorial


Suscríbase a nuestro canal de Youtube
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 Landing page en su blog

Este tutorial tiene diferentes secciones, a los cuales se les ha creado algunos videos tutoriales para cada sección

Primero tendrá que realizar los cambios ingresando en el editor HTML de su plantilla

Un clic en Tema


Un clic en Editar HTML


1 Cambiar el título y descripción de su blog, como también los datos estructurados desde el editor HTML de su plantilla


Busque las siguientes palabras y cámbielas todas por el título de su blog

Landing page Amp HTML en Blogger

Cambie la descripción de su blog eliminando las siguientes palabras

Landing page Amp HTML en Blogger diseño responsive

Cambiar la URL de imagen, nombre del autor, código de seguimiento Google search console, código de seguimiento de Bing, dirección de correo, país, ciudad.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDovQQvrIucmNIKCc3j_nJ8Kp_QqZDI-IJ6wgmmcHfoUpIiCQos3FI3wXaYxye7qRa0yvmGP7Ssg4K7c69yWbzgpc3GYanOILIa-9JPoeszM9bAdNO0i_TSeP5F9K9UmBljIywkAdiaGm/s1600/ayudadeblogger.png

Luis Chávez

t1tvtwCPfGuwVV-87oGtbjvpQKYZNQBag3dgxBpF3yg

ayudadeblogger@gmail.com

Ecuador

Quito

Cambiar las palabras, URLs, número de teléfono, URLs de perfiles sociales en los datos estructurados

Video tutorial


Suscríbase a nuestro canal de Youtube
2 Cambiar la imagen principal Parallax


Busque el siguiente código

/* Seccion 1 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAi0GtNMAKxkcGnI91946N0ZxDplKcPb9Y33Lx6rlGBChQlhy3FdOECLycbNblWUYFl7jTxYmcEvRmN96V35MuIL-AppX39rRS03JNCahLd7PYGL4bMi-USLeMB2rAfoLMiaMqHsnzzlw/s1600/1.jpg

Video tutorial


Suscríbase a nuestro canal de Youtube
3 Cambiar la segunda imagen


Busque el siguiente código

/* Seccion 2 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6dlXEZ-ooOuJawOD_e4CJdViLCnjvDgw0fr8Rt3z165S8zW2jPLBjrzozFEOo6bvtpSMdt842aV6-31uGnokfci5bzJBxO2HP-JB-QQTMCNPTJZWReX36_y29_nsUebQTPCi_5P-TePY/s1600/2.png

Video tutorial


Suscríbase a nuestro canal de Youtube
4 Cambiar la tercera imagen


Busque el siguiente código

/* Seccion 3 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGXsZb5aQAcRNLdLjOgjKf55dIFC6ePKWD29dsIkBsfWnJp_nBnemtkWONRJDV1CywDcLNKoXT1TCamPe_8pLpdy46S_DmrE-L5lnzRIVQZhnM2RNlfsbk4EIVrMYYgCeAAz6d3iSI7gE/s1600/4.jpg

Video tutorial


Suscríbase a nuestro canal de Youtube
5 Cambiar la cuarta imagen


Busque el siguiente código

/* Seccion 4 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1l2XF74pLqOa5e6ajoYCiTiXl6CvjGcQWBUIDxxXDUO20GjkIFyoiP6EXXfdeEqwVoq6sVzX19HALywkUjXnimSsavWhSMEHvY2B0W5Q1B65WhdQEbiqGuACd_H_ttKXVXh7PZGoLllg/s1600/11.jpg

Video tutorial


6 Menú Responsive


Busque el siguiente código

<!-- Seccion 5 -->

Ahora le mostrara el código del menú, para ello debe editar las palabras, cambiar las URLs y los perfiles sociales

Video tutorial


7 Menú desplegable


Busque el siguiente código

<!-- Seccion 6 -->

Le mostrara el código del menú, para ello debe editar las palabras, cambiar las URLs

Video tutorial


8 Editar el título, descripción de la imagen principal Parallax


Busque el siguiente código

<!-- Seccion 7 -->

Le mostrara el siguiente código

<h1 class='d'>Landing Page AMP HTML BLOGGER</h1>
<br/>
<h4 class='d adb-justificar'>Páginas móviles aceleradas (AMP), es un nuevo formato para la entrega de contenido web en dispositivos móviles. Se ha diseñado específicamente para maximizar el rendimiento y la velocidad.</h4>
<br/>
<a class='btn2 btn-primary' href='#'>
<i class='fa fa-angle-right'/> Empezar      </a>

Cambie las palabras que están marcadas de color rojo, también elimine el símbolo # que está marcado de color azul por la dirección URL de una entrada o pagina

9 Editar el título, descripción de la segunda imagen


Busque el siguiente código

<!-- Seccion 8 -->

Le mostrara el siguiente código

<center>
<h1>The best way to show your Blog to the world</h1>
</center>
<div class='adb-container2'>
<h4 class='adb-justificar'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</h4>
</div>

Cambie las palabras que están marcadas de color rojo

10 Cambiar los iconos de Fond Awesome y las palabras


Busque el siguiente código

<!-- Seccion 9 -->

Le mostrara el siguiente código

<i class='fa fa-desktop iconbox_icon'/>
</div>
<div class='iconbox_content adb-justificar'>
<h4 class='info-title'>Responsive Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt dolore.</p>
 </div></div>
  </div>
<!-- fin descripcion 1 -->
<!-- descripcion 2 -->
<div class='col-md-3'>
<div class='iconbox'>
<div class='iconbox_icon'>
<i class='fa fa-pie-chart iconbox_icon'/>
      </div>
<div class='iconbox_content adb-justificar'>
<h4 class='info-title'>Clean Code</h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
     </div>
 </div>
<!-- fin descripcion 2 -->
<!-- descripcion 3 -->
<div class='col-md-3'>
<div class='iconbox'>
<div class='iconbox_icon'>
<i class='fa fa-check-square-o iconbox_icon'/>
    </div>          
<div class='iconbox_content adb-justificar'>
<h4 class='info-title'>Landing page Amp</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Cambie las palabras que están marcadas de color rojo

Cambie los nombres de los iconos de Fond Awesome que están marcados de color azul, por unos nuevos, puede dirigirse al siguiente enlace en el cual encontrara el icono que mejor le guste

Iconos Fond Awesome

Video tutorial


11 Cambiar los iconos de Fond Awesome y las palabras del siguiente widget


Busque el siguiente código

<!-- Seccion 10 -->

Le mostrara el siguiente código

<center>
<h2>Present your Amp HTML in a beautiful and elegant way.</h2>
</center>
<p>Con la configuración de diseño web adaptable puedes enviar desde el servidor el mismo código HTML a todos los dispositivos, y se utiliza el código CSS para modificar el procesamiento de la página en el dispositivo.</p>
<br/>
<div class='iconbox'>
<div class='iconbox_icon'>
<i class='fa fa-check-square-o iconbox_icon'/>
 </div>          
<div class='iconbox_content adb-justificar'>
<h4 class='info-title'>Creative Design</h4>
<p>Con la metaetiqueta de ventana gráfica se indica al navegador cómo ajustar las dimensiones y el escalado de la página a la anchura del dispositivo.</p>
   </div>
 </div>
<br/>
<div class='iconbox'>
<div class='iconbox_icon'>
<i class='fa fa-check-square-o iconbox_icon'/>
           </div>          
<div class='iconbox_content adb-justificar'>
<h4 class='info-title'>Cross-Browser Support</h4>
<p>Con el diseño adaptable se envía a todos los dispositivos un mismo código ajustado al tamaño de la pantalla.</p>
       </div>
</div>

Cambie las palabras que están marcadas de color rojo

Cambie los nombres de los iconos de Fond Awesome que están marcados de color azul, por unos nuevos, puede dirigirse al siguiente enlace en el cual encontrara el icono que mejor le guste

Iconos Fond Awesome

12 Widget carrusel


Busque el siguiente código

<!-- Seccion 11 -->

Le mostrara un código similar al siguiente

<a class='blog-carousel-item' href='#'>
<amp-img height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvNCTtBt5UWbZe9kybj72s8ix8qvancGjYIZlz8CYPVR9IjPDR9AuVBjujzH3u8lqkHJuNbXQ0iZ2hF_X4MHPo9Vmdv-HeGScf4n1P-kIXqovjIPKJee_4fCzTd3UusnN6S7Q9oaG1nJ4/s400/25.jpg' width='250'>
</amp-img>
<div class='blog-carousel-item-caption'><p>Amp HTML Carrusel 1</p>
<small>Leer más...</small>
</div></a>

Realizar los siguientes cambios:

Cambie los signos numerales # que están marcados de color azul por la dirección URL de una entrada o pagina

Cambie la dirección URL de imagen que está marcada de color amarillo por una nueva dirección URL de imagen

Cambie las palabras que están marcadas de color rojo

Todo lo mencionado deberá realizarlo en todo el código del widget carrusel

Video tutorial


13 Editar el título, descripción de la cuarta imagen


Busque el siguiente código

<!-- Seccion 12 -->

Le mostrara el siguiente código

<div class='text-responsive'>
<center>
<h2 class='title2'>Amazing Landing page Amp HTML for Blogger</h2>
</center>
<br/>
<h3 class='d'><strong>Diseño   -    Inspiración   -    Tegnología </strong></h3>
<h3 class='d'>Amp HTML - Los componentes de esta Landing page están basados en Bootstrap he inspirados en los poderosos estilos de Material design Google. Toda la estructura de esta plantilla es diseñado en Blogger.com y transformado en Accelerated Mobile Pages AMP. </h3>
</div>

Cambie las palabras que están marcadas de color rojo

14 Editar el título, descripción de la quinta imagen


Busque el siguiente código

<!-- Seccion 13 -->

Le mostrara el siguiente código

<center>
<h2 class='title2'>Sign up to Our newsletter</h2>
<br/>
<h3 class='d'>Suscríbete completamente gratis y recibirás mis nuevas actualizaciones directamente en su bandeja de entrada</h3>
</center>

Cambie las palabras que están marcadas de color rojo

15 Editar información de contacto, iconos fond awesome y mapa


Busque el siguiente código

<!-- Seccion 14 -->

Le mostrara el siguiente código

<div class='col-md-5 col-md-offset-2'>
<h2>Información de contacto</h2>
<br/>
<p>Landing page Amp HTML Blogger es una página responsive. Se ajustará perfectamente como un marcador de posición para su sitio web o página de destino.</p>
<p>Viene con varias variantes de contenido y de fondo. Esta Landing Page en Amp HTML también está equipado con algunos dispositivos frescos para la versión movil.</p>
<ul class='icon_list'>
<li><div class='icon_small float-left fa fa-map-marker'/> <h6><b>     Bellavista alta, Tena, Ecuador</b></h6></li>
<li><div class='icon_small float-left fa fa-phone'/><h6><b>(593) 994589032</b></h6></li>
<li><div class='icon_small float-left fa fa-envelope-o'/><h6><a href='mailto:ayudadeblogger@gmail.com'>ayudadeblogger@gmail.com</a></h6></li>
</ul>
<p>The Landing page Amp HTML dispone de código bien establecido y viene con la documentación en profundidad..</p>
</div>
<div class='col-md-5 col-md-offset-2'>
<h2>Mapa</h2>
<br/>
<amp-iframe frameborder='0' height='430' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.2176475242013!2d-77.81577118570475!3d-0.9942268992747325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91d6a44a76c2b909%3A0x109836fcdd0679e1!2sAyudadeblogger!5e0!3m2!1ses!2s!4v1488056250512' width='600'> </amp-iframe>

Cambie las palabras que están marcadas de color rojo

Elimine todo el código que está marcado de color azul perteneciente al mapa

Diríjase a Google Maps, genere el código Embed de su mapa, copie solo la dirección URL generada, para ello puede ver el ejemplo de implementación en el siguiente video


- El código que me genero como ejemplo


- Se tendrá que copiar solo la URL que esta marcada

Video tutorial


16 Cambiar las URLs de los perfiles sociales


Busque el siguiente código

<!-- Seccion 15 -->

Le mostrara el siguiente código

<a class='social-adb fa fa-facebook' href='https://www.facebook.com/ayudadeblogger/'/>
<a class='social-adb fa fa-twitter' href='https://twitter.com/ayudadeblogger'/>
<a class='social-adb fa fa-google-plus' href='https://plus.google.com/+Ayudadeblogger'/>
<a class='social-adb fa fa-linkedin' href='https://www.linkedin.com/in/luis-chavez-a9154953/'/>

Cambie las direcciones URLs que están marcadas de color azul por las direcciones URLs de sus perfiles sociales

17 Editar la caja de comentarios Disqus


Busque el siguiente código

<!-- Seccion comentarios -->

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

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

Video tutorial


18 Realizar los cambios en el 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


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

Video tutorial


19 Es momento de dar un clic en Guardar Tema

Editar los widgets del sidebar

Diríjase a Diseño

Video tutorial


1 Widget Ads de AdSense



Abrir el gadget he ingrese el siguiente código en su interior

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

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

2 Widget botón Google+



Abra el gadget he ingrese el siguiente código en su interior

<amp-iframe width='290'
      height='120'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='yes'
      src='https://cdn.rawgit.com/Luis-Chavez/boton-mas-1-google-en-amp/271645c3/.html?user=http://www.ayudadeblogger.com/'>
</amp-iframe>

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

3 Widget perfil de Google+



Abrir el gadget he ingrese el siguiente código en su interior

<amp-iframe width='290'
      height='380'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='no'
      src='https://cdn.rawgit.com/Luis-Chavez/google-mas-badge/02cae2a3/.html?user=+LuisChávez'>
</amp-iframe>

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

4 Widget perfil página de Google+



Abrir el gadget he ingrese el siguiente código en su interior

<amp-iframe width='290'
      height='390'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='no'
      src='https://cdn.rawgit.com/Luis-Chavez/google-mas-badge-page-amp/9171d501/.html?user=+Ayudadeblogger'>
</amp-iframe>

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

5 Widget Video



Abrir el gadget he ingrese el siguiente código en su interior

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

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

6 Widget Tweets de Twitter



Abrir el gadget he ingrese el siguiente código en su interior

<amp-iframe width='290'
      height='300'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='yes'
      src='https://cdn.rawgit.com/Luis-Chavez/Embed-Tweet/adad4db8/.html?user=ayudadeblogger'>
</amp-iframe>

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

7 Widget Slideshow en Amp



Abrir el gadget he ingrese el siguiente código en su interior

<amp-carousel id="hero-images"
      width="250"
      height="180"
      layout="responsive"
      type="slides"
      autoplay>
<a href="http://www.ayudadeblogger.com/">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnxbFfmn2b616X2_jN-ICE8KIaeem3bEEZGpLsjvhURM_nm38siTlJI7kRjWqTq2Q2WEzHD_K40ma4OZUviDVxwBSmfj0A9Hj-7hYXUfQuR6QNdz5sVI5lzkfMxohEwLx4ANdfpERiwmt/s400/105.jpg"
          layout="fill"
          alt="Slideshow Amp 1"
          attribution="visualhunt"></amp-img>
<div class="caption">Slideshow Amp</div>
</a>
<a href="http://www.ayudadeblogger.com/">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcr7KYvwijJroWrVGNCIIFb-iKDiWzMAYwghouOlhZ25FMnIFSOUOxWm6G95enPoxbvverDfHCuEFAHrOZsj46kCwQw4HrYebHmhpENWc0jH8QSM_2TWljHhOf95C5OonD9HSgDzSnK8S/s400/86.jpg"
          layout="fill"
          alt="Slideshow Amp 2"
          attribution="visualhunt"></amp-img>
<div class="caption">Slideshow Amp</div>
    </a>
<a href="http://www.ayudadeblogger.com/">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhBCukh4w1Y780EwMpb-zPAYOvc5Z8uu7e57h5FEzDYx9HBMt7S3MvWasDLxHZYHcvx_eJiBXqmexUoNj5qD9Ld2rObbC520KCv9HX4mD8v5sIBHHddXLYFaVnIw2R3qiTntm1tSz4gOa/s400/80.jpg"
          layout="fill"
          alt="Slideshow Amp 3"
          attribution="visualhunt"></amp-img>
      <div class="caption">Slideshow Amp</div>
    </a>
</amp-carousel>

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

8 Abrir el gadget Suscríbete




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

9 Caja de seguidores de Facebook en Amp HTML


Abrir el gadget Seguidores de Facebook


Ingrese el siguiente código en su interior

<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>

Cambie donde dice ayudadeblogger por el nombre de su Fan page de Facebook

10 Eliminar widgets que no estén validados en Amp, como por ejemplo el gadget Archivo

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

Publicar una entrada correctamente en Amp HTML

Para que pueda implementar una entrada con la estructura completa en Amp, puede seguir las instrucciones que se encuentra en el siguiente tutorial

¿Cómo publicar una entrada en Amp HTML?
Crear páginas estáticas en Amp HTML

En esta sección de crear paginas estáticas, podrán realizarlo de una forma fácil y segura, siga el procedimiento de cada video tutorial que se encuentra en el siguiente enlace:

Crear páginas estáticas en Amp HTML
1 Pagina estática sección contactos


Para más detalles por favor visite el siguiente enlace:

Crear páginas estáticas en Amp HTML
2 Pagina estática sección servicios


Para más detalles por favor visite el siguiente enlace:

Crear páginas estáticas en Amp HTML
3 Pagina estática sección nosotros


Para más detalles por favor visite el siguiente enlace:

Crear páginas estáticas en Amp HTML
4 Pagina estática sección autor


Para más detalles por favor visite el siguiente enlace:

Crear páginas estáticas en Amp HTML
Bueno, si has llegado hasta aquí, muchas felicidades has realizado un gran trabajo

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 dudes 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.