Widgets y Plugins para Blogger


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 pueden 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 />
<div class="adb-justificar">
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 />
<div>
</div>
</div>

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:

Publicar una entrada de Blogger correctamente en Amp


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

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


4 Añadir una URL a una imagen en Amp

Mire el siguiente ejemplo de código

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

Publicar una entrada de Blogger correctamente en Amp

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

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

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

Publicar una entrada de Blogger correctamente en Amp


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:

Publicar una entrada de Blogger correctamente en Amp

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:

Publicar una entrada de Blogger correctamente en Amp

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>Hola Blogger Amp</th>
    <th>Mi tabla en Blogger</th>
  </tr>
<tr>
    <td>Sitios y lugares</td>
    <td>Con la tecnología de Blogger</td>
  </tr>
<tr>
    <td>Plantilla de Blogger</td>
    <td>Template Blogger Amp</td>
  </tr>
<tr>
    <td>Esto es un texto simple 1</td>
    <td>Esto es un texto simple 2</td>
  </tr>
<tr>
    <td>Esto es un texto simple 3</td>
    <td>Esto es un texto simple 4</td>
  </tr>
<tr>
    <td>Esto es un texto simple 5</td>
    <td>Esto es un texto simple 6</td>
  </tr>
</tbody></table>
<br />

Resultado en la siguiente imagen:

Publicar una entrada de Blogger correctamente en Amp

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

Publicar una entrada de Blogger correctamente en Amp

Un clic en Añadir gadget

Publicar una entrada de Blogger correctamente en Amp

Creamos un widget HTML/Javascript

Publicar una entrada de Blogger correctamente en Amp

Nos genera el siguiente widget

Publicar una entrada de Blogger correctamente en Amp

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

Publicar una entrada de Blogger correctamente en Amp


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

Publicar una entrada de Blogger correctamente en Amp


Eso es todo

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir


Enviar por correo
  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

Discusión:

 

Inspiración

Tecnología

Contactos

+593 994589032