Landing page Amp HTML en Blogger Tutorial


Una Landing page creada en Blogger y con 4 diferentes páginas estáticas con la estructura completa en AMP HTML, un diseño único y sorprendente.

Necesitabas cambiar el diseño de tu blog de Blogger a un diseño web profesional y sobre todo que tenga la implementación de AMP HTML?, ahora lo podrás tener.

Una página principal y cuatro diferentes secciones de páginas, a las cuales se podrá seguir creando las páginas que necesite, siguiendo las pautas de este tutorial creado exclusivamente para usuarios de Blogger.

Landing page Amp HTML en Blogger Tutorial

Características:

Parallax en Amp HTML
Menú desplegable en Amp HTML
Menú responsive en Amp HTML
Iconos Fond Awesome
Widget carrusel en Amp HTML
Información de contacto, mapa
4 paginas estáticas, Nosotros, Servicios, Contactos y Autor (Con esta opción se puede crear las páginas que necesite)
Diseño Material design
Implementación de Bootstrap
Iconos sociales
Implementación de anuncios AdSense
Buscador integrado en las entradas
Widgets en Amp HTML
Un random post en las entradas
Caja de comentarios Disqus en Amp HTML
Implementación de videos Youtube, Vimeo, etc.
Entradas populares en Amp HTML
Slideshow en Amp HTML
Entrada destacada en Amp HTML
Footer
Sidebar
Diseño Responsive
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 autor estilo Material design
Datos estructurados
SEO amistoso

Landing page Amp HTML en Blogger Tutorial

¿Cómo saber si mi Landing page 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

Landing page Amp HTML en Blogger Tutorial

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


¿Cómo descargar la plantilla Landing page en Amp HTML?

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 Landign page de Blogger en Amp HTML.

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:


Empezamos

Instalar la Plantilla

Video Tutorial


1.1 Ir a Blogger.com

1.2 Un clic en Plantilla

Landing page Amp HTML en Blogger Tutorial

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

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

4 Un clic en “Examinar”

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

Landing page Amp HTML en Blogger Tutorial

6 Un clic en “Subir”

Landing page Amp HTML en Blogger Tutorial

7 Listo ahora ya tiene insertado la Plantilla Landing page Amp HTML en tu blog de Blogger

Este tutorial tiene diferentes secciones, a los cuales se les ha creado algunos videos tutoriales para cada sección

Primero tendrá que realizar los cambios ingresando en el editor HTML de su plantilla

Un clic en Tema

Landing page Amp HTML en Blogger Tutorial

Un clic en Editar HTML

Landing page Amp HTML en Blogger Tutorial

1 Cambiar el título y descripción de su blog, como también los datos estructurados desde el editor HTML de su plantilla

Landing page Amp HTML en Blogger Tutorial

Busque las siguientes palabras y cámbielas todas por el título de su blog

Landing page Amp HTML en Blogger

Cambie la descripción de su blog eliminando las siguientes palabras

Landing page Amp HTML en Blogger diseño responsive

Cambiar la URL de imagen, nombre del autor, código de seguimiento Google search console, código de seguimiento de Bing, dirección de correo, país, ciudad.

http://2.bp.blogspot.com/-1_-smwB13dg/Vyb42EZVR8I/AAAAAAAAK8k/pFq-6R_w61cMyoKp4pbmryoU5_9KQqJzwCK4B/s1600/ayudadeblogger.png

Luis Chávez

t1tvtwCPfGuwVV-87oGtbjvpQKYZNQBag3dgxBpF3yg

ayudadeblogger@gmail.com

Ecuador

Quito

Cambiar las palabras, URLs, número de teléfono, URLs de perfiles sociales en los datos estructurados

Video tutorial


2 Cambiar la imagen principal Parallax

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

/* Seccion 1 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://2.bp.blogspot.com/-gVRbBY6Osz8/WKt0kVdcjHI/AAAAAAAAOhc/eco9n60X_r4GR3yPonpAQS2I7L2zS4huACLcB/s1600/1.jpg

Video tutorial


3 Cambiar la segunda imagen

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

/* Seccion 2 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://4.bp.blogspot.com/-lRMQSufjjhU/WKvakP8r0HI/AAAAAAAAOig/Fxv3XSoTRbwp17HpBTC1ycRSlh3u9by2gCLcB/s1600/2.png

Video tutorial


4 Cambiar la tercera imagen

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

/* Seccion 3 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://4.bp.blogspot.com/-H8h5Ny-F8F0/WKvZ6PltRPI/AAAAAAAAOiY/maaofZ1rCYohMgHWBcHzzLOD_IiRCLkmQCLcB/s1600/4.jpg

Video tutorial


5 Cambiar la cuarta imagen

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

/* Seccion 4 */

Cambie la dirección URL de la imagen que se está mostrando por una nueva dirección URL de imagen

https://3.bp.blogspot.com/-rvDcmQfTEDc/WKviPYK_gBI/AAAAAAAAOiw/R_-zLXOyKHg9Gf6RnNpYMD9twyDIs4NxACLcB/s1600/11.jpg

Video tutorial


6 Menú Responsive

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 5 -->

Ahora le mostrara el código del menú, para ello debe editar las palabras, cambiar las URLs y los perfiles sociales

Video Tutorial


7 Menú desplegable

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 6 -->

Le mostrara el código del menú, para ello debe editar las palabras, cambiar las URLs

Video Tutorial


8 Editar el título, descripción de la imagen principal Parallax

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 7 -->

Le mostrara el siguiente código
<h1 class='d'>Landing Page AMP HTML BLOGGER</h1>

    <br/>

          <h4 class='d adb-justificar'>Páginas móviles aceleradas (AMP), es un nuevo formato para la entrega de contenido web en dispositivos móviles. Se ha diseñado específicamente para maximizar el rendimiento y la velocidad.</h4>

    <br/>

<a class='btn2 btn-primary' href='#'>

                                <i class='fa fa-angle-right'/> Empezar      </a>

Cambie las palabras que están marcadas de color rojo, también elimine el símbolo # que está marcado de color azul por la dirección URL de una entrada o pagina

9 Editar el título, descripción de la segunda imagen

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 8 -->

Le mostrara el siguiente código
<center>

                              <h1>The best way to show your Blog to the world</h1>

                  </center>

 <div class='adb-container2'>

<h4 class='adb-justificar'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</h4>

</div>



Cambie las palabras que están marcadas de color rojo

10 Cambiar los iconos de Fond Awesome y las palabras

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 9 -->

Le mostrara el siguiente código
<i class='fa fa-desktop iconbox_icon'/>

</div>

                            

<div class='iconbox_content adb-justificar'>



<h4 class='info-title'>Responsive Design</h4>



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt dolore.</p>

                                  

                                </div></div>

  </div>



<!-- fin descripcion 1 -->



<!-- descripcion 2 -->

<div class='col-md-3'>

<div class='iconbox'>

<div class='iconbox_icon'> 

 <i class='fa fa-pie-chart iconbox_icon'/>

                                    </div>

 <div class='iconbox_content adb-justificar'>



<h4 class='info-title'>Clean Code</h4>



<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

                                    </div>

                                </div>

 </div>



<!-- fin descripcion 2 -->



<!-- descripcion 3 -->

<div class='col-md-3'>

<div class='iconbox'>

<div class='iconbox_icon'>

  <i class='fa fa-check-square-o iconbox_icon'/>

                            </div>           

<div class='iconbox_content adb-justificar'>



<h4 class='info-title'>Landing page Amp</h4>

    

<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                                    </div>




Cambie las palabras que están marcadas de color rojo

Cambie los nombres de los iconos de Fond Awesome que están marcados de color azul, por unos nuevos, puede dirigirse al siguiente enlace en el cual encontrara el icono que mejor le guste


Video Tutorial


11 Cambiar los iconos de Fond Awesome y las palabras del siguiente widget

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 10 -->

Le mostrara el siguiente código
<center>

  <h2>Present your Amp HTML in a beautiful and elegant way.</h2>

  </center>

  <p>Con la configuración de diseño web adaptable puedes enviar desde el servidor el mismo código HTML a todos los dispositivos, y se utiliza el código CSS para modificar el procesamiento de la página en el dispositivo.</p>

  <br/>

<div class='iconbox'>

<div class='iconbox_icon'>

  <i class='fa fa-check-square-o iconbox_icon'/>

                            </div>           

<div class='iconbox_content adb-justificar'>



<h4 class='info-title'>Creative Design</h4>

    

<p>Con la metaetiqueta de ventana gráfica se indica al navegador cómo ajustar las dimensiones y el escalado de la página a la anchura del dispositivo.</p>

                                    </div>

                                </div>

<br/>



<div class='iconbox'>

<div class='iconbox_icon'>

  <i class='fa fa-check-square-o iconbox_icon'/>

                            </div>           

<div class='iconbox_content adb-justificar'>



<h4 class='info-title'>Cross-Browser Support</h4>

    

<p>Con el diseño adaptable se envía a todos los dispositivos un mismo código ajustado al tamaño de la pantalla.</p>

                                    </div>

                                </div>

Cambie las palabras que están marcadas de color rojo

Cambie los nombres de los iconos de Fond Awesome que están marcados de color azul, por unos nuevos, puede dirigirse al siguiente enlace en el cual encontrara el icono que mejor le guste


12 Widget carrusel

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 11 -->

Le mostrara un código similar al siguiente
<a class='blog-carousel-item' href='#'>

<amp-img height='250' src='https://3.bp.blogspot.com/-HA34czH2G_I/WKv0AIuI9sI/AAAAAAAAOjA/V0RkqN-ENzA1kBzs8SodYBOan2E8MQVigCLcB/s400/25.jpg' width='250'>

</amp-img>



  <div class='blog-carousel-item-caption'><p>Amp HTML Carrusel 1</p>

<small>Leer más...</small>

</div></a>

Realizar los siguientes cambios:

Cambie los signos numerales # que están marcados de color azul por la dirección URL de una entrada o pagina

Cambie la dirección URL de imagen que está marcada de color amarillo por una nueva dirección URL de imagen

Cambie las palabras que están marcadas de color rojo

Todo lo mencionado deberá realizarlo en todo el código del widget carrusel

Video tutorial


13 Editar el título, descripción de la cuarta imagen

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 12 -->

Le mostrara el siguiente código
<div class='text-responsive'>

<center>

  <h2 class='title2'>Amazing Landing page Amp HTML for Blogger</h2>

  </center>

  <br/>

  <h3 class='d'><strong>Diseño   -    Inspiración   -    Tegnología </strong></h3>

<h3 class='d'>Amp HTML - Los componentes de esta Landing page están basados en Bootstrap he inspirados en los poderosos estilos de Material design Google. Toda la estructura de esta plantilla es diseñado en Blogger.com y transformado en Accelerated Mobile Pages AMP. </h3>

</div>

Cambie las palabras que están marcadas de color rojo

14 Editar el título, descripción de la quinta imagen

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 13 -->

Le mostrara el siguiente código
<center>

  <h2 class='title2'>Sign up to Our newsletter</h2>



  <br/>

  <h3 class='d'>Suscríbete completamente gratis y recibirás mis nuevas actualizaciones directamente en su bandeja de entrada</h3>

  </center>





Cambie las palabras que están marcadas de color rojo

15 Editar información de contacto, iconos fond awesome y mapa

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 14 -->

Le mostrara el siguiente código
 <div class='col-md-5 col-md-offset-2'>

     <h2>Información de contacto</h2>

                      <br/>

<p>Landing page Amp HTML Blogger es una página responsive. Se ajustará perfectamente como un marcador de posición para su sitio web o página de destino.</p>

<p>Viene con varias variantes de contenido y de fondo. Esta Landing Page en Amp HTML también está equipado con algunos dispositivos frescos para la versión movil.</p>

 

<ul class='icon_list'>

 <li><div class='icon_small float-left fa fa-map-marker'/> <h6><b>     Bellavista alta, Tena, Ecuador</b></h6></li>

  <li><div class='icon_small float-left fa fa-phone'/><h6><b>(593) 994589032</b></h6></li>

<li><div class='icon_small float-left fa fa-envelope-o'/><h6><a href='mailto:ayudadeblogger@gmail.com'>ayudadeblogger@gmail.com</a></h6></li>

     </ul>

     

     <p>The Landing page Amp HTML dispone de código bien establecido y viene con la documentación en profundidad..</p> 

     </div>

     

     

     <div class='col-md-5 col-md-offset-2'>

      <h2>Mapa</h2>

                      <br/>

     <amp-iframe frameborder='0' height='430' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.2176475242013!2d-77.81577118570475!3d-0.9942268992747325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91d6a44a76c2b909%3A0x109836fcdd0679e1!2sAyudadeblogger!5e0!3m2!1ses!2s!4v1488056250512' width='600'> </amp-iframe>





Cambie las palabras que están marcadas de color rojo

Elimine todo el código que está marcado de color azul perteneciente al mapa

Diríjase a Google Maps, genere el código Embed de su mapa, copie solo la dirección URL generada, para ello puede ver el ejemplo de implementación en el siguiente video

Landing page Amp HTML en Blogger Tutorial

- El código que me genero como ejemplo

Landing page Amp HTML en Blogger Tutorial
- Se tendrá que copiar solo la URL que esta marcada

Video Tutorial


16 Cambiar las URLs de los perfiles sociales

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion 15 -->

Le mostrara el siguiente código
    <br/>

<a class='social-adb fa fa-facebook' href='https://www.facebook.com/ayudadeblogger/'/>

<a class='social-adb fa fa-twitter' href='https://twitter.com/ayudadeblogger'/>

<a class='social-adb fa fa-google-plus' href='https://plus.google.com/+Ayudadeblogger'/>

<a class='social-adb fa fa-linkedin' href='https://www.linkedin.com/in/luis-chavez-a9154953/'/>

    <br/>

Cambie las direcciones URLs que están marcadas de color azul por las direcciones URLs de sus perfiles sociales

17 Editar la caja de comentarios Disqus

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion comentarios -->

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

Landing page Amp HTML en Blogger Tutorial

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

Video Tutorial


18 Realizar los cambios en el Random post

Landing page Amp HTML en Blogger Tutorial

Busque el siguiente código

<!-- Seccion Random post -->

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

Landing page Amp HTML en Blogger Tutorial

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


Video Tutorial

19 Es momento de dar un clic en Guardar Tema

Editar los widgets del sidebar

Diríjase a Diseño

Video Tutorial


1 Widget Ads de AdSense

Landing page Amp HTML en Blogger Tutorial

Landing page Amp HTML en Blogger Tutorial

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+

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

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

<amp-iframe width='290'
      height='120'
      sandbox='allow-scripts allow-same-origin allow-popups'
      frameborder='0'
      scrolling='yes'
      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+

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

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+

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

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/google-mas-badge-page-amp/9171d501/.html?user=+Ayudadeblogger'>
  </amp-iframe>

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

5 Widget Video

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

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

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

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

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

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

Landing page Amp HTML en Blogger Tutorial
Landing page Amp HTML en Blogger Tutorial

Landing page Amp HTML en Blogger Tutorial

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

9 Caja de seguidores de Facebook en Amp HTML

Landing page Amp HTML en Blogger Tutorial

Abrir el gadget Seguidores de Facebook

Landing page Amp HTML en Blogger Tutorial

Ingrese el siguiente código en su interior


<amp-iframe frameborder='0' height='220' sandbox='allow-scripts allow-same-origin allow-popups' scrolling='no' src='https://cdn.rawgit.com/Luis-Chavez/caja-seguidores-fb/7eb3c1ad/.html?page=ayudadeblogger' width='300'>

  </amp-iframe>



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

10 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

Publicar una entrada correctamente en Amp HTML

Para que pueda implementar una entrada con la estructura completa en Amp, puede seguir las instrucciones que se encuentra en el siguiente tutorial


Crear páginas estáticas en Amp HTML

En esta sección de crear paginas estáticas, podrán realizarlo de una forma fácil y segura, siga el procedimiento de cada video tutorial que se encuentra en el siguiente enlace:


1 Pagina estática sección contactos

Landing page Amp HTML en Blogger Tutorial

Para más detalles por favor visite el siguiente enlace:


2 Pagina estática sección servicios

Landing page Amp HTML en Blogger Tutorial

Para más detalles por favor visite el siguiente enlace:


3 Pagina estática sección nosotros

Landing page Amp HTML en Blogger Tutorial

Para más detalles por favor visite el siguiente enlace:


4 Pagina estática sección autor

Landing page Amp HTML en Blogger Tutorial

Para más detalles por favor visite el siguiente enlace:


Bueno, si has llegado hasta aquí, muchas felicidades has realizado un gran trabajo

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dudes en escribir

Enviar por correo
  1. Hola como estas, me interesa esta plantilla, me puedes enviar la plantilla por favor? mi correo es duvangonzalezme@msn.com

    ResponderEliminar
    Respuestas
    1. Hola Duvan, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
    2. Luis no me aparecen las secciones 8, 9, 10, 11, 12 que hago, link http://vertelevisiononlinegratis.blogspot.com

      Eliminar
    3. Hola Duvan, ingrese a su Blog y luego en el código de su plantilla, verifique que se encuentra el código que indico en este tutorial, el problema es que usted ha realizado algunos cambios en la plantillas y ha eliminado parte del código y por lo cual esta todo desordenado y no se le mostrara las modificaciones que se encuentra en la sección 8, 9, 10, 11, 12, por favor vuelva a ingresar nuevamente la plantilla en su blog y realice los cambios con tranquilidad

      Saludos.

      Eliminar
  2. EXCELENTE PLANTILLA BRO BENDICIONES Y ÉXITOS AQUÍ ESTA MI CORREO GRACIAS MI HERMANO:
    dario_m1990@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hola mi estimado amigo Dj Genio, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  3. hola..me envias la plantilla adrianrockerito88@gmail.com ,muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Adrian, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  4. hola,muy linda la plantilla y excelente tutorial. Podrías enviarme la plantilla? juanchydel86@gmail.com.
    Desde ya,Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Juan, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  5. hola..muchas gracias por la plantilla es excelente..tengo una duda,como tiene que ser el link para poder ver todas las entradas juntas de un blog,porque no pude lograrlo.muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, sobre su pregunta remplace solo la url del ejemplo por la url de su blog:

      Ejemplo:

      http://landingpageamphtml.blogspot.com/search/label/

      Saludos

      Eliminar
  6. Muchas gracias por la solucion!!...te hago la ultima consulta..ja.En el recuadro de las entradas no se ve bien el titulo queda entrecortado.
    me podras decir en que parte del codigo esta eso para solucionarlo.gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Juan, sobre su pregunta a que se refiere con recuadro de las entradas?, por favor detalle un poco mas sobre su consulta, ademas de indicar la URL de su blog

      Saludos

      Eliminar
  7. buenas tardes amigo por favor me podria ragalara la plantilla de Landign page de Blogger en Amp HTML. http://www.ayudadeblogger.com/2017/03/landing-page-amp-html-en-blogger-tutorial.html

    ResponderEliminar
    Respuestas
    1. Hola Juan, claro que le puedo enviar la plantilla, pero para ello necesita hacerme saber la dirección de su correo electrónico y con ello podre enviarle la plantilla

      Saludos.

      Eliminar
    2. jejejeje disculpa esa buenas tardes amigo por favor me podria ragalara la plantilla de Landign page de Blogger en Amp HTML. http://www.ayudadeblogger.com/2017/03/landing-page-amp-html-en-blogger-tutorial.html mi correo es jfrancisco2803@gmail.com

      Eliminar
    3. Hola Juan, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  8. Hola luis Chavez !
    Gracias por compartir tu trabajo al publico y sobre todo free.
    Desearia que me enviara dicha plantilla AMP a huarachigonza@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Gonzalo, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  9. Hola Luis quiero probar tu nueva plantila en mi blog, el correo es buzontex@gmail.com, gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Francisco, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  10. hola..te enviee un email para poder explicarte bien lo q necesito modificar de las entradas.muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, he revisado su correo, la primera pregunta, que navegador web esta utilizando, ya que si usted utiliza Google Chrome, Internet Explorer, Fire Fox, no ocurre ningún inconveniente

      Saludos.

      Eliminar
  11. hola..utilizo google chrome.Me funciona bien todo,solo tengo ese problema en el titulo de las entradas que no se leen bien..solo necesito que me digas en que linea de codigo esta ubicado,y yo lo soluciono.gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, sobre su pregunta, ingrese en el editor HTML de su plantilla y busque la siguiente linea de código:

      <h1 class='post-title entry-title'>

      La linea de código que le indique se encuentra justo abajo de:

      readmore btn-floating

      Saludos

      Eliminar
  12. felicitaciones luis por tu blog,excelentes diseños, me ayuda mucha con mi trabajo, podrias enviarme la plantilla por favor.
    mi correo es raced.cas@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  13. Luis excelente tutorial y explicación, me gustaría poder implementar la plantilla en mi blog, de antemano gracias por tu gran aporte y éxitos en tus proyectos. jcsanchezdu@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hola Juan Carlos, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  14. hello, plz send me: lovebloggervn@gmail.com
    thanks

    ResponderEliminar
    Respuestas
    1. Hola Minh, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  15. Hola muy chevere la plantilla..podria ser tan amable enviarme una copia a mi email andante887@gmail.com Gracias

    ResponderEliminar
    Respuestas
    1. Hola Enrique, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  16. Hola me puedes enviar la plantilla. Gracias redactores11@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Manuel, se le envió la plantilla Landing page Amp HTML a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar

Discusión:

Ayudadeblogger.com
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 (9) 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 (19) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (4) 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 (8) 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 (43) Plantillas Landing page para Blogger (4) 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 (74) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Copyright © - Ayudadeblogger.com

 

Inspiración

Tecnología

Contactos

+593 994589032