¿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




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: