Publicar una entrada de Blogger correctamente en Amp

AMP en Blogger - Si no sabes cómo publicar una entrada o post de Blogger correctamente en AMP y así nos valide el código AMP y no nos presente un solo error, puedes seguir este tutorial, creado para usuarios de Blogger que están utilizando Plantillas de Blogger en AMP.

¿Cuáles son los temas que aprenderé?

En este tutorial de Blogger en AMP aprenderá lo siguiente:
1 ¿Cómo publicar una entrada con texto validado en AMP?
2 ¿Cómo publicar la primera imagen de portada en AMP?
3 ¿Cómo publicar una nueva imagen?
4 ¿Cómo publicar una imagen pequeña?
5 ¿Cómo añadir una URL "Vínculo" a una palabra o frase?
6 ¿Cómo añadir una URL a una imagen en AMP?
7 ¿Cómo centrar un texto o titulo en AMP?
8 ¿Cómo añadir H2 encabezado a un titulo?
9 ¿Cómo añadir H3 subtítulo a un texto?
10 ¿Cómo marcar el texto en "negrita"?
11 ¿Cómo marcar el texto en "Cursiva"?
12 ¿Cómo marcar el texto "Subrayado"?
13 ¿Cómo marcar texto "lista numerada"?
14 ¿Cómo marcar texto "lista con viñetas"?
15 ¿Cómo marcar texto "blockquote - cita"?
16 ¿Cómo publicar videos de Youtube en AMP?
17 ¿Cómo crear una tabla de texto en AMP?
18 ¿Cómo crear nuevos widgets y eliminar un código para que nos valide el código en AMP? 
Bueno si tienen alguna otra pregunta, pueden dejar un comentario en este post y de inmediato actualizare este tutorial con lo solicitado y así tengan una excelente experiencia de Blogger en Amp.

Empezamos

Siga las instrucciones del video tutorial y del contenido de este post

Video Tutorial

1 ¿Cómo publicar una entrada con texto validado en AMP?

Se debe ingresar un texto normal, ejemplo


2 ¿Cómo publicar la primera imagen de portada en AMP?

Ejemplo:


Suba una imagen, dando un clic en el botón "Insertar imagen"


Instrucciones:

2.1.- Un clic en modo HTML


2.2.- Inserte el siguiente código


<noscript><img src="#" width="600" height="350" alt=""/></noscript>


Ejemplo


2.3.- Elimine el símbolo numeral y agregue la URL de su imagen, ademas agregar un titulo en el texto alt="" le quedara de la siguiente manera


<noscript><img src="https://1.bp.blogspot.com/-X7bjoqo93h0/W4sxXKxqjDI/AAAAAAAAbs8/TuxsoZiAAvUFJT_Cv1gTcH5M0UjZCxMjwCLcBGAs/s640/publicar-una-entrada-de-blogger-en-amp.png" width="640" height="356" alt="¿Qué es Blogging y por qué es Popular?"/></noscript>


nota: recuerde cambiar los valores

width="640"  anchura
height="356"  altura

2.4.- Ejemplo de implementación:


3 ¿Cómo publicar una nueva imagen?

A partir de la segunda imagen que vaya a insertar en su entrada debe contener el siguiente código

<amp-img alt="" layout="responsive" src="#" height="320"  width="500"></amp-img>

Instrucciones:

3.1.- Elimine el símbolo numeral y remplacelo por una URL de su imagen, al igual agregar un titulo a la imagen en el texto alt=""

3.2.- Le quedara de la siguiente manera como ejemplo:


<amp-img alt="¿Qué es Blogging y por qué es Popular?" layout="responsive" src="https://3.bp.blogspot.com/-TzCM-4D-yy8/WHV9n5R_4tI/AAAAAAAAN1E/XhwZmjeuTdIy6_TnJvYDHm9uX70u8Bv3QCLcB/s500/24.jpg" height="334"  width="500"></amp-img>


nota: recuerde cambiar los valores

width="500"  anchura
height="334"  altura

4 ¿Cómo publicar una imagen pequeña?

Puede cambiar los valores de una imagen y dejarlo fijada

4.1.- Agregue el siguiente codigo


<center>
<amp-img alt="" src="#" height="200" width="100"></amp-img>
</center>


Instrucciones:

4.2.- Elimine el símbolo numeral y remplacelo por una URL de su imagen, al igual agregar un titulo a la imagen en el texto alt=""

4.3.- Le quedara de la siguiente manera como ejemplo:


<center>
<amp-img alt="¿Qué es Blogging y por qué es Popular?" src="https://3.bp.blogspot.com/-TzCM-4D-yy8/WHV9n5R_4tI/AAAAAAAAN1E/XhwZmjeuTdIy6_TnJvYDHm9uX70u8Bv3QCLcB/s200/24.jpg" height="200" width="134"></amp-img>
</center>


nota: recuerde cambiar los valores

width="200"  anchura
height="134"  altura

5 ¿Cómo añadir una URL "Vínculo" a una palabra o frase?

Para añadir una URL de sus entradas o de otra página web, lo pueden realizar tal como lo hacían desde el modo redactar, básicamente esto no cambia en nada, a continuación una imagen como ejemplo:


6 ¿Cómo añadir una URL a una imagen en AMP?

6.1.- Aumente el siguiente código


<a href="https://www.ayudadeblogger.com/2018/08/amp-alex-design-amp-html-blogger-template.html" target="_blank">
Agregar aquí el código
</a>


6.2.- Le quedara de la siguiente manera


<a href="https://www.ayudadeblogger.com/2018/08/amp-alex-design-amp-html-blogger-template.html" target="_blank">
<amp-img alt="¿Qué es Blogging y por qué es Popular?" layout="responsive" src="https://2.bp.blogspot.com/-mI23rrLnzHA/W3migfHAlFI/AAAAAAAAbZ8/kt0L8s98j0wwp5ckRfDQXLOz_e10ygo1gCLcBGAs/s1600/amp-alex-design-amp-html-blogger-template.jpg" height="304"  width="517"></amp-img>
</a>


Realizar lo siguiente:

- Cambie la URL de ejemplo por la dirección URL de su post o de otro sitio

- Cambie la dirección URL de la imagen

- Cambie el texto

6.3 Ejemplo de implementación


7 ¿Cómo centrar un texto o titulo en AMP?

Debe habilitar la entrada en modo HTML y agregar el siguiente código


<center>
Agregue aquí el texto que quiera centrar
</center>


8 ¿Cómo añadir H2 encabezado a un titulo? 

Mire el ejemplo de la siguiente imagen


9 ¿Cómo añadir H3 subtítulo a un texto? 

Mire el ejemplo de la siguiente imagen


10 ¿Cómo marcar el texto en "negrita"? 

Mire el ejemplo de la siguiente imagen


11 ¿Cómo marcar el texto en "Cursiva"? 

Mire el ejemplo de la siguiente imagen


12 ¿Cómo marcar el texto "Subrayado"? 

Mire el ejemplo de la siguiente imagen


13 ¿Cómo marcar texto "lista numerada"? 

Mire el ejemplo de la siguiente imagen


14 ¿Cómo marcar texto "lista con viñetas"? 

Mire el ejemplo de la siguiente imagen


15 ¿Cómo marcar texto "blockquote - cita"? 

Mire el ejemplo de la siguiente imagen


16 ¿Cómo publicar videos de Youtube en AMP? 

Tenemos dos códigos, el un código hace que el video sea automático y el otro código se queda estático hasta que presione para ver el video

16.1 Los siguientes códigos se los debe ingresar cuando la entrada este en modo HTML


16.2 Código automático video de Youtube en AMP


<amp-youtube width="300"
      height="200"
      layout=responsive
      data-videoid="oaWMCtWh0oc"
      autoplay>
</amp-youtube>


16.3 Código estatico video de Youtube en AMP


<amp-youtube
data-videoid="oaWMCtWh0oc"
height="200"
layout="responsive"
width="300">
 </amp-youtube>


16.4.- Cambie los valores de anchura y altura

width="300"
height="200"

Ejemplo de donde esta el ID de su video de Youtube


17 ¿Cómo crear una tabla de texto en AMP? 

Necesita crear una tabla en Amp, siga la siguiente estructura

17.1.- Cuando la entrada este en modo HTML


17.2.- Agregue el siguiente código de ejemplo


<br />
<h2>
HTML Table</h2>
<table>
  <tbody>
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
<tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
<tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
<tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
<tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
<tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
<tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</tbody></table>
<br />


17.3.- Resultado en la siguiente imagen:


18 ¿Cómo crear nuevos widgets y eliminar un código para que nos valide el código en AMP? 

Cuando creamos un nuevo widget, nos genera un código que no es valido para Amp, y por ello tendrá que eliminar dicho código ingresando desde el Editor HTML de la plantilla

Por ejemplo:

1.- Diríjase a Diseño


2.- Un clic en Añadir gadget


3.- Agregamos un widget HTML/Javascript


4.- Dentro del widget puede ingresar imágenes, videos, texto, enlaces, publicidad de AdSense, etc, luego lo guardamos y lo ubicamos donde mejor nos parezca.


5.- Luego de guardar el widget, nos generara un código en la plantilla el cual no es válido en Amp

Ejemplo:


6.- Para solucionar este inconveniente, tendrá que dirigirse a Tema luego a Editar HTML de su plantilla y buscar un código:

- Tema


- Editar html


Busque el siguiente código


<b:include name='quickedit'/>


Ejemplo:


Una vez ubicado el código, proceda a eliminarlo, luego de un clic en Guardar tema.

Eso es todo


¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude 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

11 comentarios:

  1. Gracias a tu blog he conseguido que mi página web http://www.cultivaunaidea.com no tenga ningún error y el icono de AMP validator salga en verde, ahora comencé con este post y a validar mi primera entrada, llegué hasta tener solo 3 errores pero ahora me encuentro atascado.
    Mis más sinceras felicitaciones porque has conseguido que una persona sin mayor conocimiento llegue a realizarlo, eres un crack.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Cultiva Una Idea, gracias por escribir, es el mayor gusto haberle ayudado, siga adelante con su gran labor.

      Saludos.

      Eliminar
  2. Que tal Luis, gracias por tu ayuda, yo tengo 10 errores de entrada que no se por donde atacar, tengo demasiados post como para revisarlos, pero los errores quizas vengan de la anterior plantilla, quizas tendria que comenzar de nuevo, gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. Hola Francisco, sobre su pregunta, debe ir cambiando entrada por entrada, pruebe primero en una entrada y realice los cambios pertinentes, ademas para salir de dudas hagame saber la direccón URL de una entrada en la cual haya realizado los cambios y así poder ver los errores de validación

      Saludos

      Eliminar
  3. y ahora una pregunta relacionada el tema del post,
    saves que en una entrada la primera imagen es la que se ve en la portada , pero si lo agrego a un cdn para aumentar el tiempo de cache ,
    este no se ve en la (portada del sitio web) como puedo arreglar eso? y con portada del sitio web me refiero a la pagina que sale
    cuando estas en el dominio principal como por ejemplo: https://www.ayudadeblogger.com/

    ResponderEliminar
  4. Hola Luis, inserté la plantilla Touch en mi blogger y e han salido algunos errores en amp, pero lo que más me preocupa es que los textos de las entradas no se ven y me dice que hace falta el campo author. ¿podrías ayudarme? mi web es www.lachicajugandoconletras.com

    ResponderEliminar
  5. ¿Y si no deseo poner una imagen en la publicación qué debo hacer?

    ResponderEliminar
  6. I need your help, how to embed twitter for valid AMP?

    ResponderEliminar
  7. Como estas, hay alguna manera de convertir el menu en barra, a menu con desplegable en amp?

    ResponderEliminar
    Respuestas
    1. Hola Balda, gracias por escribir, cual es el tema que solicita realizar el menu desplegable

      Eliminar