Tutorial: Creación de una landing page en Blogger con Bootstrap

  • Autor Autor josedaba
  • Fecha de inicio Fecha de inicio
J

josedaba

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola betas, hoy les dejaré este tutorial para crear una landing page para CPA o lo que desees; usaremos bootstrap y blogger.
BOOTSTRAP: Es un framework de CSS 100% adaptable para móviles, ya viene incluido sus estilos elegantes.


Screenshot_1.webp

Screenshot_2.webp

Screenshot_3.webp

Screenshot_4.webp

Screenshot_5.webp

Screenshot_6.webp

Screenshot_7.webp

Screenshot_8.webp

Screenshot_9.webp

Screenshot_10.webp

Screenshot_14.webp

Screenshot_15.webp

Screenshot_16.webp

Screenshot_17.webp

Screenshot_18.webp

Screenshot_19.webp

Screenshot_20.webp

Screenshot_21.webp

AQUÍ ESTÁ LA WEB DE BOOTSTRAP: http://getbootstrap.com/getting-started/

TAMBIÉN AQUÍ ABAJO LES DEJO EL CÓDIGO PARA QUE PRUEBEN:
ADEMÁS EL BLOGGER: Ejemplo de página web


Insertar CODE, HTML o PHP:
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Ejemplo de página web</title>

    <!-- Bootstrap desde el CDN-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <style>
        body {
            background-color: black;
        }
        
        .container {
            position: relative;
            height: 14rem;
            border: 0px solid;
        }
        
        .jumbotron {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 0px dashed deeppink;
        }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container theme-showcase" role="main">
        <div class="jumbotron">
            <form class="form-signin">
                <h2 class="form-signin-heading">Por favor registrarse</h2>
                <label for="inputName" class="sr-only">Nombre y apellido</label>
                <input type="text" id="inputName" class="form-control" placeholder="Nombre y apellido" required autofocus>
                <label for="inputEmail" class="sr-only">Correo electrónico</label>
                <input type="email" id="inputEmail" class="form-control" placeholder="Correo electrónico" required>
                <button class="btn btn-lg btn-primary btn-block" type="submit">Enviar</button>
            </form>
        </div>



    </div>
    <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>

</html>
 
[MENTION=140170]josedaba[/MENTION] Gracias por el tuto 😱.

76763d1461941073-crear-lading-page-cpa-usando-blogger-y-bootstrap-screenshot_9.jpg


Pusiste ofectos en vez de efectos acá. 😛7:
 
[MENTION=140170]josedaba[/MENTION] Gracias por el tuto 😱.

76763d1461941073-crear-lading-page-cpa-usando-blogger-y-bootstrap-screenshot_9.jpg


Pusiste ofectos en vez de efectos acá. 😛7:

Que bueno que te haya gustado, y si me equivoqué tipeando jajaja, no creo que con esa falla dejen de comprender. Gracias.
 
muchas gracias por el aporte, te dejo un me agrada y me pondré en ello a ver que hago, le veo muchas posibilidades
 
muchas gracias por el aporte, te dejo un me agrada y me pondré en ello a ver que hago, le veo muchas posibilidades

Existen con esto muchisimas posibilidades por que él código lo puedes manejar como quieras.
 
Muchas gracias, buen aporte
 
Me ha gustado tu aporte amigo, y se puede poner javascript en ese contenido?
 
Sinceramente estaba buscando algo similar, muchisimas gracias ! :encouragement::encouragement:
 
Me ha gustado tu aporte amigo, y se puede poner javascript en ese contenido?

Si se puede poner JAVASCRIPT dentro del mimos, puede ir en el header o puede ir en el body, dependiendo donde lo necesites. También pues usar un CND externo.

- - - Actualizado - - -

Sinceramente estaba buscando algo similar, muchisimas gracias ! :encouragement::encouragement:

Qué bueno que te sea útil.
 
Muy bueno tu aporte.

Tengo una pregunta con las landing, el registro de usuarios de que forma genera ganancias? en este tipo de páginas hay publicidad?

Saludos.
 
Muy bueno tu aporte.

Tengo una pregunta con las landing, el registro de usuarios de que forma genera ganancias? en este tipo de páginas hay publicidad?

Saludos.

Muy buena pregunta, esta landing es solo una muestra que se puede hacer grandes cosas que blogger y bootstrap. Tú puedes modificar el código a tu gusto, o puedes poner botes de descarga de cualquier compañía CPA y así de sencillo tienes algo bueno, rápido, responsivo y lo mejor GRATIS.
 
Atrás
Arriba