Plantilla de Blogger en Amp - Landing page AMP Daily


Landing page AMP Daily tiene toda la documentación requerida para ser parte del formato Amp HTML. Landing page AMP Daily fue creada pensando en la facilidad de su implementación al usuario que lo quiera utilizar en su nuevo proyecto de blog o que necesite refrescar su blog con la nueva tecnología como lo es Amp HTML.

Amp HTML llego para quedarse, ahora miles de webmaster están transformando sus sitios web y blogs al formato AMP.

Implementación

No se requiere de conocimientos vástagos de código, simplemente siga las instrucciones del tutorial

Características más importantes

Amp HTML 100%
Landing page
Material design
Responsive design
Box search
Gadget Suscribe
Disqus Comments
Random post
Slideshow
Popular post
Menú responsive
Widget label
Post card
AdSense
SEO

Empezamos

A continuación mire su demostración en el blog de demos, como también puede descargar la plantilla con el formato Amp HTML 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 la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:


Video Tutorial

Instalar la plantilla Amp Daily

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


Configurar el Gadget Menú 1


Elimine las palabras que se encuentran en el ejemplo, cambie cada una de ellas e ingrese la dirección URL de una de sus entradas, “Recuerde realizar este paso en todo”


Configurar el Gadget Social


Abra cada enlace y remplace la dirección URL por una URL de su perfil social, “Recuerde realizar este paso en todo”


Configurar el Gadget imagen principal


Un clic en editar


Al abrir el gadget le mostrara un código similar al siguiente


<figure class="amp-ayudadeblogger-image-fullpage m0 relative">
<amp-img class="opacity-image" width="404" height="720" alt="AMP HTML" layout="responsive" src="https://1.bp.blogspot.com/-Epp0aKXF0BU/WhSEWz9j5WI/AAAAAAAAU-w/ABs39RMWl0c8_Xh2T8rHydbSF7WjmzhyQCLcBGAs/s1600/portada.jpg" media="(max-width: 415px)"></amp-img>
<amp-img class="opacity-image"  height="720" alt="AMP HTML" layout="fixed-height" src="https://1.bp.blogspot.com/-Epp0aKXF0BU/WhSEWz9j5WI/AAAAAAAAU-w/ABs39RMWl0c8_Xh2T8rHydbSF7WjmzhyQCLcBGAs/s1600/portada.jpg" media="(min-width: 416px)"></amp-img>
<figcaption class="absolute top-0 right-0 bottom-0 left-0">
<div class="container">
<div class='col col-6 center-col '>
<center>
<h1 class="txt-title-1">Administre todas sus tareas diarias a través de AMP Blogger</h1>
</center>
</div>


Realizar los siguientes cambios

Cambie las dos direcciones URLs de imágenes que se encuentra en el gadget, por la URL de una imagen nueva

Cambie todas las palabras

Un clic en Guardar

Configurar los Gadgets Big


Abrir el Gadget que dice Gadget big, es el que muestra la imagen


Al abrir el gadget le mostrara un código similar al siguiente


<div class="outside-image-sub">
<amp-img alt='' height='674'
 layout="responsive" src='https://2.bp.blogspot.com/-FxfxknhgeOk/WfqUWXNr3KI/AAAAAAAAUQs/OchJo8jMOOgwBaGTKTxbPehWV1MeDoTaQCLcBGAs/s1600/amp-smart-watch.png' width='599'>
</amp-img>
</div>


Realizar el siguiente cambio

Elimine la URL imagen que está marcado de color amarillo, remplácelo por una nueva dirección URL de una imagen

Un clic en Guardar

Abrir los Gadgets:

Gadget-title-1
Gadget-title-2
Gadget-title-3
Gadget-title-4



Un clic en editar en cada uno de ellos y simplemente cambie las palabras

Configurar el Gadget Nuestros Expertos


Abrir el Gadget titulo-caja-expertos


Cambie las palabras

Abrir los Gadgets:

Experto-1
Experto-2
Experto-3


Le mostrar un código similar al siguiente


<div class="amp-img-circle">
<amp-img alt="" height="120" src="https://2.bp.blogspot.com/-1zXkkBvb5cQ/WhSEV8XdjVI/AAAAAAAAU-o/txYyI9fhlhIsEcVnGwiD7xl-E0um_KmRgCLcBGAs/s1600/experto-1.jpg" width="120"></amp-img>
</div>
<p class="txt-descripcion-1 text-align-center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut</p>
<center>
<h1 class="txt-titulo-1"><a href='#' target='_blank' title='Blogger'>Bernard Smith</a></h1>
</center>


Realice los siguientes cambios

Cambie la dirección URL imagen, que está marcado de color amarillo, remplácelo por una nueva dirección URL de una de sus imágenes

Cambie todas las palabras

Nota: realizar los cambios en los tres gadgets

Configurar el Gadget contactos


Existen tres gadgets llamados

Gadget-top-bar-left
Gadget-top-bar-center
Gadget-top-bar-rigth


Abra cada uno de ellos y realice sus respectivos cambios

Hemos terminado la configuración de la página principal de la Landing page Daily

Ahora para configurar la cabecera principal y demás gadgets que se mostraran en las entradas, siga las siguientes instrucciones

Configurar la cabecera principal


Abra el Gadget “Cabecera”, elimine la imagen de ejemplo, luego cargue una nueva imagen desde su computador, además, donde dice “Título del blog” ingrese el título de su blog, como también donde dice “Descripción del blog” ingrese una pequeña descripción de su blog de Blogger


Configurar el Gadget anuncio de Google AdSense


Abra el gadget, cambie los Ids con los de su anuncio de Google AdSense

Ejemplo:


data-ad-client="ca-pub-0022851945832222"
data-ad-slot="2641842222"



Configurar el Gadget Menú 2


Elimine las palabras que se encuentran en el ejemplo, cambie cada una de ellas e ingrese la dirección URL de una de sus entradas, “Recuerde realizar este paso en todo”


Configurar el Gadget anuncio de Google AdSense


Abra el gadget, cambie los Ids con los de su anuncio de Google AdSense

Ejemplo:


data-ad-client="ca-pub-0022851945832222"
data-ad-slot="2641842222"


Configurar el Gadget Entradas del blog


A continuación mire la siguiente imagen, para que lo configure tal como lo muestro


Gadgets del Sidebar


Configurar Gadget Video


Abra el gadget video, cambie el id que está marcado de color amarillo, remplácelo por el Id de su video

Ejemplo:


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



Configurar Gadget Autor


Configurar Gadget Suscríbete


Abrir el gadget, automáticamente configurara su feed con el blog, un clic en Guardar


Configurar Gadget Follow US


Abrir el gadget, le mostrara un código similar al siguiente:


<ul class="contador-social cc2m-1 ">

<li>
<a href="https://www.facebook.com/ayudadeblogger/" target='_blank' class="social-facebook">
<span class="fa fa-facebook"></span>
<span class="followers-count">1840</span>
<span class="follow-inner-text">Fans</span>
<span class="follow-redirect-text pull-right ">Like</span>
</a>
</li>

<li>
<a href="https://twitter.com/ayudadeblogger" target='_blank' class="social-twitter">
<span class="fa fa-twitter"></span>
<span class="followers-count">1200</span>
<span class="follow-inner-text">Followers</span>
<span class="follow-redirect-text pull-right ">Follow</span>
</a>
</li>

<li>
<a href="https://plus.google.com/u/0/+LuisCh%C3%A1vez" target='_blank' class="social-google-plus">
<span class="fa fa-google-plus"></span>
<span class="followers-count">1570</span>
<span class="follow-inner-text">Fans</span>
<span class="follow-redirect-text pull-right ">Follow</span>
</a>
</li>

<li>
<a href="https://www.youtube.com/ayudadeblogger" target='_blank' class="social-youtube">
<span class="fa fa-youtube"></span>
<span class="followers-count">1280</span>
<span class="follow-inner-text">Subscribers</span>
<span class="follow-redirect-text pull-right ">Suscríbete</span>
</a>
</li>
</ul>


Realice los siguientes cambios

Cambie las URLs y las palabras que están marcadas de color amarillo


Configurar el Gadget de Facebook


Abra el gadget,  le mostrara el siguiente código


<amp-iframe frameborder='0' height='220' sandbox='allow-scripts allow-same-origin allow-popups' scrolling='no' src='https://cdn.rawgit.com/grupodelecluse/amp-ocean-free/dd539ef3/caja-facebook.html?page=ayudadeblogger' width='300'>
</amp-iframe>


Realice el siguiente cambio

Cambie el nombre que dice ayudadeblogger por el nombre de su Fan page de Facebook


Configurar el Gadget de Twitter


Abra el gadget, le mostrara el siguiente código


<amp-iframe width='290'
      height='300'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='yes'
      src='https://cdn.rawgit.com/grupodelecluse/amp-ocean-free/4950dcbb/caja-twitter.html?user=ayudadeblogger'>
  </amp-iframe>


Realice el siguiente cambio

Cambie el nombre que dice ayudadeblogger por el nombre de su usuario de Twitter


Configurar el Gadget Popular post


Abrir el Gadget, configurarlo tal como lo muestro en la siguiente imagen


Configurar el Gadget Eiquetas “Labels”


Abrir el Gadget, configurarlo tal como lo muestro en la siguiente imagen


Configurar el Gadget Blog Archive


Abrir el Gadget, configurarlo tal como lo muestro en la siguiente imagen


Configurar el Gadget Barra de Navegación

Abrir el Gadget, configurarlo tal como lo muestro en la siguiente imagen


Configurar el Gadget Slideshow


Abrir el Gadget, le mostrara el siguiente código


<amp-carousel id="hero-images"
      width="250"
      height="180"
      layout="responsive"
      type="slides"
      autoplay>

<a href="#">
<amp-img src="https://2.bp.blogspot.com/-asr6VRm4Wmo/WdljGFTJxTI/AAAAAAAARNc/WfrGtmYy-XozflcVNSJq4NpSlGqZe84NACLcBGAs/s300/imagen-5.jpg"
layout="fill"
alt="Amazon’s Apple Watch killer will be free and sell you everything"
attribution="visualhunt">
</amp-img>
<div class="caption">Amazon’s Apple Watch killer will be free and sell you everything</div>
    </a>

<a href="#">
<amp-img src="https://1.bp.blogspot.com/-frWVUQktQbI/WdliV44bIII/AAAAAAAARNQ/ryF_ZiJ3GlgfRmXVO9BUtgZ8KjbykNpTgCLcBGAs/s300/imagen-4.jpg"
layout="fill"
alt="How to Travel in Style: Finding a Perfect Flight"
attribution="visualhunt">
</amp-img>
<div class="caption">How to Travel in Style: Finding a Perfect Flight</div>
    </a>

<a href="#">
<amp-img src="https://2.bp.blogspot.com/-6ACWvF79Jvo/WdlgdufDYNI/AAAAAAAARM0/fzPs07qmfigKAXPgHQ6rGEwOZC5EYhicwCLcBGAs/s1600/imagen-1.jpg"
layout="fill"
alt="Decoration Tips for your Child’s Birthday Party"
          attribution="visualhunt">
</amp-img>
<div class="caption">Decoration Tips for your Child’s Birthday Party</div>
    </a>
</amp-carousel>


Realizar los siguientes cambios:

Elimine los símbolos numerales #, remplazar por URLs de sus entradas

Cambie las URLs de las imágenes, como también las descripciones que están marcadas de color amarillo


Gadgets Footer

Configurar el Gadget Popular post


Abrir el Gadget, configurarlo tal como lo muestro en la siguiente imagen


Configurar el Gadget Amp


Este gadget puede ser usado como mejor le parezca


Configurar el Gadget Random posts


Abrir el gadget, le mostrara un código similar al siguiente


<amp-iframe frameborder='0' height='350' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/grupodelecluse/amp-daily/abc1db27/random-post-caja.html?url=ampdaily.blogspot.com&color=222'>
</amp-iframe>


Realice el siguiente cambio

Elimine la dirección URL que está marcado de color amarillo, remplácelo por la dirección URL de su blog, recuerde que su blog debe tener activado el protocolo HTTPs


Configurar el Gadget “Tal vez le interese” y la caja de comentarios de Disqus

En este punto tendrá que ingresar en el Editor HTML de su plantilla y realizar los diferentes cambios, puede seguir las siguientes instrucciones

1 Un clic en Tema


2 Un clic en “Editar HTML


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.


Configurar el gadget Caja de comentarios Disqus


Busque el siguiente código

<!-- Seccion Disqus -->

Le mostrara con código similar al siguiente


<h2>Comentarios:</h2>

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/grupodelecluse/blog-amp-template/5f00d437/disqus-comments.html?shortname=blogamptemplate&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=e8554e&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;url=&quot; + data:blog.url + &quot;&amp;homepageurl=&quot; + data:blog.homepageUrl + &quot;&amp;canonicalhomepageurl=&quot; + data:blog.canonicalHomepageUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
</amp-iframe>


Realice el siguiente cambio

Cambie la palabra que dice blogamptemplate que está marcado de color amarillo, por su Id de Disqus


Configurar el gadget Tal vez le interese


Busque el siguiente código

<!-- Seccion Random post Entry -->

Le mostrara el siguiente código


<amp-iframe frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/grupodelecluse/amp-daily/a234463c/random-post-entry.html?url=https://ampdaily.blogspot.com/' width='600'>
<div aria-label='Random Post' overflow='' role='button' tabindex='0'>Tal vez le interese</div>
</amp-iframe>


Realice el siguiente cambio

Cambie la dirección URL que está marcada de color amarillo https://ampdaily.blogspot.com/ , por la dirección URL de su blog de Blogger, recuerde que su blog debe tener activado el protocolo HTTPs


Configurar los datos estructurados

Busque la siguiente URL imagen


https://1.bp.blogspot.com/-Bx0HLfY9tBA/WgDS0wf8CRI/AAAAAAAAUa8/I2b0arGWwE4kNQhD9uQHZKsJonUB2ng1gCLcBGAs/s1600/amp-daily.jpg


Cambie, por una nueva imagen

Busque el siguiente código

<!--Datos estructurados-->

Le mostrara un código tal como le muestro a continuación


<!--Datos estructurados-->

<!-- Enlaces al sitio-->
<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;WebSite&quot;,
  &quot;name&quot;: &quot;Plantilla Amp en Blogger&quot;,
  &quot;alternateName&quot;: &quot;Plantilla Amp en Blogger&quot;,
  &quot;url&quot;: &quot;https://ampdaily.blogspot.com/&quot;
}
</script>
<!-- Fin enlaces al sitio-->

<!--Datos -->

<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;Organization&quot;,
  &quot;url&quot;: &quot;https://ampdaily.blogspot.com/&quot;,
  &quot;contactPoint&quot;: [{
    &quot;@type&quot;: &quot;ContactPoint&quot;,
    &quot;telephone&quot;: &quot;+593 999999999&quot;,
    &quot;contactType&quot;: &quot;customer service&quot;
  }]
}
</script>
<!--Fin datos estructurados-->

<!--Links paginas Sociales-->
<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;Person&quot;,
  &quot;name&quot;: &quot;Luis Chavez&quot;,
  &quot;url&quot;: &quot;https://ampdaily.blogspot.com/&quot;,
  &quot;sameAs&quot;: [
    &quot;https://www.facebook.com/ayudadeblogger&quot;,
    &quot;https://twitter.com/ayudadeblogger&quot;,
    &quot;https://plus.google.com/b/109642587966892719343/+Ayudadeblogger&quot;
  ]
}
</script>

<!--Fin Paginas Sociales-->

<!--Meta logo-->
<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;Organization&quot;,
  &quot;url&quot;: &quot;https://ampdaily.blogspot.com/&quot;,
  &quot;logo&quot;: &quot;https://1.bp.blogspot.com/-Bx0HLfY9tBA/WgDS0wf8CRI/AAAAAAAAUa8/I2b0arGWwE4kNQhD9uQHZKsJonUB2ng1gCLcBGAs/s1600/amp-daily.jpg&quot;
}
</script>
<!--Fin Meta logo -->


Cambie todo lo que esta marcado de color amarillo

Eso es todo, un clic en Guardar Tema


Felicidades, ahora ya dispones de una plantilla de Blogger en el formato Amp HTML, bienvendido/a

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir





Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: