Plantilla de Blogger en el formato Amp HTML gratis - Amp Ocean Free
Sabemos que todo evoluciona luego de un tiempo, ahora hemos dado un toque sorprendente a las nuevas plantillas de Blogger en el formato Amp HTML, las nuevas plantillas de Blogger en AMP Html que se encuentran este sitio web tendrán todo el soporte necesario.El manejo de esta nueva plantilla de Blogger en Amp HTML se lo administra desde la configuración de diseño, una plantilla simplificada, la cual hará que sea tan fácil de instalarla en su blog de Blogger y empezar a disfrutar de la nueva tecnología que nos trae Google.com y su proyecto Amp "Código abierto"
Ventajas
Una de las principales ventajas al usar Blogger en Amp HTML, son las siguientes:
El principal beneficio es el rendimiento para su experiencia móvil, lo que debería aumentar su visibilidad en los SERPs.
Si trabajas duro en el blog y tiene el formato Amp HTML aparecerás en el carrusel AMP de un dispositivo móvil, tendrás el símbolo de Amp
Aprovecha el almacenamiento en Google AMP Cache
Google AMP Cache es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos. Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente. Al usar Google AMP Cache, el documento, todos los archivos de JS y todas las imágenes se cargan desde el mismo origen que usa HTTP 2.0 para lograr la máxima eficiencia.Conclusión:
AMP debe ser una prioridad para su sitio web. Si eres uno de los muchos que aún no ha hecho su sitio web móvil amigable, empezaría con AMP primero.
Más y más visitantes están utilizando sus dispositivos móviles para todo, desde sólo navegar por la web hasta completar plenamente sus compras en línea con sus teléfonos.
AMP es la respuesta de Google a su compromiso en la mejor experiencia de usuario para todos sus clientes. Todos queremos cosas "ahora", y eso incluye nuestra experiencia móvil.
Obtenga su sitio web a la velocidad con AMP
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:
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:
Instalar la plantilla Amp Ocean Free
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 Ocean Free
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 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4AsV_KGfP-F706F0IoQZpqfttvRHiXsq1UjqSFiFdezOVKCkIsHisHsp1qv4a91mGLs4GneZNapf6dGeabSlRpZAcHxbm-f9TdXES-eWyzHlhjXdTDkIQNQWrsyfvNT7J4UZxQJiOvr4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMW-tpIpnrDh8BAV5jISs-CWG3uTbTvREQp5f4kVyqqQSJY_EuQQQuxSuoUXPkI1-Hbe9AZ62bGxikzFohSdLCEOMxyn_ktzLFKqweKjchp66erjSGdQrdLwN4yN4SkjaSU-SHrjYQ5PA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdKiBCT3eTTc4Pwf_v_MwY7qGmQWNsvfUefW4k3oUalecQ8MrQgybf4crR0u2LNOQ2TUnyss36F7ihNDOV3ZMvRmk4qZo0PcQ5YLkB5fbU_WHjwpAifXhQVe9OZwBE3C73564B6-WUsQ/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-ocean-free/86464d40/random-post-caja.html?url=ampoceanfree.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='"https://cdn.rawgit.com/grupodelecluse/blog-amp-template/5f00d437/disqus-comments.html?shortname=blogamptemplate&fontBodyFamily=sans-serif&fontLinkColor=e8554e&canonicalurl=" + data:blog.canonicalUrl + "&url=" + data:blog.url + "&homepageurl=" + data:blog.homepageUrl + "&canonicalhomepageurl=" + 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-ocean-free/258304f6/random-post-entry.html?url=https://ampoceanfree.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://ampoceanfree.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrdezU8o9DZ0EIosxUDUJFXF5bB67iDPRzOksMeXZzigCwiLsW8K2fMAdWUruu9N9eOsxqjjTiP6ldfB9qvouGcEZYLmhDq7PjpoCzkwaNN2vqjIBaID0Sxyg9khBcXkLekhyphenhyphenx9j2Tocd/s1600/amp-domo-logo.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'>
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Plantilla Amp en Blogger",
"alternateName": "Plantilla Amp en Blogger",
"url": "https://ampoceanfree.blogspot.com/"
}
</script>
<!-- Fin enlaces al sitio-->
<!--Datos -->
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://ampoceanfree.blogspot.com/",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+593 999999999",
"contactType": "customer service"
}]
}
</script>
<!--Fin datos estructurados-->
<!--Links paginas Sociales-->
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Luis Chavez",
"url": "https://ampoceanfree.blogspot.com/",
"sameAs": [
"https://www.facebook.com/ayudadeblogger",
"https://twitter.com/ayudadeblogger",
"https://plus.google.com/b/109642587966892719343/+Ayudadeblogger"
]
}
</script>
<!--Fin Paginas Sociales-->
<!--Meta logo-->
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://ampoceanfree.blogspot.com/",
"logo": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrdezU8o9DZ0EIosxUDUJFXF5bB67iDPRzOksMeXZzigCwiLsW8K2fMAdWUruu9N9eOsxqjjTiP6ldfB9qvouGcEZYLmhDq7PjpoCzkwaNN2vqjIBaID0Sxyg9khBcXkLekhyphenhyphenx9j2Tocd/s1600/amp-domo-logo.jpg"
}
</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
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
7 comentarios: