toggle

Cave – plantilla para imágenes responsive, blogger

min Cave
Demostración Video Descargar

—Versión actual 1.06

Ya me habían pedido en varias ocasiones una plantilla para imágenes y eso es lo que hace Cave. Es muy importante aclarar que si pretendes hacer un blog normal con Cave, esto no será sencillo, debido a que la plantilla ignora cualquier elemento html o texto que incluya una entrada, para centrarse únicamente en la imagen. Claro está, que si tienes los conocimientos necesarios puedes darle cualquier uso a la plantilla.


Características


Imágenes PNG

¿Y si la imagen es transparente? - Una imagen con fondo blanco y una sin fondo, no se perciben si ambas se proyectan sobre el mismo fondo blanco. Cave comprueba la extensión de la imagen y muestra un fondo según la ocasión.


Cave PNG

Esto es muy útil para las páginas que se dedican a compartir renders ya que es una forma rápida y sutil de decirle a tus usuarios que esa imagen no tiene fondo.


Contenido para adultos

¿Y si la imagen no es apta para todos? - Cave puede censurar la imagen, para esto es necesario especificar la etiqueta mature, que proviene de la frase en inglés mature content (Contenido para adultos). Esto con el fin de que no sea necesario activar la verificación de edad en Blogger, pero puedes optar por cualquiera de los dos métodos.


La etiqueta mature está más encaminada a los blogs de imágenes con contenido variado y no solo para adultos, y funciona sin javascript.


Configuración básica

keywords - Busca la siguiente línea de código y cambiala por tus propias palabras clave. Por defecto este código se encuentra en la línea 30.


<meta content='agrega, tus palabras, claves, separadas, por comas' name='keywords'/>

Fondo y color de la censura - El siguiente codigo se encuentra por defecto en la línea 976, solo tienes que cambiar las imagenes.


<!--Configuracion basica-->
<style type='text/css'>
/*<![CDATA[*/
/*fondo*/
.bg {
/*Descomenta este codigo si deseas usar una imagen de fondo, la imagen debe ir entre las comillas
    background-image: url("");*/
    
/*Si la imagen no se debe repetir cambia "repeat" por "no-repeat"*/
 background-repeat: no-repeat;
/*color de fondo*/
    background-color: #ebebeb;
}
/*Color de la censura*/
.mature {
    background-color: #607d8b;
}
/*Comentarios anonimos (avatar)*/
.avatar-image-container {
    background-image: url("img/anon.gif");
}
/*]]>*/
</style>

Cambiar a la versión alternativa "Darken"

A partir de la versión 1.04 es posible cambiar la vista por defecto a la versión alternativa "Darken" directamente desde la plantilla. Para esto, solo tienes que buscar <body class='default'> y cambiar default por darken, guarda los cambios y listo.


Integrar con Disqus

Ve a tu panel de administración de blogger y busca el siguiente código en la Edición html:


<h4 class='comment-info sub-title'>Comentarios <span>[ <data:post.numComments/> ]</span></h4>
<b:include data='post' name='comment_picker'/>

Bórralo y en su lugar pega el siguiente código:


<h4 class='comment-info sub-title'>Comentarios <span>[ Disqus ]</span></h4>
<div id='disqus_thread'/>
<script type='text/javascript'>
var c = "<data:blog.canonicalUrl/>",  
//<![CDATA[
    b = document.querySelector("#disqus_thread"),
    disqus_config = function() {
        this.page.url = c;
        this.page.identifier = c
    };
(function() {
    var a = document,
        b = a.createElement("script");
    b.src = "//[Shortname_DISQUS].disqus.com/embed.js";
    b.setAttribute("data-timestamp", +new Date);
    (a.head || a.body).appendChild(b)
})();
//]]>
</script>
<noscript>
 <span class='info'>T-T Lo sentimos, los comentarios requieren javascript</span>
</noscript>

Ahora ve a tu panel de Disqus, agrega un nuevo sitio y omite la instalación, ve a la pestaña "general" y copia el nombre corto o shortname, y reemplaza [Shortname_DISQUS] del codigo anterior, por el que copiaste.


Contador Disqus en el inicio

Busca el siguiente codigo en la Edición html de la plantilla:


<span><data:post.numComments/></span>

Bórralo y en su lugar pega el siguiente codigo:


<span class="disqus-comment-count" expr:data-disqus-url="data:post.url"></span>

Para terminar, agrega este script que proporciona la página de Disqus, arriba de </body>:


<b:if cond='data:blog.pageType == "index"'>
  <script id="dsq-count-scr" src="//jsonblogdeprueba.disqus.com/count.js" async="async"/>
</b:if>

Integrar con Google Plus

Instala la versión widget de la plantilla incluida en el zip de descarga. Una vez instalada, dirígete a Configuración > Entradas, comentarios y elementos compartidos, busca la sección "Comentarios de Google+" y cambia la casilla No a Si.


No olvides compartir la entrada y si tienes alguna duda déjala en los comentarios, respondo a todos.