template anime blogger responsive template magazine responsive

Visitar en la tienda Probar gratis

En esta entrada podrás configurar la versión gratuita de Maily, la cual es una plantilla responsive estilo magazine para Blogger. Si ya cuentas con la versión premium, encontrarás una guía detallada de todas sus funciones en la carpeta docs. La versión 1.1.0 es la más reciente de esta plantilla.


Contenido


Instalación

Abre el documento maily.xml con un editor de texto, recomiendo Sublime Text, Atom.io o Brackets.io, presiona CTRL + A para seleccionar todo y CTRL + C para copiar:


Luego ve a Temas, instala la plantilla "Contemporánea", "Soho", "Emporio" o "Destacado", seleccione todo el código y reemplázalo por el que acabas de copiar, guarda los cambios y listo.


Modificar estilos

Ve a Temas Personalizar para abrir el Diseñador de plantillas. Esta herramienta te permite modificar todas las variables de diseño. No olvides presionar 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 codigo:


<!-- 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"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_LA/all.js#xfbml=1"></script>

Si tu localidad es distinta, solo reemplaza es_LA por el código de idioma y región que corresponda, por último en la variable config.comments cambie blogger por facebook y guarde 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 aceptados:


Variable Tipo Descripcion
config.post.column number Columnas de entradas del 1 al 6 (Solo afecta a las secciones)
config.post.showSnippet boolean true para mostrar el resumen, caso contrario false
config.post.showMeta boolean true para mostrar los datos, caso contrario false
config.post.showShare boolean true para mostrar los botones de compartir (página principal), caso contrario false

Recorte de imágenes

Las variables que administran el corte para las imágenes del slider, post destacado y entradas son las siguientes:


<!-- Image Ratio -->
<Variable name="config.ratio.featured" ... default="true" value="true"/>

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


Variable Tipo Descripcion
config.ratio.featured boolean true para cortar imágenes del post destacado, caso contrario false

Mostrar

Las variables que administran lo que se muestra en el cuerpo de la plantilla son las siguientes:


<!-- Show -->
<Variable name="config.show.homeSidebar" ... default="true" value="true"/>
<Variable name="config.show.postSidebar" ... default="true" value="true"/>
<Variable name="config.show.pageSidebar" ... default="true" value="true"/>
<Variable name="config.show.errorSidebar" ... default="true" value="true"/>
<Variable name="config.show.postPager" ... default="true" value="true"/>
<Variable name="config.show.search" ... default="false" value="false"/>

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


Variable Tipo Descripcion
config.show.homeSidebar boolean Muestra el sidebar en la home
config.show.postSidebar boolean Muestra el sidebar en los post
config.show.pageSidebar boolean Muestra el sidebar en las paginas
config.show.errorSidebar boolean Muestra el sidebar en el error 404
config.show.postPager boolean Muestra la paginación en los post
config.show.search boolean Muestra el buscador en el menu

Funciones

Las variables que controlan las funciones de la plantilla son las siguientes:


<!-- Funtions -->
<Variable name="config.el.oppositeBlog" ... default="false" value="false"/>
<Variable name="config.el.postsRelated" ... default="true" value="true"/>
<Variable name="config.el.postsRelated.num" ... default="2" value="2"/>
<Variable name="config.el.postsRelated.column" ... default="2" value="2"/>
<Variable name="config.el.localeDate" ... default="en-Us" value="en-Us"/>
<Variable name="config.el.featureTags" ... default="false" value="false"/>
<Variable name="config.el.featureTags.tags" ... default="" value=""/>

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


Variable Tipo Descripcion
config.el.oppositeBlog boolean Intercambia el blog con el sidebar
config.el.postsRelated boolean Muestra los post relacionados
config.el.postsRelated.num number Cantidad de post relacionados
config.el.postsRelated.column number Cantidad de columnas de los post relacionados
config.el.localeDate string Código de localización e idioma
config.el.featureTags boolean Muestra las etiquetas destacadas
config.el.featureTags.tags object Define las etiquetas destacadas separadas por comas

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"/>

Agregar iconos a los títulos

Para agregar iconos a los títulos de los gadgets busca el include que inserta los títulos, el mismo tiene el siguiente aspecto:


<b:include name='widget-title'/>

Agrega el atributo data con el nombre de una clase correspondiente a los iconos de fontawesome, ejemplo:


<b:include name='widget-title' data='{icon: "fas fa-fire-alt", title: data:title}'/>

Guarda los cambios para que surta efecto:


Error 404

Por defecto la plantilla muestra un mensaje de error simple. Para reemplazarlo por un error personalizado ve a Preferencias para motores de búsqueda y habilita "Mensaje de página no encontrada personalizado".


Puedes escribir tu propio mensaje de error e inclusive insertar html, javascript o css. Prueba insertando el siguiente código de error común:


<div class="alert">
   <div class="h1"><i class="far fa-meh"></i> 404</div>
   <p>Your error text</p>
</div>

Reemplaza Your error text y no olvides guardar los cambios.


El widget Main menu contiene el menú multi-nivel, el cual está escrito en html, para modificarlo pulsa el botón editar y reemplace el menú de ejemplo, por el siguiente codigo de menú simple:


<ul class="dropdown-menu nav__menu">
   <li><a href="/">Home</a></li>
   <li><a href="#url">Enlace</a></li>
</ul>

El código anterior contiene un enlace hacia la página principal del blog y otro enlace de ejemplo. El valor #url se reemplaza por la url del enlace deseado, mientras que Enlace corresponde al nombre de dicho enlace.


Consejo: Si el enlace que quieres agregar proviene del blog, recomiendo utilizar solo el directorio, por ejemplo, supongamos que este enlace corresponde a una página de tu blog:


https://www.example.com/p/pagina-nueva.html

El directorio es todo lo que está después del .com y lo he resaltado, por tanto, si lo usamos en el menú nos queda:


<ul class="dropdown-menu nav__menu">
   <li><a href="/">Home</a></li>
   <li><a href="/p/pagina-nueva.html">Pagina nueva</a></li>
</ul>

Hacerlo de esta manera ayuda a que tus enlaces continúen funcionando aun después de cambiar de dominio.


Para crear un nuevo nivel, crea una nueva lista dentro de un elemento <li></li>, si tomamos nuestro ejemplo de menú simple y agregamos un nivel nos quedaría así:


<ul class="dropdown-menu nav__menu">
   <li><a href="/">Home</a></li>
   <li><a href="#url">Nuevo nivel</a>
      <ul>
         <li><a href="#url">Subnivel 1</a></li>
         <li><a href="#url">Subnivel 2</a></li>
      </ul>
   </li>
</ul>

Configurar secciones

Maily cuenta con el plugin generador de secciones para blogger. Para agregar una sección, edita el widget "WJS Sections", agregando el nombre, la etiqueta y la cantidad de entradas:


secciones

En el campo "Nombre del sitio" escribe el nombre para la sección, mientras que en "Url del sitio", escribe la etiqueta y la cantidad de entradas. Puedes agregar todas las secciones que quieras.


Redes sociales

Este widget está dos veces en la plantilla y se utiliza para agregar las redes sociales, pero también puedes agregar cualquier icono de Font Awesome.


Edita el widget y agregue un nuevo elemento a la lista. En el campo "Nuevo nombre del sitio" escribe la clase de un icono de Font Awesome, por ejemplo:


fab fa-facebook-f

La clase de los iconos la puedes encontrar en la etiqueta html que nos proporciona para copiar Font Awesome:


fontawesome

Para finalizar, en el campo "URL del sitio" escribe la url que desee.


Espero que esta entrada sea de utilidad para configurar la plantilla, si tienes dudas coméntalas, respondo a todos. Si te gustaría apoyar más proyectos como este comparte esta entrada en tus redes sociales. Gracias por pasar.