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.
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
¿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
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:
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:
1 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
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
Un clic en Editar HTML
1 Cambiar el título y descripción de su blog, como también los datos estructurados desde el editor HTML de su plantilla
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
2 Cambiar la imagen principal Parallax
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
3 Cambiar la segunda imagen
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
4 Cambiar la tercera imagen
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
5 Cambiar la cuarta imagen
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
6 Menú Responsive
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
7 Menú desplegable
Busque el siguiente código
<!-- Seccion 6 -->
Le mostrara el código del menú, para ello debe editar las palabras, cambiar las URLs
8 Editar el título, descripción de la imagen principal Parallax
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
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
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
Iconos Fond Awesome
11 Cambiar los iconos de Fond Awesome y las palabras del siguiente widget
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
Iconos Fond Awesome
12 Widget carrusel
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
13 Editar el título, descripción de la cuarta imagen
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
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
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
- El código que me genero como ejemplo
- Se tendrá que copiar solo la URL que esta marcada
16 Cambiar las URLs de los perfiles sociales
Busque el siguiente código
<!-- Seccion 15 -->
Le mostrara el siguiente código
<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/'/>
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
Busque el siguiente código
<!-- Seccion comentarios -->
Remplace el ID blogamptemplate por el Id de su cuenta de Disqus
Realice los cambios pertinentes tal como lo muestro en el video tutorial
18 Realizar los cambios en el Random post
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
Realice los cambios pertinentes tal como lo muestro en el video tutorial
19 Es momento de dar un clic en Guardar Tema
Diríjase a Diseño
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+
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+
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/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
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="Slideshow Amp 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="Slideshow Amp 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="Slideshow Amp 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 Caja de seguidores de Facebook en Amp HTML
Abrir el gadget Seguidores de Facebook
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
Para más detalles por favor visite el siguiente enlace:
2 Pagina estática sección servicios
Para más detalles por favor visite el siguiente enlace:
3 Pagina estática sección nosotros
Para más detalles por favor visite el siguiente enlace:
4 Pagina estática sección autor
Para más detalles por favor visite el siguiente enlace:
Bueno, si has llegado hasta aquí, muchas felicidades has realizado un gran trabajo
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 dudes en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
74 comentarios: