add

Landing page para Blogger


Plantilla de Blogger Landing Page, una forma de refrescar el diseño de su blog de Blogger, sobre todo una carga muy ligera al momento de visualizarse. Diseñado para mostrarse correctamente en todo tipo de pantallas, tanto para computadoras de escritorio, tabletas y Smartphones.

Landing page para Blogger

El diseño de la nueva landing page está basado en Material Design de Google, y la poderosa escritura de Bootstrap, como también de los sorprendentes estilos OWL Carousel, un impresionante estilo único. Hará que su blog se vea con un diseño web profesional.

Es impresionantemente los diseños que se puede realizar en la plataforma de Blogger sobre todo bien organizada en términos de diseño y facilidad de uso.

Landing page para Blogger

Características importantes:

- Plantilla Responsive perfectamente optimización para móviles y ordenadores.
- Dispone de secciones para crear una presentación de Landing page en cada página, con un tipo de diseño diferente cada una, para ello puede visitar las tres secciones creadas en una página de Blogger y mucho más:

http://landingpageparablogger-1.blogspot.com/p/negocios.html

Landing page para Blogger

http://landingpageparablogger-1.blogspot.com/p/publicidad.html

Landing page para Blogger

http://landingpageparablogger-1.blogspot.com/p/nosotros.html

Landing page para Blogger

- Sección de encabezado con una imagen estática y una llamada de acción con un botón sorprendente.
- Descripción
- Sección de servicios.
- Sección de texto a la derecha de la Imagen con owl carousel.
- Una sección de portafolio incluye un carrusel de vista a izquierda y derecha.
- Sección de vídeo con botón, desprende el video en un popup.
- Un menú fijo superior, menú pegajoso al momento de desplazarse hacia el final de la página.
- Un nuevo menú fijo diferente al menú principal, este se presentara solo en las entradas y paginas estáticas.
- Iconos sociales flotantes en cada entrada del blog

Landing page para Blogger

- Sistema de comentarios materializado

Landing page para Blogger

- Sidebar materializado

Landing page para Blogger

- Artículos relacionados materializado en cada entrada

Landing page para Blogger

- 2 Menús responsive

Landing page para Blogger

Landing page para Blogger

- Un widget de suscripciones ubicado en la página principal del blog.
- Sección de contactos, con dirección, teléfono y correo electrónico, un diseño único.
- Sección de pie de página footer.
- SEO amigable
- Adaptación a cualquier pantalla
- Sensible
- Responsive
- Carga ligera
- No utilizamos código encriptado.
- Entradas populares mejoradas
- Labels estilos
- Estilos predefinidos
- Iconos Font Awesome, puede cambiar los iconos Font Awesome, por los que llene su propósito, para ello puede dirigirse a los siguientes recursos:


Demostración

Puede ver el desempeño de la Landing page en el siguiente blog de demos


¿Cómo descargar la plantilla?

Tendrá que dejar un comentario pidiendo que se le envíe la Landing page, para ello, deje un comentario incluyendo su dirección de correo electrónico, en un término de 12 horas se le enviara el archivo XML de la plantilla Landing page Blogger.

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 los cambios proporcionados en este tutorial, para más detalles específicos, puede visitar el siguiente enlace:


Empezamos

Video Tutorial


Instrucciones:

1 Ir a Blogger.com

2 Un clic en Plantilla


Landing page para Blogger

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

Landing page para Blogger

4 Un clic en “Examinar”

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

Landing page para Blogger

6 Un clic en “Subir”

Landing page para Blogger

7 Listo ahora ya tiene insertado la plantilla Landing page en su blog

Continuamos con el tutorial

Las imágenes, el menú, como también el video y las descripciones se encuentran dentro de la plantilla que actualmente descargo, para ello siga las siguientes instrucciones para realizar sus cambios:

1 Un clic en “Plantilla

Landing page para Blogger

2 Un clic en “Editar HTML

Landing page para Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Landing page para Blogger

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.

Landing page para Blogger

3 Cambiar la imagen de presentación

Landing page para Blogger

Busca este código

/* Seccion 1 imagen */

Le mostrara el siguiente código

background-image: url(https://2.bp.blogspot.com/-8i0gnrV-PEo/WAcET2ak1WI/AAAAAAAABOI/JZFeZz7myIExlADyh-ZpF93DpS3RKBiJACLcB/s1600/76.jpg);

Cambie la dirección URL que está marcada de color amarillo y remplácelo por la dirección URL de una imagen.

4 Cambiar la imagen de la presentación Landing Page Responsive

Landing page para Blogger

Busca este código

/* Seccion 2 imagen */

Le mostrara el siguiente código

background-image: url(https://2.bp.blogspot.com/-fHNKW8L38G8/WAcK7MRMvWI/AAAAAAAABOg/81y_SV1LE_w0p_bzRvD4ourgvzrZGrdlQCLcB/s640/33.jpg);

Cambie la dirección URL que está marcada de color amarillo y remplácelo por la dirección URL de una imagen.

5 Cambiar la imagen del siguiente widget

Landing page para Blogger

Busca este código

/* Seccion 3 imagen */

Le mostrara el siguiente código

background-image: url(https://3.bp.blogspot.com/-q0_Iqfu_X5o/WAcInvLJJbI/AAAAAAAABOU/fopxAr7sqCgJV1G_Kof5qfV3oYpBwjLpQCLcB/s1600/84.jpg);

Cambie la dirección URL que está marcada de color amarillo y remplácelo por la dirección URL de una imagen.

6 Cambiar la imagen de la sección de video

Landing page para Blogger

Busca este código

/* Seccion 4 imagen */

Le mostrara el siguiente código

background-image: url(https://2.bp.blogspot.com/--1LuHeW9OJA/WAcLlpDLEjI/AAAAAAAABOk/PUBs4lGPQ98v6YyZVYZIn-dKTw3SXBmQgCLcB/s1600/52.jpg);

Cambie la dirección URL que está marcada de color amarillo y remplácelo por la dirección URL de una imagen.

7 Cambiar la imagen que se encuentra en la sección de suscripción

Landing page para Blogger

Busca este código

/* Seccion 5 imagen */

Le mostrara el siguiente código

background-image: url(https://4.bp.blogspot.com/-4s9FeMN2n-Y/WAcL_u0PbMI/AAAAAAAABOo/1UnH48uLkHoWof9Fae3GGEX8OeIQsTSHQCLcB/s1600/87.jpg);

Cambie la dirección URL que está marcada de color amarillo y remplácelo por la dirección URL de una imagen.

- Hemos terminado el cambio de las imágenes principales

Ahora sigamos con el siguiente tutorial

1 Sección menú principal

Landing page para Blogger

Busca este código

<!-- Seccion 1 -->

Le mostrara un código similar al siguiente

<ul>
                  <a href='/'><li>Inicio</li></a>
                    <a href='#about'><li>Nosotros</li></a>
                    <a href='#expertise'><li>Compañía</li></a>
                    <a href='#workstation'><li>Portafolio</li></a>
                    <a href='#team'><li>Negocios</li></a>
                    <a href='#contact'><li>Contactos</li></a>
                    <a href='http://landingpageparablogger-1.blogspot.com/p/negocios.html'><li>Página Landing page</li></a>
                   </ul>

Cambie las palabras que están marcadas de color rojo, por las que usted necesite mostrar

Además, existe una dirección URL llamada http://landingpageparablogger-1.blogspot.com/p/negocios.html cambie dicha dirección por la que usted quiera

2 Cambiar el texto que dice Ayudadeblogger

Landing page para Blogger

Busca este código

<!-- Seccion 2 -->

Le mostrara un código similar al siguiente

<a href='/'><span class='fa fa-home'>Ayudadeblogger</span></a>

Cambie Ayudadeblogger por el nombre de su blog

3 Texto de bienvenida

Landing page para Blogger

Busca este código

<!-- Seccion 3 -->

Le mostrara un código similar al siguiente

<span style='color: #ffffff;'>   <h1>Bienvenidos, <strong> Amazing Template For Blogger</strong></h1></span>
                           <p>   <span style='color: #ffffff;'>   Somos la mejor compañía de servicios </span></p>
                                <a class='btn vira-btn' href='http://landingpageparablogger-1.blogspot.com/p/negocios.html'>Información</a>
                            </div>

Cambie las palabras que están marcadas de color rojo, como también la dirección URL que dice http://landingpageparablogger-1.blogspot.com/p/negocios.html por una dirección URL de su blog

4 Cambiar el texto y la imagen que se encuentra en el widget “Nuestra compañía”

Landing page para Blogger

Busca este código

<!-- Seccion 4 -->

Le mostrara un código similar al siguiente

<div class='col-sm-8 col-sm-offset-2'>
                            <h2 class='title'>Nuestra compañía</h2>
                            <p>
                                Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto.
                            </p>
                          <img src='https://4.bp.blogspot.com/-Oe-uRIyeb6U/WAbp773GQnI/AAAAAAAABNU/N_v46yhoNvE-IzsCxFVxSRdOtvyuD0LiQCLcB/s320/compania.jpg'/>
                               </div>

Cambie todo el texto que esta marcado de color rojo, también remplace la dirección URL https://4.bp.blogspot.com/-Oe-uRIyeb6U/WAbp773GQnI/AAAAAAAABNU/N_v46yhoNvE-IzsCxFVxSRdOtvyuD0LiQCLcB/s320/compania.jpg por una nueva imagen

5 Cambiar las palabras del widget “Nuestros servicios”

Landing page para Blogger

Busca este código

<!-- Seccion 5 -->

Le mostrara un código similar al siguiente

<div class='container'>
                    <h2 class='title'>Nuestros servicios</h2>
                    <div class='row'>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                    <div class='card-icon'>
                                        <span aria-hidden='true' class='fa fa-desktop'/>
                                    </div>
                                </div>
                                <div class='vira-card-content'>
                                    <h3>Diseño</h3>
                                    <p>
                                        Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                    <div class='card-icon'>
                                        <span aria-hidden='true' class='fa fa-bookmark'/>
                                    </div>
                                </div>
                                <div class='vira-card-content'>
                                    <h3>Proyectos</h3>
                                    <p>
                                        Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                    <div class='card-icon'>
                                        <span aria-hidden='true' class='fa fa-newspaper-o'/>
                                    </div>
                                </div>
                                <div class='vira-card-content'>
                                    <h3>Marketing</h3>
                                    <p>
                                        Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto
                                    </p>
                                </div>

Cambie todas las palabras que están marcadas de color rojo, además si necesita remplazar los iconos por otros, solo basta con cambiar los tres siguientes:

fa fa-desktop

fa fa-bookmark

fa fa-newspaper-o

Pude dirigirse a los iconos de Font Awesome que se encuentra en el siguiente link


6 Cambiar las palabras del widget “Landing Page Responsive”

Landing page para Blogger

Busca este código

<!-- Seccion 6 -->

Le mostrara un código similar al siguiente

<div class='col-sm-5 section'>
                            <h2 class='title'>Landing Page Responsive</h2>
                            <div class='owl-carousel' id='expert-slider'>
                                <div class='item'>
                                    <p>
                                        1. Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos.
                                    </p>
                                </div>
                                <div class='item'>
                                    <p>
                                        2. Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de &quot;Lorem Ipsum&quot; va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo.
                                    </p>
                                </div>
<div class='item'>
                                    <p>
                                        3. Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de &quot;Lorem Ipsum&quot; va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo.
                                    </p>
                                </div>
<div class='item'>
                                    <p>
                                        4. Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de &quot;Lorem Ipsum&quot; va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo.
                                    </p>
                                </div>

Cambie todas las palabras que están marcadas de color rojo

7 Cambiar las palabras del siguiente widget

Landing page para Blogger

Busca este código

<!-- Seccion 7 -->

Le mostrara un código similar al siguiente

    <p>
                               Ayudadeblogger.com The Best for you. Blogger Template Responsive
                           </p>
                           <p class='author'>Material design Blogger</p>

Cambie todas las palabras que están marcadas de color rojo

8 Cambiar las imágenes, texto, descripción, URLs, del slider Carrusel “Portafolio”

Landing page para Blogger

Busca este código

<!-- Seccion 8 -->

Le mostrara un código similar al siguiente

<h2 class='title'>Portafolio</h2>
  <div class='owl-carousel' id='workstation-slider'>
 <div class='item'>
 <div class='vira-card'>
  <div class='vira-card-header'>
 <img class='img-responsive' src='https://3.bp.blogspot.com/-yukaunIvt1A/WAbwd6srURI/AAAAAAAABNs/SVCeg2D_pXwwBaxAbeqCd-QmofhigPY0wCLcB/s1600/1.jpg'/>
             </div>
     <div class='vira-card-content'>
  <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Design Responsive</span></a></h3>
               <p>
  Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='item'>
    <div class='vira-card'>
     <div class='vira-card-header'>
  <img class='img-responsive' src='https://3.bp.blogspot.com/-Qkpu95ZQXiQ/WAbwdzgaoSI/AAAAAAAABNo/AfVeECtUpcwiRxMz3qh-u3TEsAEPXLVxQCLcB/s1600/2.jpg'/>
             </div>
         <div class='vira-card-content'>
     <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Design Responsive</span></a></h3>
                       <p>
     Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='item'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
 <img class='img-responsive' src='https://1.bp.blogspot.com/-Bs_6qMkA9Us/WAbwd5OctnI/AAAAAAAABNk/GPVaCj7-EWsdLlx5VUQ5NKcHkiDWjPDfQCLcB/s1600/3.jpg'/>
                                </div>
                                <div class='vira-card-content'>
   <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Design Responsive</span></a></h3>
                    <p>
  Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto.
                </p>
               </div>
                            </div>
                        </div>
                        <div class='item'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
   <img class='img-responsive' src='https://1.bp.blogspot.com/-4jZwf_fCYtI/WAbweQRQVBI/AAAAAAAABNw/wQThH8geYjUHyqYiWhdHv9uclIPmUQwywCLcB/s1600/4.jpg'/>
       </div>
       <div class='vira-card-content'>
     <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Design Responsive</span></a></h3>
                                    <p>
      Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='item'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
   <img class='img-responsive' src='https://1.bp.blogspot.com/-CMhhkfjLkyE/WAbweZPxoyI/AAAAAAAABN0/FlJzIiq4dEYMvNAf_pf1rUV8qrD2pBEogCLcB/s1600/5.jpg'/>
                                </div>
                                <div class='vira-card-content'>
                                    <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Design Responsive</span></a></h3>
                                    <p>
 Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='item'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
 <img class='img-responsive' src='https://4.bp.blogspot.com/-LP6-mMKwUOs/WAbwepLIy9I/AAAAAAAABN4/aOCI0yS9Tuw3miGkLoxdfZENeh4KTIVoQCLcB/s1600/6.jpg'/>
                                </div>
                                <div class='vira-card-content'>
 <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Design Responsive</span></a></h3>
                                    <p>
  Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto.
                                     
                                    </p>
                                </div>

Realice los siguientes cambios:

He marcado de tres diferentes colores para detallar cada punto en el cual tendrá que realizar sus cambios

Las direcciones URLs que están marcadas de color amarillo pertenecen a las imágenes que actualmente se encuentra en el slider carrusel, elimine cada una de ellas y remplácelas por sus imágenes

Cambie todo el texto que está marcado de color rojo.

Cambie las direcciones URLs que están marcadas de color azul, por las direcciones URLs de sus entradas

9 Video popup

Landing page para Blogger


Busque este código

<!-- Seccion 9 -->

Le mostrara un código similar al siguiente

<div class='col-sm-12'>
                            <span>Video promocional</span>
                            <a class='popup-youtube btn' href='https://www.youtube.com/watch?v=BCDaevsdzIc'><span class='fa fa-play'/></a>
                            <span>Ayudadeblogger.com</span>

Cambie las palabras que están marcadas de color rojo

Cambie la dirección URL que está marcada de color amarillo, y remplácelo por la dirección URL de su video de Youtube

10 Realizar los cambios en el widget “Negocios”

Landing page para Blogger

Busca este código:

<!-- Seccion 10 -->

Le mostrara un código similar al siguiente

   <div class='container'>
                    <h2 class='title'>Negocios</h2>
                    <div class='row'>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                  <img class='img-responsive' src='https://1.bp.blogspot.com/-4jZwf_fCYtI/WAbweQRQVBI/AAAAAAAABNw/wQThH8geYjUHyqYiWhdHv9uclIPmUQwywCLcB/s1600/4.jpg'/>
                                </div>
                                <div class='vira-card-content'>
                                    <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Publicadad</span></a></h3>
                                    <p>
                                       Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto
                                    </p>
                                    <div class='social-icons'>
                                        <ul>
                                            <a href='#'><li><span class='fa fa-facebook-official'/></li></a>
                                            <a href='#'><li><span class='fa fa-google-plus-official'/></li></a>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                  <img class='img-responsive' src='https://4.bp.blogspot.com/-LP6-mMKwUOs/WAbwepLIy9I/AAAAAAAABN4/aOCI0yS9Tuw3miGkLoxdfZENeh4KTIVoQCLcB/s1600/6.jpg'/>
                                </div>
                                <div class='vira-card-content'>
 <h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Marketing</span></a></h3>
                                     <p>
                                        Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto
                                    </p>
                                    <div class='social-icons'>
                                        <ul>
                                            <a href='#'><li><span class='fa fa-facebook-official'/></li></a>
                                            <a href='#'><li><span class='fa fa-google-plus-official'/></li></a>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                  <img class='img-responsive' src='https://1.bp.blogspot.com/-Bs_6qMkA9Us/WAbwd5OctnI/AAAAAAAABNk/GPVaCj7-EWsdLlx5VUQ5NKcHkiDWjPDfQCLcB/s1600/3.jpg'/>
                                </div>
                                <div class='vira-card-content'>
<h3><a href='http://www.ayudadeblogger.com/' target='_blank'><span style='color: #000000;'>Social</span></a></h3>
                                    <p>
                                        Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto
                                    </p>
                                    <div class='social-icons'>
                                        <ul>
                                            <a href='#'><li><span class='fa fa-facebook-official'/></li></a>
                                            <a href='#'><li><span class='fa fa-google-plus-official'/></li></a>
                                        </ul>
                                    </div>

Realice los siguientes cambios:

He marcado de cuatro colores diferentes para que pueda realizar los cambios en el widget

Existen tres imágenes, las cuales están marcadas de color amarillo, remplace cada una de ellas por sus imágenes

Cambie las palabras que están marcadas de color rojo

Cambie las direcciones URLs que están marcadas de color azul, por las direcciones URLs de sus entradas que quiera destacar en este widget

Existen dos iconos sociales, el uno es de Facebook y el otro de Google+, tendrá que insertar la dirección URL de sus perfiles sociales eliminando los símbolos numerales # que están marcados de color verde

11 Editar el widget Suscripciones

Landing page para Blogger

Busca este código

<!-- Seccion 11 -->

Le mostrara un código similar al siguiente

<p>Ayudadeblogger.com</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger' class='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='foroayudadeblogger'/>

Remplace las tres palabras que están marcadas de color amarillo la cual dice:

foroayudadeblogger

Cámbielo por el nombre de su feedburnner, recuerde poner el nombre de su feedburnner en los tres lugares que le indique

12 Editar el widget Contactos

Landing page para Blogger

Busca este código

<!-- Seccion 12 -->

Le mostrara un código similar al siguiente

<div class='vira-card-content'>
                                    <h3>Dirección</h3>
                                    <p>
                                        Bellavista alta, Tena, Ecuador
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                        <span aria-hidden='true' class='fa fa-phone'/>
                                </div>
                                <div class='vira-card-content'>
                                    <h3>Teléfono</h3>
                                    <p>
                                        +593 6 3018665
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                        <span aria-hidden='true' class='fa fa-paper-plane'/>
                                </div>
                                <div class='vira-card-content'>
                                    <h3>Email</h3>
                                    <p>
                                        ayudadeblogger@gmail.com
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-12'>
                            <div class='social-icons'>
<h3>Síguenos en nuestras redes sociales</h3>
                                <ul>
                                    <a href='#'><li><span class='fa fa-facebook-official'/></li></a>
                                    <a href='#'><li><span class='fa fa-google-plus-official'/></li></a>
                                    <a href='#'><li><span class='fa fa-twitter-square '/></li></a>
                                </ul>
                            </div>

Cambie las palabras y números que están marcadas de color rojo

Existen tres símbolos numerales # marcados de color azul, elimine cada uno de ellos y remplácelos por las direcciones URLs de sus perfiles sociales

13 Conjuración del Footer

Landing page para Blogger

Busca este código

<!-- Seccion 13 -->

Le mostrara un código similar al siguiente

<h3>Blogger<span>Template</span></h3>

                                                               <p class='footer-links'>
                                                                              <a href='#'>Inicio</a>
                                                                              &#183;
                                                                              <a href='#'>Blog</a>
                                                                              &#183;
                                                                              <a href='#'>Precios</a>
                                                                              &#183;
                                                                              <a href='#'>Nosotros</a>
                                                                              &#183;
                                                                              <a href='#'>Faq</a>
                                                                              &#183;
                                                                              <a href='#'>Contactos</a>
                                                               </p>

                                                               <p class='footer-company-name'>Copyright @ 2016. All Rights Reserved Ayudadeblogger</p>
                                               </div>

                                               <div class='footer-center'>

                                                               <div>
                                                                              <i class='fa fa-map-marker'/>
                                                                              <p><span>Av. 15 de Noviembre</span> Tena, Ecuador</p>
                                                               </div>

                                                               <div>
                                                                              <i class='fa fa-phone'/>
                                                                              <p>+593 06 3018665</p>
                                                               </div>

                                                               <div>
                                                                              <i class='fa fa-envelope'/>
                                                                              <p><a href='mailto:ayudadeblogger@gmail.com'>ayudadeblogger@gmail.com</a></p>
                                                               </div>

                                               </div>

                                               <div class='footer-right'>

                                                               <p class='footer-company-about'>
                                                                              <span>Sobre la compañía</span>
                                                                              Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
                                                               </p>

                                                               <div class='footer-icons'>

                                                                              <a href='#'><i class='fa fa-facebook'/></a>
                                                                              <a href='#'><i class='fa fa-twitter'/></a>
                                                                              <a href='#'><i class='fa fa-linkedin'/></a>
                                                                              <a href='#'><i class='fa fa-github'/></a>

                                                               </div>

Realice estos cambios:

Cambie las palabras que están arcadas de color rojo

Elimine los símbolos numerales # que están marcados de color verde y remplácelos por las direcciones URLs que quiera mostrar

14 Edición del segundo menú, el que se va a mostrar en las entradas y en las páginas

Landing page para Blogger

Busca el siguiente código

<!-- Seccion 14 -->

Le mostrara el siguiente código

<a href='/'><img alt='Avatar' class='img-responsive img-circle avatar' src='https://2.bp.blogspot.com/-4ANrf7f5hwg/V_Mk9eB_DpI/AAAAAAAABHw/VEqTldWadmUPZwoNX9wuC1p_2N4DILROACLcB/s640/56.jpg'/></a>
            <div class='navbar-header'>
                <button class='navbar-toggle' data-target='#myNavbar' data-toggle='collapse' type='button'>
                    <span class='icon-bar'/>
                    <span class='icon-bar'/>
                    <span class='icon-bar'/>
                </button>
            </div>
            <div class='collapse navbar-collapse' id='myNavbar'>
                <ul class='nav navbar-nav'>
                  <li><a href='/'>Inicio</a></li>
                    <li><a href='http://landingpageparablogger-1.blogspot.com/p/negocios.html'>Negocios</a></li>
                    <li><a href='http://landingpageparablogger-1.blogspot.com/p/nosotros.html'>Nosotros</a></li>
                    <li><a href='http://landingpageparablogger-1.blogspot.com/p/publicidad.html'>Publicidad</a></li>
                    <li><a href='#'>Diseño</a></li>
                    <li><a href='#'>Contactos</a></li>
                </ul>

Realice estos cambios:

He marcado de tres colores diferentes en los cuales tendrá que realizar sus cambios

Cambia la dirección URL que está marcada de color amarillo, por la dirección URL de una imagen

Cambia las palabras que están marcadas de color rojo

Elimina los símbolos numerales # que están marcados de color verde como también las tres direcciones URLs y remplázalos por las direcciones URLs de las entradas o páginas que actualmente tiene en su blog

Eso es todo, un clic en Guardar plantilla


Felicidades ahora ya dispones de una Plantilla exclusiva para blogs de Blogger con un diseño web profesional

¿Cómo crear una Landing page en una página de Blogger?

Además de la Landing page que se le proporciono, usted podrá seguir los otros tutoriales para crear en una página estática de Blogger tipo Landing page con una presentación única, para visualizar los diseños creados en las páginas de Blogger puede mirar las siguientes URLs


Landing page para Blogger



Landing page para Blogger



Landing page para Blogger


Muy pronto se publicara estos tutoriales siempre y cuando esté utilizando esta plantilla Landing page para Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

29 comentarios:

  1. Si son tan amables en enviármela a itunesplusm4a.net@gmail.com Gracias de ante mano

    ResponderEliminar
    Respuestas
    1. Hola Itunes, gracias por escribir, sobre lo solicitado, ya le envíe la plantilla Landing page Blogger a su cuenta de correo, revíselo.

      Saludos.

      Eliminar
  2. Respuestas
    1. Hola HellTraxer, es bueno saber que le ha gustado la plantilla

      Saludos

      Eliminar
  3. Se ve estupenda. Si son tan amables en enviármela a cajonpostal-it@yahoo.com Gracias de ante mano

    ResponderEliminar
    Respuestas
    1. Hola Grover, gracias por escribir, se le envió el archivo xml de la plantilla, por favor revise su cuenta de correo.

      Saludos.

      Eliminar
  4. Hola buen dia me gustan muchos sus plantillas muy buen trabajo me es de mucha ayuda, quisiera poder tener esta plantilla me la pueden mandar blogsportonlinehd@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar, sobre su solicitud, se le envío el archivo XML de la plantilla a su cuenta de correo electrónico, por favor revíselo.

      Saludos.

      Eliminar
  5. Hola muy buena landing page, me gustaria me enviaran el codigo a chavezjn@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola EADSeduca, gracias por escribir, sobre lo solicitado, se le envío el archivo XML de la plantilla Landing Page Blogger, por favor revise su correo electrónico

      Saludos.

      Eliminar
  6. Saludos, me podrian enviar la plantilla, esta genial!! mi correo es: luiseosorioz@gmail.com gracias.

    ResponderEliminar
    Respuestas
    1. Hola Centurion, gracias por escribir, sobre lo solicitado se le envío el Archivo XML de la Plantilla Landing Page a su dirección de correo electrónico, por favor revíselo

      Saludos.

      Eliminar
  7. me interesa la plantilla, midian.socialmedia@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, gracias por comentar, se le envío el archivo XML de la plantilla Landing Page, por favor revise su correo electrónico

      Saludos

      Eliminar
  8. Hola, por favor me compartes la plantilla mi email es daniel@plandedesarrollo.com
    Luis vos de que país sos?

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, se le envío la plantilla Landing Page Blogger a la dirección de corro electrónico que usted indico, por favor revise su correo.

      Saludos.

      Eliminar
  9. Hola, me gustaria tener esta plantilla para futuras paginas, gracias

    ResponderEliminar
    Respuestas
    1. Hola Channel, gracias por escribir, para poderle enviar la plantilla, por favor hágame saber la dirección de su correo electrónico.

      Saludos

      Eliminar
  10. me interesa la plantilla, midian.socialmedia@gmail.com

    ResponderEliminar
  11. me interesa la plantilla, sitebarrasfest@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, se le envió la plantilla Landing page a sus dos direcciones de correo electrónico.

      Saludos.

      Eliminar
  12. Me encantaría tener esta plantilla! Muchas gracias por la info :)

    streya_zgz@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hola Estrella, gracias por escribir, con lo solicitado, se le envió el archivo XML de la plantilla, por favor revise su correo electrónico

      Saludos.

      Eliminar
  13. Esta platilla me ayudaría mucho, me la pueden enviar a aguaramatog@gmail.com muchas gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola Aldemar, gracias por escribir, fue enviada la plantilla a su dirección de correo, por favor revise su correo electrónico

      Saludos.

      Eliminar
  14. hola muy buena plantilla... me la podrías enviar...este es mi mail: patriciayala-82@hotmail.com
    muchas gracias...
    Patricia

    ResponderEliminar
    Respuestas
    1. Hola Patricia, gracias por escribir, se le envió la plantilla Landing page a su dirección de correo, por favor revíselo

      Saludos.

      Eliminar

Discusión

person_pin 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) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) 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 (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) 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 (10) Material Design Blogger (2) 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 (42) Plantillas Landing page para Blogger (3) 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 (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios