Publicar una entrada de Blogger correctamente en Amp


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 la Plantilla de Blogger en Amp.

¿Cuáles son los temas que aprenderé?

En este tutorial de Blogger en Amp aprenderán lo siguiente:

1 Publicar una entrada con texto validado en Amp
2 Añadir una URL a una palabra o frase
3 Publicar una imagen de Blogger en Amp
4 Añadir una URL a una imagen en Amp
5 Cambiar de tamaño una imagen en Amp
6 Publicar videos de Youtube en Amp
7 Centrar un texto o titulo
8 Ubicar el texto a la izquierda
9 Ubicar el texto a la derecha
10 Marcar con negrita el texto
11 Color de fondo del texto
12 Color de texto
13 Crear una tabla de texto en Amp
14 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 Publicar una entrada con texto validado en Amp

A continuación puede insertar el siguiente ejemplo en su entrada en modo HTML


<noscript><img src="https://1.bp.blogspot.com/-KYQWJOl7-lc/WIKfxbFZArI/AAAAAAAAN9w/e-xASgoYgMEZZe2-MQ2t31xfSn_CMMergCLcB/s1600/material-productos.gif" width="600" height="350" alt="¿Que es AMP? Páginas móviles aceleradas"/></noscript>
<br />
Es mucho lo que se puede hablar acerca de los blogs, y doy por hecho que es un tema que despierta bastante interés, pero debemos centrarnos en lo fundamental y profundizar poco a poco con el paso del tiempo. En esta ocasión, se va a dar respuesta a qué es un blog, cuántos tipos existen y por qué se debe crear uno.<br />
<br />
<center>
<amp-img alt="¿Que es AMP? Páginas móviles aceleradas" height="320" layout="responsive" src="https://3.bp.blogspot.com/-TzCM-4D-yy8/WHV9n5R_4tI/AAAAAAAAN1E/XhwZmjeuTdIy6_TnJvYDHm9uX70u8Bv3QCLcB/s1600/24.jpg" width="500"></amp-img>
</center>
<br />
Un blog, también llamado bitácoras o weblog, es un sitio web donde uno o varios autores (bloggers) publican regularmente artículos (llámense entradas o posts) de temas muy variopintos que son ordenados cronológicamente, de más actual a menos. Debajo de cada entrada se ofrece un espacio donde los lectores pueden dejar sus comentarios y varios botones para compartir el contenido en lo social media.
<br />
<br />


2 Añadir una URL 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:



3 Publicar una imagen de Blogger en Amp

Siempre la primera imagen a mostrar debe contener el código siguiente


<noscript><img src="https://1.bp.blogspot.com/-KYQWJOl7-lc/WIKfxbFZArI/AAAAAAAAN9w/e-xASgoYgMEZZe2-MQ2t31xfSn_CMMergCLcB/s1600/material-productos.gif" width="600" height="350" alt="¿Que es AMP? Páginas móviles aceleradas"/></noscript>


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


<amp-img alt="¿Que es AMP? Páginas móviles aceleradas" height="320" layout="responsive" src="https://3.bp.blogspot.com/-TzCM-4D-yy8/WHV9n5R_4tI/AAAAAAAAN1E/XhwZmjeuTdIy6_TnJvYDHm9uX70u8Bv3QCLcB/s1600/24.jpg" width="500"></amp-img>


4 Añadir un enlace a una imagen

Mire el siguiente ejemplo de código


<a href="http://www.ayudadeblogger.com/2017/01/plantilla-para-blogger-en-amp.html" target="_blank">

<amp-img alt="¿Que es AMP? Páginas móviles aceleradas" height="320" layout="responsive" src="https://2.bp.blogspot.com/-DFXn20DD7WE/WHgoVoDqjmI/AAAAAAAAN3s/tyHfFrviWI0WDm7QhTXnAS-8pwbN_vZoACLcB/s1600/Ayudadeblogger-web-design.gif" width="500"></amp-img></a>



Realizar lo siguiente:

Justo afuera del código de la imagen, ingresamos el código que está marcado de color amarillo

Cambia la URL que está marcada de color azul por la dirección URL de su post o de otro sitio

Cambia la dirección URL de la imagen que esta marcado de color verde

Cambie el texto que esta arcado de color rojo

5 Cambiar de tamaño a una imagen en Amp

Si quieren cambiar de tamaño a la segunda imagen y así sucesivamente, pueden insertar el siguiente código


<center>
<amp-img src="https://1.bp.blogspot.com/-IzrDFPI2-uo/WHV7561xoEI/AAAAAAAAN04/9YDtiTjU08UVGXwSscK6bGoM5aqQCkCugCLcB/s1600/23.jpg" width="300" height="75"></amp-img>
</center>


Realizar cambios en el tamaño de la imagen:

width="300"   Es su anchura

height="75"    Es su altura

Cambia los valores por el que usted este necesitando mostrar

Cambie la URL que esta marcado de color amarillo por una URL de su imagen

6 Publicar videos de Youtube en Amp

Copie la siguiente estructura de código valido


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


Realice el siguiente cambio:

El Id del video de Youtube se encuentra marcado de color amarillo, lo que deberá hacer es eliminar dicho Id he ingresar el Id de su video

Cambie los valores de Anchura y altura

width="240"
height="150"

Ejemplo de donde esta el ID de su video de Youtube



7 Centrar un texto o titulo

Puede centrar cualquier texto ingresando el siguiente código y crear un espacio entre los otros textos, solo tenemos que ingresar el código <br/> que sirve para dar espacios


<br />
<center>
Hola Blogger centrado
</center>
<br />


- Si quiere mostrar el texto centrado y de un tamaño diferente, siga la siguiente estructura


<br />
<center>
<h2>Hola Blogger centrado </h2>
</center>
<br />


- Para poner un título grande y de color, siga la siguiente estructura


<br />
<h1>Hola Blogger </h1>
<br />


8 Ubicar el texto a la izquierda

Necesita ubicar el texto a la izquierda, puede seguir la siguiente estructura


<br />
<div class="adb-text-left">
Hola Blogger izquierda </div>
<br />


9 Ubicar el texto a la derecha

Si necesita ubicar el texto a la derecha, puede seguir la siguiente estructura


<br />
<div class="adb-text-right">
Hola Blogger derecha </div>
<br />


10 Marcar con negrita el texto

Necesita marcar el texto con negrita, siga la siguiente estructura


<br />
<b>mi texto en negrita</b>
<br />


11 Color de fondo del texto

Marcar el texto de fondo de otro color, puede optar por varios colores de la siguiente lista


<br />
<div class="text-fondo-blue d">
Esto es un texto simple Color de fondo de texto azul</div>
<br />


<br />
<div class="text-fondo-green d">
Esto es un texto simple Color de fondo de texto verde</div>
<br />


<br />
<div class="text-fondo-yellow">
Esto es un texto simple Color de fondo de texto amarillo </div>
<br />


<br />
<div class="text-fondo-lightblue">
Esto es un texto simple Color de fondo de texto lightblue </div>
<br />


<br />
<div class="text-fondo-red d">
Esto es un texto simple Color de fondo de texto rojo</div>
<br />


<br />
<div class="text-fondo-teal d">
Esto es un texto simple Color de fondo de texto teal</d></div>
<br />


<br />
<div class="text-fondo-gris">
Esto es un texto simple Color de fondo de texto gris</div>
<br />



Resultado en la siguiente imagen:


12 Color de texto

Cambiar el color de texto, siga la siguiente estructura


<br />
<div class="text-color-blue">
Esto es un texto simple Color de texto azul</div>
<br />


<br />
<div class="text-color-green">
Esto es un texto simple Color de texto verde</div>
<br />


<br />
<div class="text-color-yellow">
Esto es un texto simple Color de texto amarillo</div>
<br />


<br />
<div class="text-color-lightblue">
Esto es un texto simple Color de texto lightblue</div>
<br />


<br />
<div class="text-color-red">
Esto es un texto simple Color de texto rojo</div>
<br />


<br />
<div class="text-color-teal">
Esto es un texto simple Color de texto teal</div>
<br />


Resultado en la siguiente imagen:


13 Crear una tabla de texto en Amp

Necesita crear una tabla en Amp, siga la siguiente estructura


<br />
<h2>
Un ejemplo de tabla en Amp:</h2>
<table>
<tbody>
<tr><th>Editar el encabezado de la tabla aquí</th><th>Ubicación</th></tr>
<tr><td>Descripción básica escrita</td><td>Blogger Amp</td></tr>
<tr><td>Otros materiales de la División</td><td>Blogger Amp</td></tr>
<tr><td>Etiquetas cerradas colocadas debajo</td><td>Blogger Amp</td></tr>
</tbody>
</table>


Resultado en la siguiente imagen:


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

Nos dirigimos a Diseño

Un clic en Añadir gadget


Creamos un widget HTML/Javascript


Nos genera el siguiente widget


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

Luego de guardar el widget, nos generara un código en la plantilla el cual no es válido en Amp, para solucionar este inconveniente, tendrá que dirigirse al Editor HTML de su plantilla y buscar el siguiente código:

<b:include name='quickedit'/>



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



Eso es todo

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: