Landing page para Blogger – Template Café

Un nuevo diseño a la hora de presentar nuestro negocio en línea y sobre todo que sea responsive adaptado a todo tipo de pantallas tanto para computadoras de escritorio como para dispositivos móviles.

Template Café, una Landing page limpia y ligera, sin código encriptado, y fácil de usar.

Características:

Menú desplegable Responsive
Parallax página principal
Secciones, imágenes, detalles
Plantilla Responsive
Caja Artículos relacionados estilo Material design
Formulario de contactos estilo Material design
Entradas polulares estilo Material design
4 Footers
Fond Awesome
Bootstrap







A continuación mire su demostración en el blog de demos, como también puede descargar la plantilla completamente gratis

Nota importante:

Antes de empezar este tutorial, se recomienda realizar una copia de seguridad de su blog de Blogger, o primero practicar en un blog de ejemplos. Si no sabe cómo realizar una copia de seguridad de su blog, puede seguir las instrucciones del siguiente enlace:

Realizar una copia de seguridad de mi blog de Blogger

Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:


Empezamos

Video Tutorial


Instrucciones:

1 Ir a Blogger.com

2 Un clic en Tema


3 Un clic en “Crear/Restablecer copia de seguridad”



4 Un clic en “Examinar”

5 Un clic en el archivo XML que se le envío


6 Un clic en “Subir”


7 Listo ahora ya tiene insertado la plantilla Landing page en su blog

Tutorial

El menú, las imágenes, algunos textos se encuentran en el HTML de la plantilla y para ello tendrá que ir realizando sus cambios

1 Un clic en Plantilla


2 Un clic en “Editar HTML

Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

1 Cambiar la imagen de portada “Parallax”


Busque el siguiente código

/* Seccion 1 */

Le mostrara un código similar al siguiente:


.parallax-amp {

    background: url(https://4.bp.blogspot.com/-EeyV_QdYWNY/WUsakGacg1I/AAAAAAAABgg/WycilbkfHZY_MNh-l-d-kAcUrHQ0qBgHwCLcBGAs/s1600/portada1.jpg) no-repeat center center;


Realice el siguiente cambio:

Elimine la URL que está marcada de color amarillo y remplácelo por una nueva URL imagen

2 Cambiar la segunda imagen de portada


Busque el siguiente código

/* Seccion 2 */

Le mostrara un código similar al siguiente:


#static-image {

    background-image: url(https://3.bp.blogspot.com/-UPiTPkpZ33k/WUtgFU8UhVI/AAAAAAAABgw/YMMZgv3oAdMXRdYKVf7_p7DaEUa2xx4bACLcBGAs/s1600/imagen6.jpg);


Realice el siguiente cambio:

Elimine la URL que está marcada de color amarillo y remplácelo por una nueva URL imagen

3 Cambiar la tercera imagen de portada


Busque el siguiente código

/* Seccion 3 */

Le mostrara un código similar al siguiente:


#static-image-2 {

    background-image: url(https://1.bp.blogspot.com/-_F8OJ7T3hHY/WUri-1uYkPI/AAAAAAAABfY/l2HL0n-m7oA50ipJ6gUuRrZVVgpszq_0wCLcBGAs/s1600/imagen2.jpg);


Realice el siguiente cambio:

Elimine la URL que está marcada de color amarillo y remplácelo por una nueva URL imagen

4 Realizar los cambios en el Menú desplegable


Busque el siguiente código

<!-- Seccion 4 -->

Como ejemplo le mostrara un código similar al siguiente:


<a class='navbar-brand' href='/'>Template Café</a>

</div>

<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>

<ul class='nav navbar-nav'>

<li class='active'><a href='/'>Inicio</a></li>

<li class='dropdown'>

<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown <b class='caret'/></a>

<ul class='dropdown-menu'>

<li><a href='#'>Farándula</a></li>

<li class='divider'/>

<li><a href='#'>Noticias</a></li>

<li class='divider'/>

<li><a href='#'>Espectáculos</a></li>

<li class='divider'/>

<li><a href='#'>Videos</a></li>

<li class='divider'/>

<li><a href='#'>Chats</a></li>


Nota: este es un ejemplo, en el código encontraran más códigos similares al de este ejemplo

Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

Cambie los símbolos # numerarles por las URLs que va a mostrar

5 Realizar los cambios en el título del Parallax


Busque el siguiente código

<!-- Seccion 5 -->

Encontrará un código similar al siguiente


<div class='container'>

<center>

<h2 class='light text-parallax'>

Template Café

</h2>

  </center>

  <br/>

<center>

<p>

Diseño - Inspiración - Tecnología

</p>

  </center>

</div>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

6 Realizar los cambios de la siguiente sección


Busque el siguiente código

<!-- Seccion 6 -->

Le mostrara un código similar al siguiente


<h5 class='block-title hint-text no-margin'>Explore</h5>

<h2 class='m-t-5'>

Diferentes maneras de organizar su contenido.</h2>

<div class='col-sm-10 no-padding'>

<h4 class='hint-text'>

Planeamos cada parte del diseño, sólo tienes que pensar en el contenido</h4>

<p class='m-t-30 fs-12 font-arial hint-text col-sm-10 no-padding'>

Diseñado especialmente para ti, dando atención al detalle, este es un contenido creativo, para llenar ciertas partes un sitio web.</p>

</div>

</div>

<div class='col-sm-6 xs-p-t-30'>

<div class='p-l-30 xs-no-padding'>

<div class='col-sm-6 no-padding m-b-20 m-t-20'>

<p class='m-t-30 fs-12 font-arial hint-text'>Diseñado especialmente para ti, dando atención al detalle, este es un contenido creativo, para llenar ciertas partes un sitio web.</p>

</div>

<div class='clearfix'/>

<p>Our motivation &quot;Perfection simplified&quot; helps to craft meaningful experiences for the people around us, This mission inspires us to jump out of bed each day and guides every aspect of what we do.

</p>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

7 Realizar los cambios de la siguiente sección


Busque el siguiente código

<!-- Seccion 7 -->

Le mostrara un código similar al siguiente


<div class='col-sm-6'>

  <h2>THE BAKES</h2>

<p>We get down and dirty with our bakes. We make everything from scratch, in-house, and freshly bake every single day. We trailed countless recipes for almost a year, and only products that made us close our eyes and smile made the final cut. We are emotionally invested in every extra- virgin olive oil cake, peanut butter cookie and financier that leaves the kitchen, and were giggly for a good 24 hours when a customer told us our banana bread reminds her of home.   </p>

   </div>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

8 Realizar los cambios de la siguiente sección


Busque el siguiente código

<!-- Seccion 8 -->

Le mostrara un código similar al siguiente


<div class='p-r-40 md-pr-30'>

<center>

<i class='fa fa-briefcase m-b-20'/>

  </center>

<h6 class='block-title p-b-5'>Launch Design <i class='fa fa-chevron-right m-l-10'/></h6>

<p class='m-b-30'>Awesome notepad app. It gives you a quick and simple notepad editing experience when you write notes.</p>

<p class='muted font-arial small-text col-sm-9 no-padding'>On a several block radius of terrible chain cafes, Seven Grams is a total breath of fresh air.</p>

</div>

<div class='visible-xs b-b b-grey-light m-t-30 m-b-30'/>

</div>


<div class='col-sm-4 no-padding'>

<div class='p-r-40 md-pr-30'>

  <center>

<i class='fa fa-windows m-b-20'/>

  </center>

<h6 class='block-title p-b-5'>Award Wining <i class='fa fa-chevron-right  m-l-10'/></h6>

<p class='m-b-30'>Quick chat helps you to Keep in touch with your friends and colleagues while working. It has a unique responsive design.</p>

<p class='muted font-arial small-text col-sm-9 no-padding'>On a several block radius of terrible chain cafes, Seven Grams is a total breath of fresh air</p>

</div>

<div class='visible-xs b-b b-grey-light m-t-30 m-b-30'/>

</div>


<div class='col-sm-4 no-padding'>

<div class='p-r-40 md-pr-30'>

<center>

<i class='fa fa-h-square m-b-20'/>

  </center>

<h6 class='block-title p-b-5'>Shop ready <i class='fa fa-chevron-right  m-l-10'/></h6>

<p class='m-b-30'>This is a very young collection of charts, with the goal of keeping these components very customizable.</p>

<p class='muted font-arial small-text col-sm-9 no-padding'>On a several block radius of terrible chain cafes, Seven Grams is a total breath of fresh air</p>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

9 Realizar los cambios de la siguiente sección


Busque el siguiente código

<!-- Seccion 9 -->

Le mostrara un código similar al siguiente


<div class='col-sm-6'>

  <h2>THE BREW</h2>

<p>We aspire to make the perfect cup of coffee with the perfect shot of espresso. The perfect shot you would get when you step into a tiny espresso bar established over a century ago in a picturesque Italian village. And the barista making your shot is making it the same way his father made it, and his grandfather before him made it: He takes exactly 7 grams of the purest, best quality, freshly ground coffee bean, and, with the craft passed down to him from generations of experience, brews you a magical cup of coffee. We&#8217;re about following the Italian craft to the gram. Guess we&#8217;re pretty traditional when it comes to our brew.  </p>

   </div>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

10 Realizar los cambios de la siguiente sección


Busque el siguiente código

<!-- Seccion 10 -->

Le mostrara un código similar al siguiente


<h5 class='block-title text-white no-margin'>Template Café </h5>

<h1 class='text-white col-sm-12 m-t-5 m-b-30'>The best Blogger Template Free</h1>

</div>

<div class='row m-t-30'>

<div class='col-sm-4'>

<div class='progress progress-small transparent-white m-t-15'>

<div class='progress-bar progress-bar-white' data-pages-animate='progressbar' data-percentage='79%'/>

</div>

<h3 class='no-margin text-white'>

<span data-animation-duration='800' data-pages-animate='number' data-value='100'>0</span>%

</h3>

<p class='font-arial hint-text fs-12 text-white'>

HTML5

</p>

<p/>

</div>

<div class='col-sm-4'>

<div class='progress progress-small transparent-white m-t-15'>

<div class='progress-bar progress-bar-white' data-pages-animate='progressbar' data-percentage='79%'/>

</div>

<h3 class=' no-margin text-white'>

<span data-animation-duration='800' data-pages-animate='number' data-value='100'>0</span>%

</h3>

<p class='font-arial hint-text fs-12 text-white'>

CSS

</p>

<p/>

</div>

<div class='col-sm-4'>

<div class='progress progress-small transparent-white m-t-15'>

<div class='progress-bar progress-bar-white' data-pages-animate='progressbar' data-percentage='79%'/>

</div>

<h3 class=' no-margin text-white'>

<span data-animation-duration='800' data-pages-animate='number' data-value='98'>0</span>%

</h3>

<p class='font-arial hint-text fs-12 text-white'>

Javascript

</p>

<p/>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

11 Realizar los cambios de la siguiente sección


Busque el siguiente código

<!-- Seccion 11 -->

Le mostrara un código similar al siguiente


<div class='text-center'>

<h1 class='col-sm-12 p-b-10'>Golden. The best coffee shop in Chelsea!</h1>

<a class="color-blanco" href='#'>

  <button class='btn btn-lg btn-primary btn-cons btn-rounded' type='button'> Explorar</button></a>

<p class='hint-text font-arial small-text m-t-30'><span class='hint-text'>Plantilla exclusiva para uso en BLogger<br/></span>Our greatest passions in life are fragrant espressos and decadent baked goods, and we&#8217;ve had enough with high-quality coffee places that offer lackluster, outsourced pastries, and high-end bakeries that offer burnt, sub-par brews. So we decided to do something about it

</p>

</div>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

12 Realizar los cambios de la siguiente sección


Busque el siguiente código

<!-- Seccion 12 -->

Le mostrara un código similar al siguiente


<div class='col-sm-6'>

  <img alt='' class='logo' src='https://1.bp.blogspot.com/-SCRGa30netg/WUr5Ve_eDHI/AAAAAAAABgQ/B2DuAJ635hM0GxYRowgDQ27U4D0tT3E9ACLcBGAs/s1600/logo-final.png'/>

<div class='m-t-10 '>

<ul class='no-style fs-11 no-padding font-arial'>

  <li class='inline no-padding'><a class='link text-white p-r-10 b-r b-transparent-white' href='/'>Inicio</a></li>

<li class='inline no-padding'><a class='link text-white p-l-10 p-r-10 b-r b-transparent-white' href='#'>Nosotros</a></li>

<li class='inline no-padding'><a class='link text-white p-l-10 p-r-10 b-r b-transparent-white' href='#'>Soporte</a></li>

<li class='inline no-padding'><a class='link text-white p-l-10 p-r-10 xs-no-padding xs-m-t-10' href='#'>Páginas</a></li>

</ul>

</div>


Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo

Cambie la URL que está marcada de color amarillo por una nueva URL logo imagen

13 Un clic en Guardar Tema


14 Diríjase a Diseño y organice los widgets

Es momento de mirar nuestra Landing page

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios