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.

Plantilla para Blogger en Amp

¿Qué incluye Plantilla de Blogger en Amp?

SEO
Diseño Responsive en Amp
Estructura completa en AMP HTML
Botones compartir en las redes sociales en 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


Plantilla para Blogger en Amp

¿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

Plantilla para Blogger en Amp

A continuación pueden ver su demostración en el siguiente blog


¿Cómo descargar la plantilla?

Tendrá que dejar un comentario pidiendo que se le envíe la plantilla, para ello, deje un mensaje incluyendo su dirección de correo electrónico, en un término de 12 horas se le enviara el archivo XML de la Plantilla de Blogger en Amp.

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:


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:

Empezamos

Siga las instrucciones del siguiente video tutorial

Video Tutorial



1 Instalar la Plantilla

1.1 Ir a Blogger.com

1.2 Un clic en Plantilla

Plantilla para Blogger en Amp

1.3 Un clic en “Crear/Restablecer copia de seguridad”

Plantilla para Blogger en Amp
Plantilla para Blogger en Amp

4 Un clic en “Examinar”

5 Un clic en el archivo XML que se le envío

Plantilla para Blogger en Amp

6 Un clic en “Subir”

Plantilla para Blogger en Amp

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:

Plantilla para Blogger en Amp

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

Plantilla para Blogger en Amp

Cambiar la imagen principal Parallax:

Plantilla para Blogger en Amp

Busca este código:

/* Parallax */

Imagen de ejemplo:

Plantilla para Blogger en Amp


- 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

Plantilla para Blogger en Amp

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:

Plantilla para Blogger en Amp

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 Facebook

Plantilla para Blogger en Amp

Busque el siguiente código:

https://cdn.rawgit.com/Luis-Chavez/Comentarios-Facebook-Amp/master/.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/Comentarios-Facebook-Amp/master/.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

Plantilla para Blogger en Amp

Guardar la plantilla

Plantilla para Blogger en Amp

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

Plantilla para Blogger en Amp

- Un clic en editar en el Gadget entradas del blog

Plantilla para Blogger en Amp

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

Plantilla para Blogger en Amp

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

Plantilla para Blogger en Amp

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


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

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

¿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://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.

- 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

Plantilla para Blogger en Amp

1.1 Un clic en Páginas

Plantilla para Blogger en Amp

2.1 Un clic en Página Nueva

Plantilla para Blogger en Amp

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:

Plantilla para Blogger en Amp

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

Plantilla para Blogger en Amp

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

Plantilla para Blogger en Amp

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.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Enviar por correo

16 comentarios:

  1. Hola,felicitarlos por la plantilla me gusta... este es mi correo rogercse57@gmail.com gracias por el aporte.

    ResponderEliminar
    Respuestas
    1. Hola Roger, gracias por escribir, sobre su solicitud, se le envió el archivo Xml de la plantilla, por favor revise su dirección de correo electrónico.

      Saludos.

      Eliminar
  2. Ufff mi hermano gracias te pasastes con esto gracias mijo saludos

    ResponderEliminar
    Respuestas
    1. Hola Dj Genio, es un gusto que la plantilla de Blogger en Amp funcione correctamente en tu blog de Blogger, sigue adelante.

      Saludos.

      Eliminar
  3. muy bien amigo gracias por este pots muy buen tutorial
    los invito a todos a probarlo este es mi blog https://djgenio.blogspot.com/
    que construi con ayuda de Luis

    ResponderEliminar
  4. Tienes un gran blog con muchas cosas interesantes. La plantilla está muy bien y me gusta. Mi dirección de correo es rugoleor@gmail.com y me gustaría tenerla.

    ResponderEliminar
    Respuestas
    1. Hola Angel, gracias por escribir, sobre su solicitud, se le envió el archivo XML de la Plantilla de Blogger en Amp a su dirección de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  5. me gustaria recibir la p´lantilla mi correo es lopman2000@gmail.com

    ResponderEliminar
  6. La plantilla está muy bien y me gusta. Mi dirección de correo es lopman2000@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Manuel, gracias por escribir, sobre su solicitud, se le envió el archivo XML de la plantilla a su dirección de correo, por favor revíselo.

      Saludos.

      Eliminar
  7. Estimado Amigo Luis Chavez, por favor agradecería el envió de la plantilla a este correo: saintscasillas@gmail.com

    ResponderEliminar
  8. Por Favor Luis, este mi correo: saintscasillas@gmail.com
    de antemano muchas gracias...

    ResponderEliminar
    Respuestas
    1. Hola Saints, gracias por escribir, sobre su requerimiento se le envió la plantilla a su dirección de correo electrónico, por favor revíselo

      Saludos.

      Eliminar
  9. Saludos Caballero, estamos en el proceso de conceptualización y diseño de una web site para nuestra Organización Sin Fines de Lucro, en blogger, y acorde nuestra filosofía institucional, esta debe ser de calidad pero con simplicidad, empleando un concepto más contemporáneo, algo minimalista y sencillo de operar. En la búsqueda de ayuda en la Internet llegamos a vuestra genial web site, y nos gustaría poder obtener vuestra plantilla, para ir probando con nuestro diseño. Por favor, comparta vuestra plantilla al email: contacto@ecokawsay.org
    Mil Gracias.
    Manuel Poma, Eco Kawsay, Perú.

    ResponderEliminar
    Respuestas
    1. Hola Eco Kawsay, gracias por escribir, sobre su requerimiento, se le envió la plantilla a su dirección de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar

Discusión

Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Amp en Blogger (2) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (7) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (73) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Copyright © - Ayudadeblogger.com