Widgets y Plugins para Blogger


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


Si solicitaste el envío de la plantilla Landing page Blogger, puedes seguir las instrucciones de este grandioso tutorial en el cual aprenderás como crear una página estática única al estilo web design.

Básicamente lo que vamos hacer es ingresar un código en una página de Blogger, el cual hará todo el diseño, y se transformara en una página estática única de negocios.

Una página estática sirve para mostrar un contenido único y específico dando un diseño web profesional de nuestro blog de Blogger.

¿Aún no has solicitado el envío de la plantilla Landing page Blogger?

Lo puedes realizar dirigiéndote al siguiente enlace y así puedas realizar este tutorial creado exclusivamente para todos los usuarios de la plataforma de Blogger.com


En los siguientes días se publicara los siguientes tutoriales:

Landing page página estática Nosotros

Landing page página estática publicidad

Puede ver su demostración en el siguiente blog
Video tutorial


Empezamos

Información importante

Antes que nada quiero informar que el código que van a utilizar en su página estática es tan sensible que solo se lo debe utilizar en modo HTML y si activan en modo redactar, el código se desordenara y no se mostrara correctamente el diseño de la página estática, es por ello que siempre deberá realizar los cambios pertinentes en modo HTML y no en modo Redactar.

1 Ir a Blogger

2 Un clic en Páginas

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

3 Un clic en Página nueva

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

4 Ingrese un título

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

5 Habilite en modo HTML

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

6 Ingrese las siguientes líneas de código

<!-- Inicio sección -->
<div class="wrapper">
<div class='vira-card'>
        <div class="profile-background">
            <div class="filter-black"></div>
        </div></div>
<br/>
 <div class="jumbotron text-center">
<h1>  <strong> <span style='color: #000000;'>  Landing Page Página de Blogger - Meterial Design Blogger Template FREE </span> </strong></h1>
  <p>Su primera página de negocios, limpia y segura, Diseño web Profesional </p>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
   <h3>  <strong> Web Design 1 </strong></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3><strong> Blogger Template </strong></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3><strong> Landing page Página </strong></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

<!-- Container -->
<div id="band" class="container text-center">
  <h3>Negocios locales</h3>
  <p><em>The best Blogger Template página!</em></p>
  <p>We have created a fictional band website. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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.</p>
</div>

<section class='contact2 section' id='contact'>
                <div class='container'>
                    <h2 class='title'>Contactos</h2>
                    <div class='row'>
                        <div class='col-sm-4'>
                            <div class='vira-card'>
                                <div class='vira-card-header'>
                                        <span aria-hidden='true' class='fa fa-map-o'/>
                                </span></div>
                                <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'/>
                                </span></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'/>
                                </span></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'/></span></li></a>
                                    <a href='#'><li><span class='fa fa-google-plus-official'/></span></li></a>
                                    <a href='#'><li><span class='fa fa-twitter-square '/></span></li></a>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


</div>
<!-- Fin sección -->

 <hr />

        
<style>
#content-wrapper {
width: 100%;
margin:0 auto;
padding:0px 0 0 0;
text-align:left;
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
body{
    line-height: 1.9em;
}
.profile-background {
    background-image: url('https://2.bp.blogspot.com/-64Msjj4Wfak/WAe8W-IxGHI/AAAAAAAABO8/qVnxG1YkBfI_bRiGdBI9u-l8yZqM7T6lQCLcB/s1600/negocios.jpg');
    background-position: center center;
    background-size: cover;
    height: 520px;
    position: relative;
    margin-top: -110px;
}

</style>
<style type='text/css'>
/*--- Clases ---*/
#footer, .sidebar-wrapper, .header-wrapper, #sidebar, .rmlink, #share, .widget-content, .footer, .post-title, #blog-pager, .comments {
    display: none !important; /*-- no show --*/
}
/*---Articulo big page by ayudadeblogger.com---*/
.content-wrapper {
    padding: 0 0px;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}
.main-wrapper {
    margin-left: 0px;
    margin-right: 0px;
}

#outer-wrapper {
    width: 100% !important;
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
}

.post-outer {
    background: #FFFFFF;
    margin: 0px 0 0;
    width: 100% !important;
}

.post{
    margin: 0 10px 10px 0;
    background: none;
    width: 100%;
    height: 100%;
    float: left;
    border-bottom: 1px solid #ddd;
    positon: relative;
    overflow: hidden;
    padding-bottom: 0px;
}
.sidebar .widget, .main .widget {
  margin: 0 0 10px;
  padding:0;
 }
/*---Body Background Imagen y Color---*/
body {
background: #FFF url(&#39;#&#39;) no-repeat scroll top center !important;
margin:0;
padding:0;
}
.footer-distributed {
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 55px 50px;
    margin-top: 0px;
}
.section {
    padding: 0px 0;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
}


</style>

7 Realice los siguientes cambios

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

Cambiar la URL de la imagen

Busque la siguiente dirección URL de imagen

https://2.bp.blogspot.com/-64Msjj4Wfak/WAe8W-IxGHI/AAAAAAAABO8/qVnxG1YkBfI_bRiGdBI9u-l8yZqM7T6lQCLcB/s1600/negocios.jpg

Elimine dicha URL de imagen, he ingrese una nueva dirección URL de imagen

Cambiar las URLs de las redes sociales

Busque el siguiente código

<a href='#'><li><span class='fa fa-facebook-official'/></span></li></a>
 <a href='#'><li><span class='fa fa-google-plus-official'/></span></li></a>
 <a href='#'><li><span class='fa fa-twitter-square '/></span></li></a>


Elimine los tres símbolos numerales # que están marcados de color azul y remplácelos por las direcciones URLs de sus perfiles sociales

8 Un clic en Publicar

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

9 Visite su nueva página estática

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

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir


Enviar por correo
  1. Respuestas
    1. Hola Salvha, gracias por escribir, se le envió la plantilla a su dirección de correo electrónico, por favor primero siga las instrucciones del siguiente tutorial y luego puede seguir las instrucciones de este post.

      http://www.ayudadeblogger.com/2016/10/landing-page-para-blogger.html

      Saludos.

      Eliminar
  2. hay q usar alguna plantilla para que de los efectos visuales ? por q puse el codigo en una pagina y no sale como la plantilla q se ve en el video

    ResponderEliminar
    Respuestas
    1. Hola Tommy, efectivamente los efectos surgen si usted utiliza este código en la plantilla Landing page Blogger, que se encuentra en el siguiente tutorial:

      http://www.ayudadeblogger.com/2016/10/landing-page-para-blogger.html

      Saludos.

      Eliminar
  3. Buenas Luis, felicidades, muy buenos tus templates. Una inquietud, intento cambiar el favicon pero ha sido posible. sigue el mismo de blogger.

    ResponderEliminar
    Respuestas
    1. Hola, sobre su pregunta, solo es cuestionan de esperar, hasta que se actualice desde Blogger

      Saludos.

      Eliminar
  4. hola me puedes eniar la plantilla criptotradingmx@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, sobre su solicitud se le envió la plantilla a su dirección de correo, por favor revíselo

      Saludos.

      Eliminar
  5. Saludos, podría enviarme la plantilla a reonaru@gmail.com ... de antemano gracias y mis más sinceras felicitaciones

    ResponderEliminar
    Respuestas
    1. Hola Leonard, sobre su solicitud se le envió la plantilla a su dirección de correo, por favor revíselo.

      Saludos.

      Eliminar
  6. Hola podrias enviarme la plantilla al info@t-conecta.com

    ResponderEliminar
    Respuestas
    1. Hola, sobre su solicitud se le envio la plantilla, ademas se detalla el tutorial de la plantilla solicitada en el siguiente tutorial:

      http://www.ayudadeblogger.com/2016/10/landing-page-para-blogger.html

      Saludos

      Eliminar

Discusión: