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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLePDIdjq1O3Ab82R41T3BESTYzfA7B3g8WQ7JQA0PSzbB2Fpy5-FqkGF_Wi7EyMAyuTqTefjmWmLuqngcp47rkuX9wlEliMQtZZcSDRWXY9e2xGY4FZlMlqy-g1yoVxYKBi4BCPhPn98/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGcakL3p-FQ0dgDp8qZWPqK-i2rEMm3Ygnkz7gwsVrd6f2W4TTCDQ2m0F357XVILzb5-WxV3WMzqHQUaQqvKpUhOnAvjiG54zL_-06txwt1RdERLPUdrjRr9WHJphR_nQrCnWsHGhLNc4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGcakL3p-FQ0dgDp8qZWPqK-i2rEMm3Ygnkz7gwsVrd6f2W4TTCDQ2m0F357XVILzb5-WxV3WMzqHQUaQqvKpUhOnAvjiG54zL_-06txwt1RdERLPUdrjRr9WHJphR_nQrCnWsHGhLNc4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi342vkm9NJ3SeJNcrq-mFkKTqmCGRzXjjJ4PBFrFSlAL5MUmIQgO6upgTIaUvc3AmYBiLEl7-ghzfusXZyw1x-10vqDSy52Tf_RV1U99OIKdh_UMzNPEFgSSd_A_eWVmeSwChdzYw6yPM/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

TAGS: Amp en Blogger

Share: