¿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.

¿Cómo crear una Landing page en una página 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

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) Amp Html Premium (1) 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