Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Plantilla responsive para blogger

Leyre planttilla responsive blogger

 Visitar en la tienda 

Versión 3.1.0

Leyre.xml es una plantilla para blogs personales y responsive para Blogger, cuenta con una amplia capacidad de personalización, velocidad de carga excelente incluso en redes 3G, sin dependencias de frameworks (Vanilla JS) y amigable con el SERP y las Redes sociales.

Cualidades

  • Diseño Responsive
  • Optimización para SERP (SEO)
  • Personalizable
  • Compatible con ChromeOperaFirefoxIE10+EdgeSafari.
  • Código limpio
  • Excelente Rendimiento
  • Velocidad de carga
  • Masonry
  • Parallax

Instalación

Copia el código de la plantilla, dirígete a Blogger  Temas, haz un respaldo de tu plantilla actual (Opcional), luego pulsa el botón "Editar HTML", borra todo el código dentro del editor y pega el código copiado con anterioridad. Guarda los cambios.

Modificar estilos

Ve a Temas  Personalizar para usar el Diseñador de plantillas de Blogger. Esta herramienta te permite modificar todas las variables de diseño. Presiona el botón "Aplicar" para guardar los cambios.

Comentar con Disqus

Inicie sesión en disqus y vaya a la sección de configuración general, posteriormente copie el nombre corto:

shortname

Ahora ve a Blogger  Temas  Editar HTML y busque el siguiente código:

<!-- General Options -->
<Variable name="config.comments" {{..}} default="blogger" value="blogger"/>
<Variable name="config.shortname" {{..}} default="shortname" value="shortname"/>

Reemplace el valor "shortname" de la variable config.shortname por el nombre corto que copió con anterioridad y por último en la variable config.comments cambie blogger por disqus, guarde los cambios y listo.

Comentar con facebook

Ve a Blogger  Temas  Editar HTML y busque <body> y debajo de eso pega el sdk de facebook:

<div id='fb-root'/>
<script>// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=ID_APPLICATION";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>

Ahora reemplaze ID_APPLICATION por la ID de aplicación de facebook, por último en la variable config.comments cambie blogger por facebook y guarde los cambios.

Bundle.css

Activar Bundle.css le permite utilizar widgets de blogger rediseñados, sin embargo consume más recursos, por eso por defecto está desactivado. Si desea activar el diseño de los widgets de Blogger busque:

<!-- Bundle.css -->
<Variable name="config.bundle" description="Bundle.css" type="string" default="false" value="false"/>

Y cambie false por true, luego prosiga a guardar los cambios.

Entradas

Las variables que administran las opciones de las entradas son las siguientes:

<!-- Cards (Home posts) -->
<Variable name="config.post.column" {{..}} default="2" value="2"/>
<Variable name="config.post.showSnippet" {{..}} default="true" value="true"/>
<Variable name="config.post.showMeta" {{..}} default="true" value="true"/>

La siguiente tabla explica el tipo de variable y valores que puede utilizar:

VariableTipoDescripcion
config.post.column[number]Cantidad de entradas del 1 al 6
config.post.showSnippet[boolean]true para mostrar el resumen, caso contrario false
config.post.showMeta[boolean]true para mostrar los datos, caso contrario false

Recorte de imágenes

Estas variables administran el corte para las imágenes de el post destacado y entradas. Tienen el siguiente aspecto:

<!-- Image Ratio -->
<Variable name="config.post.ratio" {{..}} default="true" value="true"/>
<Variable name="config.card.ratio" {{..}} default="true" value="true"/>

La siguiente tabla explica el tipo de variable y valores aceptados:

VariableTipoDescripcion
config.post.ratio[boolean]true para cortar imágenes de las entradas, caso contrario false
config.card.ratio[boolean]true para cortar imágenes de la Entrada Destacada, caso contrario false

Cuerpo

Las variables que administran el cuerpo de la plantilla son las siguientes:

<!-- Show -->
<Variable name="config.show.sidebar" {{..}} default="true" value="true"/>
<Variable name="config.show.postSidebar" {{..}} default="true" value="true"/>
<Variable name="config.show.oppositeBlog" {{..}} default="false" value="false"/>

La siguiente tabla explica el tipo de variable y valores aceptados:

VariableTipoDescripcion
config.show.sidebar[boolean]true para mostrar el sidebar en la home, caso contrario false
config.show.postSidebar[boolean]true para mostrar el sidebar en los post, caso contrario false
config.show.oppositeBlog[boolean]true para intercambiar el sidebar y el blog, caso contrario false

Imagen por defecto

La siguiente variable contiene la imagen que se utilizará por defecto en caso de que una entrada no posea imagen. Solo debe cambiar el enlace por otra imagen subida a blogger:

<!-- image default -->
<Variable name="config.default.image" description="Default image" type="string" default="https://2.bp.blogspot.com/-1J-byOnRoAI/W3Cot79qVUI/AAAAAAAADmE/IwXCcRdJl70_yR7FivfpmM62MVqD4CwbQCLcBGAs/s1600/no-img-blogger.png" value="https://2.bp.blogspot.com/-1J-byOnRoAI/W3Cot79qVUI/AAAAAAAADmE/IwXCcRdJl70_yR7FivfpmM62MVqD4CwbQCLcBGAs/s1600/no-img-blogger.png"/>

Redes sociales

El widget Social Networks contiene una lista de iconos para el footer. Generalmente se utiliza para las redes sociales pero puedes agregar cualquiera de Feather Icons.

Para empezar, edite el widget y agregue un nuevo elemento a la lista. En el campo "Nuevo nombre del sitio" agregue la clase de un icono de Feather Icons, por ejemplo:

facebook

Y en el campo "URL del sitio" escriba la url que desee.

Cualquier duda coméntala, respondo a todos. Si te gustaría apoyar más proyectos como este comparte esta entrada en tus redes sociales o adquiere la versión premium. Gracias por pasar.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas