Plantilla para Blogger en Amp

Si estabas buscando una Plantilla de Blogger con la estructura completa en AMP, y sobre todo que no tenga un solo error al momento de validarlo en AMP. Ayudadeblogger.com te guiara paso a paso con un gran tutorial sobre la implementación de una plantilla de Blogger creado en AMP, completamente gratis.

La plantilla de Blogger en AMP que ejecutaran en este tutorial, se la puede visualizar correctamente tanto para computadoras de escritorio y teléfonos inteligentes, básicamente todo el diseño y la estructura es totalmente Responsive.

La Plantilla de Blogger en Amp tiene los poderosos estilos de Material design de Google y su código basado en Amp HTML.


¿Qué incluye la Plantilla de Blogger en Amp?

SEO
Diseño Responsive en Amp
Estructura completa en AMP HTML
Botones compartir en las redes socialesen Amp
Diseño Material design de Google en Amp
Contiene datos estructurados
Implementación de imágenes Gif en Amp
Videos de Youtube en Amp
Videos de Vimeo en Amp
Integración de Adsense en Amp
Caja de comentarios de Facebook en Amp
Buscador integrado en Amp
Entradas populares en Amp
Widget suscripción en Amp
Imagen Parallax en Amp
Página de contactos en Amp
Manú responsive desplegable con submenús en Amp
Color barra de navegación desde un dispositivo movil

Amp Blogger

¿Qué aspectos cambia?

Si están creando un blog nuevo, puede optar por esta plantilla de Blogger en Amp, y si tienen un blog con más de 100 entradas o menos y quiere implementar esta Plantilla de Blogger en Amp, tendrán que realizar todos los cambios correspondientes en cada entrada que hayan publicado, puede ser un trabajo dedicado, ya que tienen que seguir las reglas generales estipuladas por Amp HTML, que al final conseguirán todas las entradas de su blog con la estructura completa en Amp.

Si tienen habilitado algunos gadgets, tendrán que eliminarlos y cumplir con las normas de esta plantilla, no deben ingresar widgets o gadgets de terceros que tengan Javascript, en el video tutorial que se muestra en este post, notaran los cambios que deben realizar y así tengan una idea clara de lo que deben hacer.

¿Qué no se mostrara en la Plantilla de Blogger en Amp?

Se tendrá que eliminar la opción de los comentarios de Blogger, ya que los mismos crean un error de validación en Amp. Pero si no quieren eliminar dicha opción  lo pueden dejar, esto implicaría a que no tenga la estructura completa en Amp, será su decisión.

¿Cómo saber si mi plantilla 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 descargarse la plantilla completamente gratis

Demo Clic aquí Download Clic aquí

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 los cambios proporcionados en este tutorial, para más detalles específicos, puede visitar el siguiente enlace:

Políticas de uso

Empezamos

Siga las instrucciones del siguiente video tutorial

Video Tutorial

Suscríbase a nuestro canal de Youtube
1 Instalar la Plantilla

1.1 Ir a Blogger.com

1.2 Un clic en Plantilla


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

Continuamos con el tutorial
2 Realizar los cambios pertinentes en el HTML de la plantilla como:


Cambiar el titulo:

- Busca todos las palabras que contengan lo siguiente:

Accelerated Mobile Pages en Blogger

Elimina cada una de ellas y remplazalos por el título de tu blog de Blogger


Cambiar la imagen principal Parallax:


Busca este código:

/* Parallax */

Imagen de ejemplo:


- Notara que le muestra un código similar al siguiente

background: #f6f6f6 url(https://2.bp.blogspot.com/-EMXdTiSina0/WHV6Q5MiXxI/AAAAAAAAN0s/MAoodrXlyY8fVT6tyXa9Urqe0Bj5ePCCwCLcB/s1600/102.jpg)

Realice este cambio:

Elimine la dirección URL que esta marcada de color amarillo y remplacelo por una dirección URL de una imagen

Por ultimo, necesita cambiar las palabras que dicen:

Amp en Blogger
Template Free


Busque este código:

<div class='ayudadeblogger-parallax'>

Nos mostrara un codigo similar al siguiente:

<div class='ayudadeblogger-parallax'>
<h2>Amp en Blogger</h2>
<h2> Template Free </h2>

Cambie las palabras que están marcadas de color rojo y remplazarlo por cualquier tema

Editar el Menú desplegable con submenús

Busque el siguiente código:

<a href='#'>Negocios</a>

Nos mostrara un código similar al siguiente:


Realice estos cambios:

Cambie todas las palabras que se encuentran dentro del menú

Para insertar por ejemplo una dirección URL de una entrada, solo tiene que eliminar el símbolo numeral # y remplazarlo por la dirección URL de su entrada, recuerde realizar todo el procedimiento en todo.

A continuación un ejemplo:

<li class='submenu'>
<a href='http://www.ayudadeblogger.com/2017/01/plantilla-para-blogger-en-amp.html'>Negocios</a>
<input class='show-submenu' id='show-submenu-1' name='show-submenu-1' type='checkbox'/>
<ul>
<li><a href='http://www.ayudadeblogger.com/2017/01/widget-card-follow-de-twitter-material-design.html'>Tema</a></li>
<li><a href='http://www.ayudadeblogger.com/2017/01/amp-en-blogger-es-posible.html'>Tema</a></li>
                </ul>
</li>

Cambiar el Id de la caja de comentarios de Disqus


Busque el siguiente código

<!-- Seccion disqus -->

Le mostrara un código similar al siguiente



Cambie el ID que dice discus-amp-blogger por el ID de su cuenta de Disqus, por ejemplo



Cambiar el ID de la caja de comentarios de Facebook


Busque el siguiente código:

https://cdn.rawgit.com/Luis-Chavez/amp-g/dbe0e5ef/fb-comment-b.html

- Le mostrara un código similar al siguiente

<amp-iframe allowfullscreen='' frameborder='0' height='300' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups' src='https://cdn.rawgit.com/Luis-Chavez/amp-g/dbe0e5ef/fb-comment-b.html?page=ampenblogger' width='500'>
  </amp-iframe>

Realice este cambio:

Cambie la palabra que esta marcado de color amarillo el cual dice ampenblogger  por el titulo de su blog, recuerde que las palabras deben estar unidas y no seperadas


Guardar la plantilla


3 Dirigirse a Diseño y eliminar gadgets que no correspondan a la estructura de AMP

Como por ejemplo:

Eliminar el gadget Archivos del blog
Eliminar el gadget datos personales

4 Instalar AdSense en Amp

Como ejemplo, cuando se adquiere el código de AdSense, nos muestra de la siguiente manera

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!—Ads Adsense -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1262851945838153"
     data-ad-slot="3476018923"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Dicho código generado por AdSense ya no tendrán que ingresarlo tal como lo mostré en el ejemplo, ahora se deberá implementar de una manera diferente, el código que remplaza es el siguiente:

<amp-ad width="300" height="250"
      type="adsense"
      data-ad-client="ca-pub-1262851945838153"
      data-ad-slot="3476018923">
 </amp-ad>

Notaran que marque de color amarillo los Ids, estos números tendrán que cambiarlo por los números de su código de AdSense

Código para mostrar anuncios de Adsense adaptables en Amp

<amp-ad layout="fixed-height" height="100"
type="adsense"
data-ad-client="ca-pub-1062851945838143"
data-ad-slot="1641240544">
</amp-ad>

Código de Adsense para mostrar anuncios en Amp en diferentes tamaños como: 300x250, 728x90, 336x280, etc.

- Puede cambiar el tamaño del anuncio con el siguiente código de Adsense en Amp, cambiando los valores 300 y 250

<amp-ad width="300" height="250"
      type="adsense"
      data-ad-client="ca-pub-1262851945838153"
      data-ad-slot="3476018923">
 </amp-ad>

- Al igual que el anterior código, tendrá que cambiar los números que están marcados de color amarillo.

5 Desactivar el sistema de comentarios del blog "opcional"

Si quieren lo pueden desactivar y tener la estructura completa validada en Amp, pero si no lo quieren desactivar lo pueden hacer.

- Un clic en diseño


- Un clic en editar en el Gadget entradas del blog


- Notara que esta activado la casilla de comentarios, tendrá que desactivarlo


6 Editar o publicar una nueva entrada con la estructura de Amp y así nos valide correctamente

Para ello puede optar por copiar el siguiente código de ejemplo de cómo debe estar estructurado el código en una entrada


Código validado para las entradas

<noscript><img src="https://1.bp.blogspot.com/-TVG53JjGjKI/WHV_JKtSxtI/AAAAAAAAN1Y/K39fwk4ABzMbk6pbWzmRkHFetPX4gSR5QCLcB/s1600/material-design-css.gif" width="600" height="350" alt="¿Que es AMP? Páginas móviles aceleradas"/></noscript>
<br />
Un blog es un sitio web que se actualiza periódicamente y que ofrece la lectura de información de uno o varios autores sobre temas de interés. La unidad fundamental de información de un blog es el artículo, también llamado "post" o "entrada". Estos artículos se muestran siguiendo una ordenación cronológica inversa, es decir, se mostrará primero el artículo más reciente. En consecuencia podemos definir un blog como una recopilación de artículos ordenados cronológicamente.
<br />
<br />
Para el autor/autores de un blog, se trata de un sistema que facilita la publicación de contenidos multimedia en Internet ofreciendo en todo momento el control y libertad para editar y modificar la información publicada.
<br />
<br />
<center>
<amp-img alt="¿Que es AMP? Páginas móviles aceleradas" height="320" layout="responsive" src="https://1.bp.blogspot.com/-Sq4fRtTTK9E/WHV_SWauZOI/AAAAAAAAN1c/Go07vp-fynYApeSASKzL6lOOR_n7oBdOQCLcB/s1600/51.jpg" width="500"></amp-img>
</center>
<br />
En cada artículo los lectores pueden escribir sus comentarios y el autor darles respuesta. De esta forma se fomenta un diálogo que autores y lectores pueden compartir. Sin embargo esta opción depende de la moderación del autor o autores del blog y por supuesto de que los lectores decidan intervenir libremente con sus aportaciones.
<br />
<br />
La temática de un blog es muy variada. En la blogosfera hay blogs personales, periodísticos, empresariales, tecnológicos, educativos (edublogs), políticos, etc
<br />

¿Cómo ingresar una URL en una palabra o frase dentro de la entrada?

- Si necesitan ingresar una dirección URL o un enlace en alguna palabra o frase, pueden mirar el siguiente ejemplo


Código de ejemplo:

Un blog es un <a href="http://www.ayudadeblogger.com/2017/01/plantilla-para-blogger-en-amp.html" target="_blank">sitio web  </a> que se actualiza diariamente.

¿Cómo ingresar una URL enlace en una imagen?

Mire la siguiente estructura 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>

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

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

A continuación una imagen de ejemplo


¿Cómo implementar Youtube en una entrada?

El código para que un video de Youtube se muestre en Amp es el siguiente:

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

Puede cambiar el tamaño del video donde dice 240 que es su anchura y 150 que es su altura

Cambie el Id que esta marcado de color amarillo, por el Id del video de Youtube

¿Cómo implementar imágenes en una entrada?

La primera imagen de una entrada debe contener la siguiente estructura

<noscript><img src="https://3.bp.blogspot.com/-xWSbQRC-oC4/WT82_SUYECI/AAAAAAAAPug/n7y-R7pEVvgFnDmeNy3DdRZv3sWL3i6-wCLcB/s1600/plantillas-para-blogger.png" width="600" height="350" alt="¿Que es AMP? Páginas móviles aceleradas"/></noscript>
<br />

Realice este cambio:

Cambie la dirección URL que está marcada de color amarillo por la dirección URL de una de sus imágenes.

- La segunda imagen y así sucesivamente debe contener la siguiente estructura

<center>
<amp-img alt="¿Que es AMP? Páginas móviles aceleradas" height="320" layout="responsive" src="https://1.bp.blogspot.com/-Sq4fRtTTK9E/WHV_SWauZOI/AAAAAAAAN1c/Go07vp-fynYApeSASKzL6lOOR_n7oBdOQCLcB/s1600/51.jpg" width="500"></amp-img>
</center>

Realice este cambio:

Cambie la dirección URl que está marcada de color amarillo por la dirección URL de una de sus imágenes.

¿Cómo implementar imágenes gif en una entrada?

Siempre la primera imagen, debe contener el siguiente código

<noscript><img src="https://1.bp.blogspot.com/-TVG53JjGjKI/WHV_JKtSxtI/AAAAAAAAN1Y/K39fwk4ABzMbk6pbWzmRkHFetPX4gSR5QCLcB/s1600/material-design-css.gif" width="600" height="350" alt="¿Que es AMP? Páginas móviles aceleradas"/></noscript>
<br />

Realice este cambio:

Cambie la dirección URL que está marcada de color amarillo por la dirección URL de una de sus imágenes

- A partir de la segunda imagen gif, debe contener la siguiente estructura

<center>
<amp-img alt="¿Que es AMP? Páginas móviles aceleradas" height="320" layout="responsive" src="https://1.bp.blogspot.com/-Sq4fRtTTK9E/WHV_SWauZOI/AAAAAAAAN1c/Go07vp-fynYApeSASKzL6lOOR_n7oBdOQCLcB/s1600/51.jpg" width="500"></amp-img>
</center>

Realice este cambio:

Cambie la dirección URL que está marcada de color amarillo por la dirección URL de una de sus imágenes

¿Cómo centrar un titulo o texto?

Mire el siguiente ejemplo de código:

<br />
<center>
Aquí el titulo del texto
</center>
<br/>

¿Cómo aumentar el tamaño de un titulo o texto?

Mire el siguiente ejemplo de código:

<h2>Aquí todo el texto que necesite aumentar de tamaño</h2>

Puede cambiar los valores <h1>aquí el texto</h1>, como también <h3>aquí el texto</h3>, etc.

¿Aumentar de tamaño al titulo y mostrarlo centrado?

Mire el siguiente ejemplo de código:

<br />
<center>
<h2>Aquí el titulo del texto</h2>
</center>
<br/>

¿Cómo marcar de color negro al texto?

Mire el siguiente ejemplo de código:

<b>aquí todo el texto que se va a marcar de negrita</b>

7 Crear una página en Amp Blogger y mostrar los contactos


1.1 Un clic en Páginas


2.1 Un clic en Página Nueva


3.1 Le mostrara una página nueva, en la cual debe poner un titulo y luego en modo HTML, insertar el siguiente código

<div class='ayudadeblogger-parallax1'>
  <div class='ayudadeblogger-parallax'>
<h2>Gracias por visitar Ayudadeblogger.com</h2>
<h2> Plantilla Amp en Blogger </h2>
</div>
</div>
<center>
<h1>
The best Blogger Template Amp</h1>
<h1>
</h1>
</center>
<br />
<center>
<h2>
Para más detalles específicos sobre el diseño de la plantilla de Blogger en Amp, puede comunicarse a las siguientes direcciones</h2>
</center>
<br />
<center>
<h3>
<i class="material-icons">person_add</i> Luis Chávez</h3>
<i class="material-icons">dialpad</i>CEO Director
</center>
<br />
<center>
<h3>
<i class="material-icons">call</i> Línea directa: +593 994589032</h3>
</center>
<br />
<center>
<h3>
<i class="material-icons">email</i> Email: ayudadeblogger@gmail.com</h3>
</center>
<br />
<br />
<center>
Copyright @ 2017 Amp HTML en Blogger - All Rights Reserved - Design by: Ayudadeblogger.com
</center>
<br />

Ejemplo:

Realice los siguientes cambios:

Cambie todas las palabras que están marcadas de color rojo

8 Habilitar la plantilla móvil, tal como lo muestro en el video tutorial


9 Verificar que todo esté bien y que la plantilla nos valide completamente en Amp, utilizando el botón Validator.


Eso es todo, ahora disfrute de su blog de Blogger en Amp.

Gracias a Google por su gran trabajo en ayudar a los webmaster a crear sitios web de calidad, sobre todo también al grupo de trabajo de Material design por sus grandes estilos.

Recuerden seguir las instrucciones del video tutorial.

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 duden 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: Plantillas en AMP

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.