¿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
3 Un clic en Página nueva
4 Ingrese un título
5 Habilite en modo HTML
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcCoAGu3e3jiLELax9JX8lwvKNvqxr_ZmWk78p_B3t0ag5cdCtCb11nG3azCoKsmRWg3Jqt3b777PckbwO9xMWwdyJj64mav8iSunQp0Qil7Hains2UbbOHh2QFIi8dsOGungE6DsZfunO/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('#') 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcCoAGu3e3jiLELax9JX8lwvKNvqxr_ZmWk78p_B3t0ag5cdCtCb11nG3azCoKsmRWg3Jqt3b777PckbwO9xMWwdyJj64mav8iSunQp0Qil7Hains2UbbOHh2QFIi8dsOGungE6DsZfunO/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
9 Visite su nueva página estática
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios