Lluvia – Documentación
Instalación del tema
Ya adquiriste la plantilla y estás listo para comenzar: ¡excelente!
Recomendamos que la instalación de una plantilla en Blogger se realice de forma manual, sigue estos pasos:
- Descargamos la plantilla a su alojamiento local, podrá encontrar el archivo de descarga en su recibo y/o en su cuenta – Historias de compras.
- Descomprima el archivo principal de descarga .Zip, donde se generará un carpeta con los archivos necesarios.
- Ubique el archivo .xml, pulsando clic derecho pinga en abrir en un Bloc de notas o otro editor de código, asegure de haber copeado todo el código HTML.
- Vaya a su panel de Blogger > en la barra lateral ubique y active la sección Tema > ubique el botón Personalizar > Pulse en el icono desplegable y presione sobre Editar HTML.
- Se abrirá una sección de solo código, con ayuda del teclado pulse Ctrl + A para seleccionar todo, luego elimine todo el código.
- Con ayuda del teclado pulse Ctrl + C para pegar el nuevo código copiado anteriormente de la nueva plantilla.
- Finalmente pulse en el icono de Guardar y podrá visualizar su pagina con la adaptación de la nueva plantilla
Recuerda que si tienes alguna dificultad en instalar tu plantilla, solo agrega a tu carrito de compras el paquete de instalación y comunícate con soporte, donde te atenderemos al instante.
Imagen de referencia.
Logo de Cabecera
¿Ya tiene diseñado su logo ideal para su sitio web?. Genial, de ser lo contrario, puede consultar con soporte para diseñar un logo por usted.
Acceda al Diseño de su Blog, ubique el gadget Logo de cabecera, pulse en el icono Editar.
Active la casilla de subir imagen, se activará un botón para que suba su logotipo, esto puede tardar unos segundo.
Luego de haber subido el logo, en la sección Colocación de imagen active el casillero En lugar del título y la descripción.
Finalmente pulse en Guardar
Lista de menu principal
Lista de Menu Desplegable
Acceda al diseño de su blog, u8bique el Gadget de Menu Principal, pulse sobre el icono Editar en el widget del menú principal.
Enlace de menu Desplegable: características
- Menu Normal : Desplegable
- Menu Deplegable: _Desplegable 1 (antes del enlace agregue » _ «) 1 Guion bajo
- Sub Menu Desplegable: __Sub Desplegable (antes del enlace agregue » _ _») 2 Guion bajo
Para obtener el código HTML de mas iconos Fontawesome ingrese a este enlace y busque el que mas se adecue al menú a colocar https://fontawesome.com/v4/icons/
Imagen de Fondo del encabezado
Acceda al Tema de su blog, pulse en el icono que se encuentra a la derecha de Personalizar, luego haga clic en Editar HTML > después de dar clic en cualquier parte del editor HTML de su blog, en su teclado presione las teclas Ctrl F y busque el siguiente enlace de la imagen para modificar.
https://1.bp.blogspot.com/-gc05r2h5KIg/XsG6bVsqEiI/AAAAAAAADuY/R7JUVzuDHzYjobK3sREATAobubLOdWTUQCLcBGAsYHQ/s1600/4.jpg
Aqui podrás cambiar el enlace de la imagen con un nuevo enlace de imagen.
- Titulo del encabezado
Acceda al diseño de su blog > haga clic en Agregar un gadget > HTML / JavaScript en la sección Titulo del Encabezado , modifique su mensaje de encabezado.
Este texto aparecerá en la pate superior de su blog.
Ejemplo del código
<p> Bienvenido </p>
Texto animado de encabezado
cceda al diseño de su blog > haga clic en Agregar un gadget > HTML / JavaScript o en la sección Texto Animado de Encabezado , asi como a continuación.
Código a colocar:
<div class='type'>
<span>Hola Soy</span><p></p>
</div>
<script language='javascript' >//<![CDATA[
$(function() {
"use strict";
$(".header-logo-desc p").typed({
strings: ["Jorge Cabrera", "Un Desarrollador" , " Un Diseñador"], //Headlines(Change It)
loop: true,
startDelay: 1e3,
backDelay: 2e3
});
});
//]]></script>
Top redes sociales
Acceda al Diseño de su blog > ubique y haga clic en el icono Editar en el widget Social Top.
- En el titulo coloque el nombre de la red social
- En el URL de sitio coloque su enlace de la red social
Iconos disponibles
facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen, whatsapp
Entradas del Blog
Acceda al Diseño de su blog, ubique el Widget de Publicaciones Principales y pulse en el icono Editar.
Modifique el numero de entradas según su preferencia, por defecto este viene en 7
Active los casilleros según su preferencia, también modifique los textos como corresponden
Por ultimo pulse en el botón Guardar
Lista de menu fijo
Acceda al Tema de su blog > haga clic en Editar HTML > después de dar clic en cualquier parte del editor HTML de su blog, en su teclado presione las teclas Ctrl F y busque el siguiente codigo para modificar.
<li class='current'><a href='#header-wrapper'>Inicio</a></li>
Luego modifique segun su preferencia
<div class='scrolling-menu'>
<ul id='nav'>
<li class='current'><a href='#header-wrapper'>Inicio</a></li>
<li><a href='#section-1'>Acerca de mi</a></li>
<li><a href='#section-2'>Servicios</a></li>
<li><a href='#main-wrapper'>Publicaciones</a></li>
<li><a href='#section-5'>Testimonio</a></li>
<li><a href='#section-7'>Contacto</a></li>
</ul><div class='menu-mobile2'/>
</div>
Imagen y detalles del autor
Acceda al Tema de su blog > haga clic en Editar HTML > después de dar clic en cualquier parte del editor HTML de su blog, en su teclado presione las teclas Ctrl F y busque el siguiente codigo para modificar.
https://1.bp.blogspot.com/--tQrBoKTELs/XsGsKR9hZ6I/AAAAAAAADuM/leU_p4Ky5b0CbeGg-jC7CAJHMSHI5ToswCLcBGAsYHQ/.jpg
Luego Modifique según el código de color
<div class='sora-author-box'> <div class='sora-author-box-image'><img alt='Author Image' class='avatar avatar-60 photo' src='https://1.bp.blogspot.com/--tQrBoKTELs/XsGsKR9hZ6I/AAAAAAAADuM/leU_p4Ky5b0CbeGg-jC7CAJHMSHI5ToswCLcBGAsYHQ/.jpg'/></div> <div class='sora-author-box-text'> <div class='sora-author-box-text-head'> <span class='hello-txt'>Hola</span> <h2 class='profile-title'><span>Yo Soy</span> Jorge Cabrera</h2> <h3 class='profile-position'>Desarrollador y Diseñador</h3> </div> <div class='sora-author-box-text-details'> <span> <p> Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias.</p> <br/> <p> Lorem Ipsum es simplemente un texto ficticio de la industria de la impresión y la configuración de tipos cuando una impresora desconocida tomó una galera y una industria de impresoras desconocidas cuando la escribió y la mezcló para hacer un libro de muestras. Ha sobrevivido no solo cinco siglos. </p></span> </div> </div></div> </div>
Habilidades de información
Acceda al Tema de su blog > haga clic en Editar HTML > y busque el siguiente codigo para modificar.
<h4>Habilidades e Información</h4>
Luego Modifique segun su preferencia el texto coloreado y numeros de porcentajes
<div class='special-wrap row'>
<div class='special-title wow fadeInUp animated' style='visibility: visible;'>
<h4>Habilidades e Información</h4>
</div>
<div style='clear: both;'/>
<div class='skills'>
<!-- skill -->
<dl>
<dt>HTML</dt>
<dd class='skill-percent html' data-percent='90'/>
<dt>CSS</dt>
<dd class='skill-percent css' data-percent='85'/>
<dt>jQuery</dt>
<dd class='skill-percent jquery' data-percent='70'/>
<dt>SCSS</dt>
<dd class='skill-percent scss' data-percent='60'/>
<dt>Javascript</dt>
<dd class='skill-percent javascript' data-percent='50'/>
<dt>PHP</dt>
<dd class='skill-percent php' data-percent='30'/>
<dt>XML</dt>
<dd class='skill-percent xml' data-percent='40'/>
</dl>
<!-- #skill -->
</div>
<div class='skill-details'>
<div class='sora-author-box-text-details'>
<ul class='profile-list'>
<li class='clearfix'>
<strong class='list-title'>Edad</strong>
<span class='cont'>22</span>
</li>
<li class='clearfix'>
<strong class='list-title'>Idioma</strong>
<span class='cont'>Español Latino</span>
</li>
<li class='clearfix'>
<strong class='list-title'>Blog</strong>
<span class='cont'>blog.yourdomain.com</span>
</li>
<li class='clearfix'>
<strong class='list-title'>Correo</strong>
<span class='cont'><a href='mailto:JorgeCabrera@company.com'>JorgeCabrera@company.com</a></span>
</li>
<li class='clearfix'>
<strong class='list-title'>Sitio Web</strong>
<span class='cont'>http://www.yourdomain.com</span>
</li>
<li class='clearfix'>
<strong class='list-title'>Telefono</strong>
<span class='cont'><a href='tel:+12562548456'>+1 256 254 84 562</a></span>
</li>
<li class='clearfix'>
<strong class='list-title'>Lanza Libre</strong>
<span class='cont'>hasta el 15 de abril de 2016</span>
</li>
<li class='clearfix'>
<strong class='list-title'><span class='list-button'>De Vacaciones</span></strong>
<span class='cont'><i class='fa fa-calendar'/>hasta el 25 de marzo de 2016</span>
</li>
</ul>
</div>
</div>
</div></div>
¿Que Ofrecemos?
Acceda al Tema de su blog > haga clic en Editar HTML > y busque el siguiente codigo para modificar.
<h4>Que Ofrecemos?</h4>
Luego modifique segun su preferencia los textos coloreados
<div class='sora-special-box wow slideInUp' id='section-2'> <div class='special-wrap row'> <div class='special-title wow fadeInUp animated' style='visibility: visible;'> <h4>Que Ofrecemos?</h4> </div> <div style='clear: both;'/> <div class='skill-details-works'> <!-- First --> <div class='special-tiles wow fadeInUp' data-wow-delay='0s'> <div class='special-tiles-wrap'> <span class='special-icons'> <i aria-hidden='true' class='fa fa-heart-o'/> </span> <span class='special-content'> <h6 class='special-heading'>Diseño Web</h6> <p class='special-text'>Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias's. </p></span> </div> </div> <!-- First One Ends --> <!-- Second --> <div class='special-tiles wow fadeInUp' data-wow-delay='0.2s'> <div class='special-tiles-wrap'> <span class='special-icons'> <i aria-hidden='true' class='fa fa-birthday-cake'/> </span> <span class='special-content'> <h6 class='special-heading'>Desarrollo de Aplicaciones</h6> <p class='special-text'>Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias's. </p></span> </div> </div> <!-- Second Ends --> <!-- Third --> <div class='special-tiles wow fadeInUp' data-wow-delay='0.3s'> <div class='special-tiles-wrap'> <span class='special-icons'> <i aria-hidden='true' class='fa fa-cutlery'/> </span> <span class='special-content'> <h6 class='special-heading'>Aplicacion Web</h6> <p class='special-text'>Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias's. </p></span> </div> </div> <!-- Third Ends --> <!-- First --> <div class='special-tiles wow fadeInUp' data-wow-delay='0s'> <div class='special-tiles-wrap'> <span class='special-icons'> <i aria-hidden='true' class='fa fa-heart-o'/> </span> <span class='special-content'> <h6 class='special-heading'>Diseño Web</h6> <p class='special-text'>Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias's. </p></span> </div> </div> <!-- First One Ends --> <!-- Second --> <div class='special-tiles wow fadeInUp' data-wow-delay='0.2s'> <div class='special-tiles-wrap'> <span class='special-icons'> <i aria-hidden='true' class='fa fa-birthday-cake'/> </span> <span class='special-content'> <h6 class='special-heading'>Desarrollo de Programas</h6> <p class='special-text'>Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias.'s. </p></span> </div> </div> <!-- Second Ends --> <!-- Third --> <div class='special-tiles wow fadeInUp' data-wow-delay='0.3s'> <div class='special-tiles-wrap'> <span class='special-icons'> <i aria-hidden='true' class='fa fa-cutlery'/> </span> <span class='special-content'> <h6 class='special-heading'>Programas Web</h6> <p class='special-text'>Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias.'s. </p></span> </div> </div> <!-- Third Ends --> </div> </div></div>
Contadores
Acceda al Tema de su blog > haga clic en Editar HTML > y busque el siguiente codigo para modificar.
Para cambiar la imagen de fondo Busque el siguinte codigo
http://4.bp.blogspot.com/-Tev2WNGyFs8/WaUuh31ZVRI/AAAAAAAADuY/5D9_uZ3rgrY9cVKC46DXxPMlXlxCOmB4gCK4BGAYYCw/s1600/sg-back.jpg
Para cambiar el texto busque el siguiente codigo
<div class='counter-box wow slideInUp'>
Luego modifique el texto coloreado segun su preferencia
<div class='counter-box wow slideInUp'> <div class='row counter-box-wrap'> <div class='counter-box-item'> <i class='color lnr lnr-code'/> <h1 class='counter-sora'>3000</h1> <div class='counter-sora-text'>Proyectos Completados</div> </div> <div class='counter-box-item'> <i class='color lnr lnr-coffee-cup'/> <h1 class='counter-sora'>50</h1> <div class='counter-sora-text'>Clientes Felices</div> </div> <div class='counter-box-item'> <i class='color lnr lnr-book'/> <h1 class='counter-sora'>324</h1> <div class='counter-sora-text'>Tazas de Café</div> </div> <div class='counter-box-item'> <i class='color lnr lnr-gift'/> <h1 class='counter-sora'>1234</h1> <div class='counter-sora-text'>Premios</div> </div> </div> </div>
Nuestro Portafolio
Acceda al Tema de su blog > haga clic en Editar HTML > y busque el siguiente codigo para modificar.
<h4>Nuestro Portafolio.</h4>
Luego modifica el texto coloreado
<div style='clear:both;'/> <div class='Portfolio-title'> <h4>Nuestro Portafolio.</h4> <span>Una agencia creativa que cree en el poder de las ideas creativas y el gran diseño.</span> </div><div style='clear:both;'/>
Testimonios
Acceda al Tema de su blog > haga clic en Editar HTML > y busque el siguiente codigo para modificar.
<div class='main-gallery wow fadeInRight' id='section-5' style='visibility: visible;'>
Luego modifique el texto coloreado y los enlaces de las imagenes avatar cuadradas
<div class='main-gallery wow fadeInRight' id='section-5' style='visibility: visible;'>
<div class='gallery-cell'>
<div class='testimonial'>
<img class='testimonial-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpxsjOzduayEbOEaIfb8SbbQx10phFlDpfA3hxiBME7MjHP73HayLhmrb3K5au7vyGKBRPgx04BxKQiaw3cmTo-a_QIO7UHtigRCOR1rvTHz2R_kAwRJHoCyipFKu9PpKIFzr1WcJvtqo/'/>
<q class='testimonial-quote'>"Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias."</q>
<span class='testimonial-author'>Martin Emprendedor Independiente</span>
</div>
</div>
<div class='gallery-cell'>
<div class='testimonial'>
<img class='testimonial-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBaDEARM9rbAGSQZlcCCHx1w_ifwrug8doGQ1IAutOQqzE2I60nylrCa-C_5XZRemMhvbxjO0eqizWPb0IEHTmykc4Y3p26S3MxCdHcDYEBCCul7cI7pEQlNzz91PbmE4k3NJAOGIdrQc/'/>
<q class='testimonial-quote'>"Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias."</q>
<span class='testimonial-author'>Maria especialista en marketing</span>
</div>
</div>
<div class='gallery-cell'>
<div class='testimonial'>
<img class='testimonial-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0phPuahq_pSIGQcVkdd7GoMRCaFJQyXbYbNGL2VTzO7E7v6rDNEAotHUYnlCwNiJBbwpEXih88BlJsIpvWHbodkY3v8cfIPBihfRzn0ATx3aBncGjhA_0Y_tXTnNlHqhxhnVyRpkfV_E/'/>
<q class='testimonial-quote'>"Este texto es ficticio solo para dar la demostracion a la plantilla lluvia de plantillas plus, muchas gracias."</q>
<span class='testimonial-author'>Luis Desarrollador de Sistemas</span>
</div>
</div>
Publicaciones Destacadas
Acceda al diseño de su blog > haga clic en Agregar un gadget > HTML / JavaScript en la sección Publicaciones Destacadas , coloque el siguinete codigo.
<span data-type="tysum" data-label="Video" data-no="4"></span>
Ponerse en Contacto
Acceda al Tema de su blog > haga clic en Editar HTML > y busque el siguiente codigo para modificar.
<h4>Ponerse en contacto</h4>
Luego modifique segun el texto coloreado a continuacion
<h4>Ponerse en contacto</h4>
<span>No dude en enviarnos una línea para contactarnos</span>
</div>
<div style='clear:both'/>
<div class='row' id='sora_blogger_cntct_form'>
<div class='wrap-me wow fadeInLeft' data-wow-delay='0.2s' style='visibility: visible;'>
<b:section class='sora-contact-widget' id='Contact Widget' maxwidgets='1' name='Contact Form Widget' showaddelement='no'>
<b:widget id='ContactForm1' locked='false' title='Formulario de contacto' type='ContactForm' version='1'>
<b:includable id='main'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<span class='name-bg'>Nombre*</span>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<span class='email-bg'>Correo*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<span class='message-bg'>Mensaje*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
Detalles del Contacto
Acceda al Tema de su blog > haga clic en Editar HTML > y busque el siguiente codigo para modificar.
<li><i class='lnr lnr-phone'/><span class='con-list-head'>Telefono</span><span>+610-401-6021, +610-401-6022</span></li>
Luego modifique el texto coloreado a continuacion
<ul class='con-list'> <li><i class='lnr lnr-phone'/><span class='con-list-head'>Telefono</span><span>+610-401-6021, +610-401-6022</span></li> <li><i class='lnr lnr-map'/><span class='con-list-head'>Habla a</span><span>3066 Jorge Cabrera.</span></li> <li><i class='lnr lnr-envelope'/><span class='con-list-head'>Correo</span><span>JorgeCabrera@micorreo.com</span></li> </ul>
Complemento de Facebook
Acceda al Diseño de su blog, cree un nuevo Widget tipo HTML ya sea en la sección lateral o en el pie de pagina.
Coloque el código del complemento de Facebook y modifique el enlace del usuario con el suyo
Por ultimo pulse en Guardar
<center> <div class="fb-page" data-href="https://www.facebook.com/plantillasplus" data-width="360" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div> </center>
Créditos de pie de Página
Todas nuestras plantillas vienen con un Gadget para modificar los Créditos de pie de Página del autor dentro de la sección Diseño, no es necesario ingresar al código fuente.
Acceda al Diseño de su blog, ubique el Gadget de Modificar o eliminar texto de copyright (plantillasplus.com), pulse en el incono Editar.
Verá un código HTML y JavaScript, donde podrá modificar el texto y el enlace segun su preferencia.
Por defecto la plantilla viene el siguiente código:
<div> @Copyright <script >var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> | hecho con amor por <a href="https://plantillasplus.com"> plantillasplus.com </a> <i class='fa fa-heart' style='color: red;'/></i> </div>
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.