• Jelajahi

    Copyright © DETIKMENIT
    Best Viral Premium Blogger Templates

    Iklan

    AMP Blog Build - Plantilla de Blogger gratis en Amp HTML 2019

    Sunday, July 14, 2019, July 14, 2019 WIB Last Updated 2019-07-14T18:37:44Z
    masukkan script iklan disini
    masukkan script iklan disini
    Memuat video


    Nuestros temas gratuitos de Blogger en el formato AMP HTML están cambiando el juego y llegando a muchos blogs que necesitan salir adelante con la nueva tecnología como lo es AMP HTML. Ahora los usuarios de Blogger que necesiten una plantilla moderna y sobre todo que sea rápida, tendrá la opción de descargar el tema que mejor le guste de forma gratuita.



    AMP BLOG BUILD es un tema de Blogger en el formato AMP HTML, una plantilla dinámica y lista para ser instalada en cualquier proyecto, AMP BLOG BUILD es una plantilla rápida, eficaz que utiliza una de las mejores tecnologías de Google como lo es el proyecto AMP.

    Características importantes

    Datos estructurados
    Amp HTML 100%
    AdSense
    Material design
    Responsive design
    Box search
    Gadget Suscribe
    Disqus Comments
    Random post
    Slideshow
    Popular post
    Menú responsive
    Widget label
    Post card
    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


    Catatan penting:

    Sebelum memulai tutorial ini, disarankan untuk membuat cadangan dari blog Blogger Anda, atau praktik pertama di blog contoh. Jika Anda tidak tahu cara membuat cadangan blog Anda, Anda dapat mengikuti petunjuk di tautan berikut:

    Instalar la plantilla AMP Blog Build

    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 Blog Build

    Configurar el Gadget Menú 1

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    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”

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar el Gadget Social

    Plantilla de Blogger gratis en Amp - AMP Blog Build

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

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar la imagen de la cabecera principal

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    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

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar el Gadget de AdSense

    Plantilla de Blogger gratis en Amp - AMP Blog Build

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

    Ejemplo:

    <amp-ad layout="fixed-height" height="90"
    type="adsense"
    data-ad-client="ca-pub-0022251945832222"
    data-ad-slot="2222842222">
    </amp-ad>
    
    

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar el Gadget Menú 2

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    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”

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar el Gadget anuncio de Google AdSense

    Plantilla de Blogger gratis en Amp - AMP Blog Build

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

    Ejemplo:

    <amp-ad layout="fixed-height" height="90"
    type="adsense"
    data-ad-client="ca-pub-0022251945832222"
    data-ad-slot="2222842222">
    </amp-ad>
    
    

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar el Gadget Entradas del blog

    Plantilla de Blogger gratis en Amp - AMP Blog Build

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

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Si no sabes cómo publicar una entrada o post de Blogger en Amp y así nos valide el código Amp y no nos presente un solo error, puedes seguir las instrucciones del siguiente tutorial:

    Publicar una entrada de Blogger en AMP

    Gadgets del Sidebar

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar Gadget Video

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    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="YnnE0SUR_80"
    height="150"
    layout="responsive"
    width="240">
    </amp-youtube>
    
    

    Plantilla de Blogger gratis en Amp - AMP Blog Build
    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar Gadget Autor

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar Gadget Suscríbete

    Plantilla de Blogger gratis en Amp - AMP Blog Build

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

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar Gadget Follow US

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    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

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    Configurar el Gadget de Facebook

    Plantilla de Blogger gratis en Amp - AMP Blog Build

    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-blog-build/c7f97b2c/box-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

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el Gadget de Twitter

    Template Blogger Gratis di Amp - AMP Blog Build

    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-blog-build/a597dc19/box-twitter.html?user=ayudadeblogger'>
      </amp-iframe>
    
    

    Realice el siguiente cambio

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

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el Gadget Popular post

    Template Blogger Gratis di Amp - AMP Blog Build

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

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el Gadget Eiquetas “Labels”

    Template Blogger Gratis di Amp - AMP Blog Build

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

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el Gadget Blog Archive

    Template Blogger Gratis di Amp - AMP Blog Build

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

    Blogger Blog Gratis di Amp - AMP Blog Build

    Configurar el Gadget Barra de Navegación

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

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el Gadget Slideshow

    Template Blogger Gratis di Amp - AMP Blog Build

    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

    Template Blogger Gratis di Amp - AMP Blog Build

    Gadgets Footer

    Template Blogger Gratis di Amp - AMP Blog Build
    Template Blogger Gratis di Amp - AMP Blog Build
    Configurar el Gadget Popular post

    Template Blogger Gratis di Amp - AMP Blog Build

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

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el Gadget Amp

    Template Blogger Gratis di Amp - AMP Blog Build

    Este gadget puede ser usado como mejor le parezca

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el Gadget Random posts

    Template Blogger Gratis di Amp - AMP Blog Build

    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-blog-build/5af4e80c/random-post.html?url=ampblogbuild.blogspot.com&color=fff'>
    </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

    Template Blogger Gratis di Amp - AMP Blog Build

    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

    Template Blogger Gratis di Amp - AMP Blog Build

    2 Un clic en “Editar HTML

    Template Blogger Gratis di Amp - AMP Blog Build

    Ahora se le abrirá el Editor HTML de su plantilla

    Template Blogger Gratis di Amp - AMP Blog Build

    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.

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar la imagen principal

    Template Blogger Gratis di Amp - AMP Blog Build

    Puede cambiar la imagen que se esta mostrando actualmente en el demo, de la siguiente manera

    Busque la siguiente dirección URL de imagen

    https://3.bp.blogspot.com/-1bb5h8Uu7_k/WqHpS4lcVJI/AAAAAAAAXyQ/2fNLGtQRaTE-sXzaM-6gl2yzf7VAOBFcQCLcBGAs/s1600/material.jpg
    
    

    Le mostrara lo siguiente:

    Template Blogger Gratis di Amp - AMP Blog Build
    Elimine la URL indicada y remplacelo por una nueva URL imagen

    Configurar el gadget Caja de comentarios Disqus

    Template Blogger Gratis di Amp - AMP Blog Build
    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/amp-blog-build/9067061a/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

    Template Blogger Gratis di Amp - AMP Blog Build

    Configurar el gadget Tal vez le interese

    Template Blogger Gratis di Amp - AMP Blog Build

    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-blog-build/a597dc19/random-post-entry.html?url=https://ampblogbuild.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://ampblogbuild.blogspot.com/, por la dirección URL de su blog de Blogger, recuerde que su blog debe tener activado el protocolo HTTPs

    Template Blogger Gratis di Amp - AMP Blog Build
    Configurar los datos estructurados

    Busque la siguiente URL imagen

    https://1.bp.blogspot.com/-XW7HarljEKM/WnkbS-azADI/AAAAAAAAXMc/Y-nUprm84DIylGJYpLmiFWCyZOl1vxP3QCLcBGAs/s1600/blogger-amp.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;Blogger template&quot;,
      &quot;alternateName&quot;: &quot;Amp en Blogger&quot;,
      &quot;url&quot;: &quot;https://ampblogbuild.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://ampblogbuild.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://ampblogbuild.blogspot.com/&quot;,
      &quot;sameAs&quot;: [
        &quot;https://www.facebook.com/ayudadeblogger&quot;,
        &quot;https://twitter.com/ayudadeblogger&quot;,
        &quot;https://plus.google.com/+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://ampblogbuild.blogspot.com/&quot;,
      &quot;logo&quot;: &quot;https://1.bp.blogspot.com/-XW7HarljEKM/WnkbS-azADI/AAAAAAAAXMc/Y-nUprm84DIylGJYpLmiFWCyZOl1vxP3QCLcBGAs/s1600/blogger-amp.jpg&quot;
    }
    </script>
    <!--Fin Meta logo -->
    
    

    Cambie todo lo que esta marcado de color amarillo

    Eso es todo, un clic en Guardar Tema

    Template Blogger Gratis di Amp - AMP Blog Build
    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
    Komentar

    Tampilkan

    Terkini

    Tech & Science

    +