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



¿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


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:


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



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

74 comentarios:

  1. Hola como estas, me interesa esta plantilla, me puedes enviar la plantilla por favor? mi correo es duvangonzalezme@msn.com

    ResponderEliminar
    Respuestas
    1. Hola Duvan, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
    2. Luis no me aparecen las secciones 8, 9, 10, 11, 12 que hago, link http://vertelevisiononlinegratis.blogspot.com

      Eliminar
    3. Hola Duvan, ingrese a su Blog y luego en el código de su plantilla, verifique que se encuentra el código que indico en este tutorial, el problema es que usted ha realizado algunos cambios en la plantillas y ha eliminado parte del código y por lo cual esta todo desordenado y no se le mostrara las modificaciones que se encuentra en la sección 8, 9, 10, 11, 12, por favor vuelva a ingresar nuevamente la plantilla en su blog y realice los cambios con tranquilidad

      Saludos.

      Eliminar
  2. EXCELENTE PLANTILLA BRO BENDICIONES Y ÉXITOS AQUÍ ESTA MI CORREO GRACIAS MI HERMANO:
    dario_m1990@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hola mi estimado amigo Dj Genio, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  3. hola..me envias la plantilla adrianrockerito88@gmail.com ,muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Adrian, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  4. hola,muy linda la plantilla y excelente tutorial. Podrías enviarme la plantilla? juanchydel86@gmail.com.
    Desde ya,Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Juan, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  5. hola..muchas gracias por la plantilla es excelente..tengo una duda,como tiene que ser el link para poder ver todas las entradas juntas de un blog,porque no pude lograrlo.muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, sobre su pregunta remplace solo la url del ejemplo por la url de su blog:

      Ejemplo:

      http://landingpageamphtml.blogspot.com/search/label/

      Saludos

      Eliminar
  6. Muchas gracias por la solucion!!...te hago la ultima consulta..ja.En el recuadro de las entradas no se ve bien el titulo queda entrecortado.
    me podras decir en que parte del codigo esta eso para solucionarlo.gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Juan, sobre su pregunta a que se refiere con recuadro de las entradas?, por favor detalle un poco mas sobre su consulta, ademas de indicar la URL de su blog

      Saludos

      Eliminar
  7. buenas tardes amigo por favor me podria ragalara la plantilla de Landign page de Blogger en Amp HTML. http://www.ayudadeblogger.com/2017/03/landing-page-amp-html-en-blogger-tutorial.html

    ResponderEliminar
    Respuestas
    1. Hola Juan, claro que le puedo enviar la plantilla, pero para ello necesita hacerme saber la dirección de su correo electrónico y con ello podre enviarle la plantilla

      Saludos.

      Eliminar
    2. jejejeje disculpa esa buenas tardes amigo por favor me podria ragalara la plantilla de Landign page de Blogger en Amp HTML. http://www.ayudadeblogger.com/2017/03/landing-page-amp-html-en-blogger-tutorial.html mi correo es jfrancisco2803@gmail.com

      Eliminar
    3. Hola Juan, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  8. Hola luis Chavez !
    Gracias por compartir tu trabajo al publico y sobre todo free.
    Desearia que me enviara dicha plantilla AMP a huarachigonza@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Gonzalo, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  9. Hola Luis quiero probar tu nueva plantila en mi blog, el correo es buzontex@gmail.com, gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Francisco, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  10. hola..te enviee un email para poder explicarte bien lo q necesito modificar de las entradas.muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, he revisado su correo, la primera pregunta, que navegador web esta utilizando, ya que si usted utiliza Google Chrome, Internet Explorer, Fire Fox, no ocurre ningún inconveniente

      Saludos.

      Eliminar
  11. hola..utilizo google chrome.Me funciona bien todo,solo tengo ese problema en el titulo de las entradas que no se leen bien..solo necesito que me digas en que linea de codigo esta ubicado,y yo lo soluciono.gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, sobre su pregunta, ingrese en el editor HTML de su plantilla y busque la siguiente linea de código:

      <h1 class='post-title entry-title'>

      La linea de código que le indique se encuentra justo abajo de:

      readmore btn-floating

      Saludos

      Eliminar
  12. felicitaciones luis por tu blog,excelentes diseños, me ayuda mucha con mi trabajo, podrias enviarme la plantilla por favor.
    mi correo es raced.cas@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  13. Luis excelente tutorial y explicación, me gustaría poder implementar la plantilla en mi blog, de antemano gracias por tu gran aporte y éxitos en tus proyectos. jcsanchezdu@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hola Juan Carlos, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  14. hello, plz send me: lovebloggervn@gmail.com
    thanks

    ResponderEliminar
    Respuestas
    1. Hola Minh, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  15. Hola muy chevere la plantilla..podria ser tan amable enviarme una copia a mi email andante887@gmail.com Gracias

    ResponderEliminar
    Respuestas
    1. Hola Enrique, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  16. Hola me puedes enviar la plantilla. Gracias redactores11@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Manuel, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  17. Hola, Luis, gusto en saludarte. Si pudieras enviarme la plantilla a tonyescobedo2009@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  18. Hola Luis, me ha gustado mucho tu tutorial, podrías enviarme la plantilla? juancamiloort11@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Juan, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  19. Buen dia, Luis envieme si es posible la plantilla.

    ResponderEliminar
  20. Luis Buen día, me podrías colaborar con un interrogante en la plantilla Landing page Amp HTML , quiero editar los textos de las páginas Nosotros, Servicios, Contactos, Autor pero las busco en el HTML y únicamente encuentro las entradas. Mi pregunta es: esas páginas son de ejemplo y debo crearlas desde 0 en páginas de Blogger y luego pegar las entradas al HTML?, de ante mano gracias por tu respuesta.

    ResponderEliminar
    Respuestas
    1. Hola Juan, sobre su pregunta, exactamente usted deberá crear las paginas estáticas en su blog de Blogger, para mas detalles y como realizarlas puede seguir las instrucciones del siguiente tutorial que publique sobre este tema:

      http://www.ayudadeblogger.com/2017/04/crear-paginas-estaticas-en-amp-html.html

      Saludos.

      Eliminar
  21. HOLA luis Chavez. me puedes mandar una plantilla Landing page Amp HTML, gracias de antemano.

    ResponderEliminar
  22. disculpa escribo de nuevo porque no estoy seguro de que la informacion esta bien... robertocarlosventurapaulino@gmail.com por favor me puedes mandar una plantilla Landing page Amp HTML gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola Roberto, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  23. Estimado Luis, es una gran alegria poder comunicamr contigo, y agradecerte por esto valiosos aportes, por favor aprecio me envies la plantilla Landing page Amp HTML mi correo electronico es geciconservacion@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola GECI, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  24. Cordial saludo Luis, muchas gracias por estás plantillas, atentamente Daniel GG, danielmedellincolombia@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola. se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  25. Hola luis, Excelente tutorial y era exactamente lo que estaba buscando en la red...
    Gracias por compartir.
    Un Abrazo.

    ResponderEliminar
  26. Hola Luis, me gustaria probar tu plantilla a: erick.pve@gmail.com.
    Un gran abrazo.
    Atte: Erick Peña

    ResponderEliminar
    Respuestas
    1. Hola Erickpve, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  27. amigo me enviarias tambien la plantilla de Landing page Amp. muchas gracias. saludos

    ResponderEliminar
    Respuestas
    1. Hola, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  28. Hola Luis, me gustaría probar lo de las paginas estáticas. Puedes enviarme plantilla? Me tienes encantada con tus ideas, muchas gracias.
    eva4mat@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola EVA, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  29. ola gatei do seu templete muito legal estou presisando de um urgente voce poderia me anviar pra mim obrigado um abraço email carlosmoreira12.cm@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Tek Laine, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  30. Olá Luís resebi seu template muito bom mais do com alguns problemas
    Quando vou validar a pagina da um erro asim tag "g:plusone" não é permitida e não válida e também erro de imagens quando eu posto uma imagem ela aparece no poste mais nao na página principal mesmo eu usando a tag noscript ela não fusiona me da uma força Luiz preciso urgente

    ResponderEliminar
  31. Esse é meu e-mail Luis carlosmoreira12.cm@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Tek, cual es la dirección URL de su blog, y así podre ver lo que sucede

      Saludos.

      Eliminar
  32. Olá a url https://dietaemagreca.blogspot.com.br na pagina principal está válida por que retirei as imagem noscript esta so nos posts e as outras páginas estão com erro "g:plusone"

    ResponderEliminar
    Respuestas
    1. Hola Tek Laine, sobre su pregunta, he visitado su blog, pero usted no ha ingresado correctamente el codigo en la entrada al publicar la primera imagen, por favor mire el siguiente tutorial desde donde dice:

      1 Publicar una entrada con texto validado en Amp

      http://www.ayudadeblogger.com/2017/01/publicar-una-entrada-de-blogger-correctamente-en-amp.html

      Ademas, mire el video tutorial

      https://www.youtube.com/watch?v=4HGPTHYtkx8

      Saludos

      Eliminar
  33. Luís coloquei o código do seu tutorial que m
    e enformou

    <Noscript

    Da erro de imagem / tag "img" só pode aparecer como descendente da tag "noscript". Você quis dizer "amp-img"

    De uma olhadinha no blog coloquei uma imagem la com essa tag tanta validar para ver o erro

    ResponderEliminar
    Respuestas
    1. Hola Tek Line, sobre su pregunta, usted esta ingresa incorrectamente el código en las entradas, por favor mire el video tutorial y rijase a las normas establecidas del reglamento en Amp.

      Para mas detalles específicos déjeme un mensaje en mi correo electrónico:

      ayudadeblogger@gmail.com

      Quedo atento a su correo

      Saludos.

      Eliminar
  34. Saludos Luis, me puedes enviar esta plantilla
    Mi correo ksstevenn@gmail.com . muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Gustavo, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  35. Me podrias regalar la plantilla bro?? Gracias :)

    correo: matutecasti@gmail.com
    contraseña: haysi como me dicen a mi... el que pone la contraseña de su correo en una pagina publica? jeje Buen dia!!!
    Gracias de antemano :)

    ResponderEliminar
    Respuestas
    1. Hola Tony, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  36. Hola, agradezco si me puede enviar la plantilla a new16111987@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, puede descargar el tema del siguiente enlace: https://drive.google.com/file/d/1GgjRtc2sJVA2qOsuSBmwTggJcWVSJO0V

      Eliminar
  37. This template now contains many errors, does not display Amp and many errors on the structured data, please, how can I fix it

    ResponderEliminar
  38. This template now contains many errors, does not display Amp and many errors on the structured data, please, how can I fix it

    ResponderEliminar