Chuumoku - Plantilla responsive para blogger

Sobre el tema

Chuumoku es una de las primeras plantillas desarrollada bajo mi plantilla para desarrollo chain.xml para la creación de temas en blogger. Cuenta con open graph y twitter card y optimización para SEO, junto con un diseño responsive y una velocidad de carga optima. Su versión actual es 0.4.9 y está pensada para blog en general (imagenes, noticias, etc...).

Caracteristicas

  • Diseño responsive (comprobar)
  • Velocidad optima (comprobar)
  • Optimizado para SEO
  • Fácilmente configurable
  • Compatibilidad entre navegadores.

Widgets disponibles

La versión actual de Chuumoku cuenta con los siguientes widget modificados*.

  • Widget de búsqueda
  • Widget de Redes sociales (Lista de enlaces) ─ configuración
  • Widget de entradas destacadas
  • Widget de entradas populares
  • Widget de etiquetas
  • Widget de páginas
*NOTA: Los Widget modificados son aquellos que tienen una estructura diferente a su versión por defecto.

Gestor de etiquetas

El gestor de etiquetas es un widget/gadget desarrollado por Byzeroblogger y su uso no es otro más que gestionar etiquetas, esto significa que podemos llamar cualquier etiqueta que tengamos en las entradas y el gestor lo que hará es mostrar en pantalla un bloque con entradas con dicha etiqueta. Actualmente está en su versión 0.2.3 por lo qué su configuración está limitada.

Activación

Para poder activarlo debemos ir a nuestro panel > diseño y buscar en los widget el "Gestor de etiquetas". Presionamos en "editar" y se abrirá una nueva ventana que contiene dos cuadros buscamos el que dice Título. En este agregamos cualquier etiqueta que queramos.

propiedades (opcional)

El gestor de etiquetas también posee algunas propiedades para poder modificar ciertos aspectos de las entradas que estemos mostrando con el widget. Para hacer uso de esta opción, debemos agregar las opciones dentro del recuadro "contenido" del widget "Gestor de etiquetas", estas propiedades están basadas en un objecto json para su funcionamiento, su sintaxis de uso es la siguiente:

{"nPropiedad": valor1, "nPropiedad2": valor2, "nPropiedad3": {"propiedad": valor1, "propiedad2": valor2}}

y los nombres y valores de las propiedades se detallan en la siguiente tabla:

Propiedad Tipo Explicación
numPost string/number Nos permite eligir la cantidad de entradas que se mostraran en pantalla.
numRow string/number Nos permite eligir la cantidad de entradas que se mostraran por fila. Este sistema esta basado en las rejillas de 12 columnas que posee la librería kuro, por lo que si quieres agregar 2 entradas por fila, deberías agregar un 6 y si quisieras agregar 4 entradas, entonces deberías agregar un 3 y así...
snippetobjectObjeto que nos permite mostrar u ocultar el resumen de las entradas. Las propiedades de este objecto son "show" que nos permite mostrar u ocultar el resumen de la entrada. Acepta valores true/false y "snippetLength" que nos permite definir la longitud del texto del resumen. Acepta valores tipo number, éste último solo funciona si la propiedad "show" esta activa.
sizeImagearrayNos permite manipular el tamaño de las imágenes mediante un array compuesto por dos valores: "[ancho, alto]", sólo acepta valores del tipo number o string

Configuración

open graph y twitter card

Búsca el siguiente código en la plantilla

<meta property="og:image" content="{IMAGEN SITIO WEB}" />
<meta property="og:image:url" content="{IMAGEN SITIO WEB}" />
<meta content='{IMAGEN SITIO WEB}' name='twitter:image:src'/>
<meta content='@blogger' name='twitter:site'/>
<meta content='@usuario' name='twitter:creator'/>

y remplaza {IMAGEN SITIO WEB} por la imagen que se adapte más a la temática de tu web, esta imagen se usará cuando comparta el inicio, páginas, etiquetas o búsquedas de tu web. Por otro lado cambia {@blogger} y @usuario por los nombres de tu cuenta de twitter.

menú multinivel

Ve a tu panel, luego a tema > editar HTML y dentro del cuadro dónde está el codígo presiona CTLR+F y búsca el siguiente texto "Menú multinivel". El menú debe tener esta estructura HTML:

<ul class="header__menu">
  <li class="header__menu-item"><a href="/" class="header__menu-link">Inicio</a></li>
  <li class="header__menu-item"><a href="#url" class="header__menu-link header__menu-link--child">Sub menu</a>
    <ul class="header__menu-child">
      <li class="header__menu-item"><a href="#url" class="header__menu-link">Sub menu 2.1</a></li>
      <li class="header__menu-item"><a href="#url" class="header__menu-link">Sub menu 2.2</a></li>
      <li class="header__menu-item"><a href="#url" class="header__menu-link header__menu-link--child">Sub menu 2.3</a>
        <ul class="header__menu-child header__menu-child--left">
          <li class="header__menu-item"><a href="#url" class="header__menu-link">Sub menu 2.3.1</a></li>
          <li class="header__menu-item"><a href="#url" class="header__menu-link">Sub menu 2.3.2</a></li>
          <li class="header__menu-item"><a href="#url" class="header__menu-link">Sub menu 2.3.3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="header__menu-item"><a href="/error.html" class="header__menu-link">error 404</a></li>
  <li class="header__menu-item"><a href="/p/pagina-1.html" class="header__menu-link">Página</a></li>
</ul>

Para poder agregar un nuevo item al menú agrega el siguiente código HTML antes de la etiqueta /ul:

<li class="header__menu-item"><a href="#URL" class="header__menu-link">NOMBRE PÁGINA</a></li>

Si quieres agregar un item multinivel, agrega el siguiente trozo de código HTML dentro de una etiqueta li vacía:

<a href="#" class="header__menu-link header__menu-link--child">submenu</a>
<ul class="header__menu-child">
 <li class="header__menu-item"><a href="#" class="header__menu-link">Sub menu 1.1</a></li>
 <li class="header__menu-item"><a href="#" class="header__menu-link">Sub menu 1.2</a></li>
</ul>

Repite los pasos para agregar los submenus que estimes conveniente.

Redes sociales

Ve a tu panel, luego a la pestaña diseño y busca el widget "Redes sociales" y dale en "editar", se abrirá una nueva ventana con varías opciones, nosotros sólo necesitamos el cuadro de "Nuevo nombre del sitio" y "URL del sitio web nueva". El recuadro de "Nuevo nombre del sitio" nos sirve para agregar el botón correspondiente a una red social, actualmente están disponibles: Facebook, Twitter, Google+, pinterest y tumblr y los valores que se necesitan para activar el botón con su icono correspondiente son los siguientes: facebook, twitter, google, pinterest y tumblr. El recuadro "URL del sitio web nueva" es dónde agregaremos la URL a nuestra red social.

comentarios

En la versión actual, solo están disponible los comentarios por defecto de blogger.

Bueno eso sería todo con la configuración, los colores (tono rojo) se puede cambiar desde la pestaña tema > personalizar. Si te gustó el tema o te gustaría mejorarle algo, te invito a que lo comentes. Si puedes, compártelo en redes sociales, eso me ayudaría mucho. ¡¡Hasta pronto!!

Otros artículos que quizá te gusten.

cargando...

Comentarios

  1. disculpa pero vas a crear nuevas plantillas la chuumoku me gusto pero solo esta esa

    ResponderEliminar
  2. EL lin de descarga no me funciona y no puedo asede a tu pagina de facebook

    ResponderEliminar
    Respuestas
    1. Hola amigo, disculpa que se haya eliminado el tema, pero estoy trabajando en su versión 1.0 que espero esté para principios del próximo mes. También estoy trabajando el rediseño de la web principal por eso no he publicado nada en todo este tiempo, pero el tema si o si estará disponible las primera semana del mes que viene. En cuanto al facebook, decidí borrar la página anterior, pues quería dejarla con el nombre del dominio que adquirí hace poco pero facebook no me dejo. Así que crear una nueva: https://www.facebook.com/Byzeroblogger-230265767738132 Disculpa los inconvenientes, espero tu like en la nueva página. Saludos.

      Eliminar
  3. suerte en las guerras venideras amigo, aunque sea poco contenido el que llevas hasta ahora te sigo ;)

    ResponderEliminar
    Respuestas
    1. ¡Gracias por el apoyo! Pronto se empezará a crear contenido más seguido. :)

      Eliminar

Publicar un comentario