Plantilla de Blogger en Amp HTML


En esta nueva presentación de Plantillas de Blogger en Amp HTML, aprenderán a instalar una nueva plantilla de Blogger con la estructura completa en Amp HTML.

La plantilla de Blogger en Amp HTML dispone de excelentes widgets tanto de Google+, Twitter y Facebook.

A esta nueva plantilla de Blogger se la ha llamado Blog Amp Template - Los componentes de este blog gratuito están basados en Bootstrap he inspirados en los poderosos estilos de Material design Google. Toda la estructura de este blog está diseñado en Blogger.com y transformado en Accelerated Mobile Pages AMP.

¿La Plantilla blog Amp Template es Responsive?

Esta nueva plantilla de Blogger en Amp HTML es totalmente responsive, la cual se la puede visualizar fácilmente desde un dispositivo móvil y computadoras de escritorio.

¿Descripción de la Plantilla de Blogger en Amp HTML?

Diseño Responsive en Amp
Estructura completa en AMP HTML
Botones compartir en las redes sociales en Amp HTML
Diseño Material design de Google en Amp HTML
Contiene datos estructurados
SEO
Implementación de imágenes Gif en Amp HTML
Implementación de imágenes en Amp HTML
Videos de Youtube en Amp
Videos de Vimeo en Amp
Integración de Adsense en Amp
Caja de comentarios de Google+ en Amp HTML
Caja de comentarios Disqus en Amp HTML
Caja de comentarios de Facebook en Amp HTML
Buscador integrado en Amp
Entradas populares estilo único en Amp HTML
Widget entrada destacada
Widget suscripción en Amp
Imagen Parallax en Amp
Página de contactos en Amp
Manú desplegable con submenús en Amp HTML
Manú responsive en Amp HTML
Color barra de navegación desde un dispositivo móvil
Boton +1 de Google+ en Amp HTML
Widget caja de seguidores de Facebook en Amp HTML
Widget caja de seguidores de Google+ en Amp HTML
Widget caja Tweets de Twitter en Amp HTML
Widget slideshow en Amp HTML
Widget autor estilo Material design
Artículos relacionados en Amp HTML





¿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 descargar la plantilla completamente gratis

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:

Empezamos

Siga las instrucciones del siguiente video tutorial

Video Tutorial


Instalar la Plantilla

1 Ir a Blogger.com

2 Un clic en Tema


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 Landing page en su blog

Continuamos con el tutorial

1 Realizar los cambios pertinentes en el SEO y datos estructurados de la plantilla, por favor mire el Video tutorial

Busque todas las palabras que contengan

Amp HTML en Blogger

Cambie por el título de su plantilla


2 Cambiar la imagen principal del parallax


Busque el siguiente código

/* Seccion 1 */

Cambie la dirección URL de imagen

https://4.bp.blogspot.com/-5MOzwEJY3tM/WJLik64T38I/AAAAAAAAOOw/Wg4y8tSUR4k7nF6BOjur4sOPtt8lbBLkwCLcB/s1600/imagen-principal.jpg

Por una nueva dirección URL de imagen

3 Menú responsive


Busque el siguiente código

<!-- Seccion 2 -->

Realice los cambios pertinentes tal como lo muestro en el video tutorial

4 Menú desplegable con submenus 


Busque el siguiente código

<!-- Seccion 3 -->

Realice los cambios pertinentes tal como lo muestro en el video tutorial

5 Editar la descripción principal y el video


Busque el siguiente código

<!-- Seccion 4 -->

Realice los cambios pertinentes tal como lo muestro en el video tutorial

6 Editar los 3 primeros widgets de presentación


Busque el siguiente código

<!-- Seccion 5 -->

Realice los cambios pertinentes tal como lo muestro en el video tutorial

7 Editar los dos widgets siguientes


Busque el siguiente código

<!-- Seccion 6 -->

Realice los cambios pertinentes tal como lo muestro en el video tutorial

8 Cambiar el Id de la caja de comentarios de Disqus


Busque el siguiente código

<!-- Seccion 7 -->

Remplace el ID blogamptemplate por el Id de su cuenta de Disqus

Realice los cambios pertinentes tal como lo muestro en el video tutorial

9 Cambiar el nombre de la caja de seguidores de Facebook


Busque el siguiente código

<!-- Seccion 8 -->

Cambie el nombre que dice ayudadeblogger por el nombre de su página de Facebook

Realice los cambios pertinentes tal como lo muestro en el video tutorial

10 Ingresar la dirección URL de su blog de Blogger en el widget Random post


Busque el siguiente código

<!-- Seccion 9 -->

Cambie la dirección URL que se encuentra en la plantilla de ejemplo por la dirección URL de su blog de Blogger aumentando la letra S en https

Realice los cambios pertinentes tal como lo muestro en el video tutorial

11 Realizar los cambios en el Id de la caja de comentarios de Google+


Busque el siguiente código

<!-- Seccion 10 -->

Cambie la palabra que dice blogamptemplate por el nombre de su blog sin generar espacios

Realice los cambios pertinentes tal como lo muestro en el video tutorial

12 Cambiar el Id de la caja de comentarios de Facebook


Busque el siguiente código

<!-- Seccion 11 -->

Cambie el Id que dice blogamptemplate por el nombre de su blog, sin generar espacios

Realice los cambios pertinentes tal como lo muestro en el video tutorial

13 Cambiar el link Embed de Google Maps


Busque el siguiente código

<!-- Seccion 12 -->

Diríjase al siguiente enlace:

https://developers.google.com/maps/documentation/embed/?hl=es-419


Registra tu aplicación para Google Maps Embed API en la Consola de la API de Google

- Si no quieren mostrar el mapa, puede eliminar el mapa que actualmente se esta ejecutando en la plantilla de demostración,

Elimine el siguiente código:


<amp-iframe frameborder='0' height='200' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups' src='https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&amp;key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848' width='600'>
              </amp-iframe>


14 Cambiar las descripciones y URLs del Footer


Busque el siguiente código

<!-- Seccion 13 -->

Realice los cambios pertinentes tal como lo muestro en el video tutorial

15 Diríjase al siguiente enlace en el cual aprenderá como publicar o corregir una entrada y mostrarla correctamente en Amp HTML

Publicar una entrada de Blogger correctamente en Amp HTML

Diríjase a Diseño, encontrara algunos widgets y gadgets de Blogger a los cuales debe realizar sus diferentes cambios

1 Widget Ads de AdSense



Abrir el gadget he ingrese el siguiente código en su interior


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


Realice los cambios pertinentes tal como lo muestro en el video tutorial

2 Widget botón Google+



Abrir el gadget he ingrese el siguiente código en su interior



<amp-iframe width='290'
      height='50'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='no'
      src='https://cdn.rawgit.com/Luis-Chavez/boton-mas-1-google-en-amp/271645c3/.html?user=http://www.ayudadeblogger.com/'>
  </amp-iframe>



Realice los cambios pertinentes tal como lo muestro en el video tutorial

3 Widget perfil de Google+



Abrir el gadget he ingrese el siguiente código en su interior



<amp-iframe width='290'
      height='380'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='no'
      src='https://cdn.rawgit.com/Luis-Chavez/google-mas-badge/02cae2a3/.html?user=+LuisChávez'>
  </amp-iframe>



Realice los cambios pertinentes tal como lo muestro en el video tutorial

4 Widget perfil página de Google+



Abrir el gadget he ingrese el siguiente código en su interior



<amp-iframe width='290'
      height='390'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='no'
      src='https://cdn.rawgit.com/Luis-Chavez/amp/2031e29c/googlemasbadgepage-amp.html?user=+Ayudadeblogger'>
  </amp-iframe>



Realice los cambios pertinentes tal como lo muestro en el video tutorial

5 Widget Video



Abrir el gadget he ingrese el siguiente código en su interior



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




Realice los cambios pertinentes tal como lo muestro en el video tutorial

6 Widget Tweets de Twitter



Abrir el gadget he ingrese el siguiente código en su interior



<amp-iframe width='290'
      height='300'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='yes'
      src='https://cdn.rawgit.com/Luis-Chavez/Embed-Tweet/adad4db8/.html?user=ayudadeblogger'>
  </amp-iframe>



Realice los cambios pertinentes tal como lo muestro en el video tutorial

7 Widget Slideshow en Amp



Abrir el gadget he ingrese el siguiente código en su interior


<amp-carousel id="hero-images"
      width="250"
      height="180"
      layout="responsive"
      type="slides"
      autoplay>
 
   <a href="http://www.ayudadeblogger.com/">
      <amp-img src="https://3.bp.blogspot.com/-iKi34pdjaBo/WIVJj-leqOI/AAAAAAAAOBE/VyB4RsdK2VYYeT0137kSqyKNGL3hiprwgCLcB/s400/105.jpg"
          layout="fill"
          alt="product hero 1"
          attribution="visualhunt"></amp-img>
      <div class="caption">Slideshow Amp</div>
    </a>

    <a href="http://www.ayudadeblogger.com/">
      <amp-img src="https://2.bp.blogspot.com/-yX426UQoG0U/WIVJpZuQllI/AAAAAAAAOBI/qFF-fkZaTBArhynDxiCQDFIW3jhRaCVEACLcB/s400/86.jpg"
          layout="fill"
          alt="product hero 2"
          attribution="visualhunt"></amp-img>
      <div class="caption">Slideshow Amp</div>
    </a>

    <a href="http://www.ayudadeblogger.com/">
      <amp-img src="https://4.bp.blogspot.com/-8gecreM3PNQ/WIVJtydNUeI/AAAAAAAAOBM/2x0Z9xzEt_wEONqRq0J2ycChKJ1gIydSACLcB/s400/80.jpg"
          layout="fill"
          alt="product hero 3"
          attribution="visualhunt"></amp-img>
      <div class="caption">Slideshow Amp</div>
    </a>
  </amp-carousel>


Realice los cambios pertinentes tal como lo muestro en el video tutorial

8 Abrir el gadget Suscríbete




Realice los cambios pertinentes tal como lo muestro en el video tutorial

9 Eliminar widgets que no estén validados en Amp, como por ejemplo el gadget Archivo

Realice los cambios pertinentes tal como lo muestro en el video tutorial

Crear una página estática de contactos


1 Un clic en Páginas


2 Un clic en Página Nueva


3 Le mostrara una página nueva, en la cual debe poner un título y luego en modo HTML, he insertar el siguiente código


<div class='ayudadeblogger-parallax1'> 
<div class='ayudadeblogger-parallax'><h2>Blogger Template Amp HTML</h2>
<h2> Bienvenidos </h2></div>
</div>

<center>
<h1>Blogger template</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><amp-img alt='Luis Chávez' class='amp-sidebar-image circle ' height='50' src='https://1.bp.blogspot.com/-X_MQHvWUWcw/WERt1nSVEzI/AAAAAAAANbA/WSP9YaTVyjEvuoaa-cVIeu0bPt24BCDvQCLcB/s1600/luis-chavez.png' width='50'>
</amp-img> 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

Cambie la dirección URL de la imagen que esta marcado de color amarillo

Un clic en Publicar

4 Ahora diríjase a Plantilla, un clic en Editar HTML


Busque el siguiente código

/* Seccion 14 */

Elimine la dirección URL http://blogamptemplate.blogspot.com/p/contactos.html y remplácela por la dirección URL de su nueva página de contactos

Un clic en Guardar Tema


Para más detalles por favor mire el video tutorial

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


Eso es todo, hemos terminado

Colaboración:

Gracias a Oloman y su espectacular blog Oloblogger.com por su contribución en la caja de comentarios de Google+

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: