En Blogger hay una infinidad de etiquetas propias de la plataforma, entre las cuales existen las denominadas <data>. Estas tags nos permiten mostrar determinados elementos dentro de nuestro blog, y para nuestra ventaja podemos reubicarlas a nuestro antojo.
Por ejemplo, si deseamos mostrar el contenido de la entrada, símplemente recurrirmos a <data:post.body/>, o bien si necesitamos mostrar el título de ésta, añadimos <data:post.title/> a nuestro código. Para no desviarnos del objetivo principal de esta entrada, no nos adentraremos con detalles sobre el uso de estas etiquetas.
En Blogger también podemos obtener la imagen en miniatura de la entrada, pero sólamente la obtendremos a un tamaño de 72 píxeles. La etiqueta que se encarga de ello es <data:post.thumbnailUrl/>, y devuelve una URL en el siguiente formato:
El valor s72 en la URL indica que la imagen tendrá un tamaño de 72 píxeles, mientras que el valor -C indica que la imagen se mostrará cortada en forma de cuadrado.
Aquí viene el problema, si intentamos aumentar el tamaño de la imagen mediante CSS, debido a su baja resolución se verá pixelada.
La solución: Si estás utilizando la combinación <data:post.snippet/> y <data:post.thumbnailUrl/> (Para obtener el resúmen y la imagen en miniatura correspondientes), puedes optar entonces por utilizar <data:post.firstImageUrl/>, la cual devolverá la primera imagen de la entrada en su tamaño real.
Para utilizarla bastaría con incluir el siguiente código en tu plantilla:
<b:else/> <!-- Código original de la entrada, el cual se mostrará normalmente dentro de ellas y páginas estáticas --> </b:if>
Lo que devolvería lo siguiente:
<div class="entrada-indice"> <a class="titulo-indice-post" href="http://www.tublog.blogspot.com/2013/04/entrada.html"> Soy el título de alguna entrada. </a> <p class="resumen-post"> Soy un breve resúmen de la entrada que se muestra debajo de la imagen en miniatura. <div style="clear:both" /> </p> <img alt='thumb' class="miniatura" src='URL-PRIMERA-IMAGEN'/> </div>
En el caso del ejemplo, los selectores CSS serían los siguientes:
.entrada-indice { /*Atributos para cada entrada dentro del índice*/ }
.titulo-indice-post { /*Atributos para el título de cada título*/ display:block; /*Para pasar el enlace de inline a block*/ }
.resumen-post { /*Atributos para el contenedor del resumen*/ }
.miniatura { /*Atributos para la imagen*/ }
Dentro de cada selector deberás añadir las propiedades que creas convenientes para tu plantilla.
Nota: No es necesario reconstruir la sección completa, bastaría con buscar algo parecido a esto si ya utilizas el sistema que se encuentra en Oloblogger:
A petición de +Danilo Cisneros, he creado un tutorial con el cual conseguiremos ocultar entradas con cierta etiqueta en el inicio de nuestro blog, de manera que éstas aparezcan únicamente al ingresar a la categoría correspondiente.
Esto puede ser útil para filtrar algunas entradas y/u organizar nuestra página de inicio, o bien para lo que desees. También puedes hacer algo "a la inversa", es decir, mostrar las entradas con la etiqueta X y ocultar el resto.
El tutorial:
Para comprobar la funcionalidad del tutorial, he creado un demo en el cual se ocultan todas las entradas etiquetadas como Blogger, las demás se muestran en el índice y en las categorías normalmente.
Opción 1: Ocultar entradas con determinada etiqueta: Con los artilugios expandidos, en nuestro editor HTML buscaremos el siguiente código (Búscalo por su inicio y su cierre):
<b:includable id='post' var='post'>
<!-- Acá va una gran cantidad de código el cual no tocaremos -->
</b:includable>
Cuando hayas encontrado este código, incluye el código siguiente de esta manera:
<b:includable id='post' var='post'>
<!-- Inicio del código--> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:label.name == "Nombre de la etiqueta"'> <b:else/>
<!-- Acá va el código que iba dentro del <b:includable> -->
</b:if> <b:else/>
<!-- Acá va el código que iba dentro del <b:includable>, otra vez --> </b:if> </b:loop> <!-- Fin del código -->
</b:includable>
En donde aparece "Nombre de la etiqueta" escribe exactamente el nombre de cual quieras excluir en el inicio del blog, una vez hecho esto previsualiza los cambios, y si consigues observar el resultado puedes guardar tu plantilla.
Importante: Para que todo siga funcionando correctamente dentro de tu blog, es necesario que el código que estaba dentro del <b:includable> lo agregues también en el espacio que he marcado.
Opción 2: Mostrar únicamente entradas con determinada etiqueta:
Para invertir la operación, bastaría con buscar la segunda condicional dentro del código (La que se encuentra dentro del <b:loop>:
<b:if cond='data:label.name == "Nombre de la etiqueta"'>
Y en donde aparece == deberás dejarlo como !=, quedando de la siguiente manera:
<b:if cond='data:label.name != "Nombre de la etiqueta"'>
Guardas los cambios y listo.
Opción 3: Ocultar y hacer coincidir la última etiqueta:
A petición de +Emilio Luna he actualizado esta entrada con el código para hacer coincidir la última etiqueta de los posts y así ocultarlos:
<b:includable id='post' var='post'> <!-- Inicio del código--> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:label.isLast == "true"'> <b:if cond='data:label.name == "Nombre de la etiqueta"'> <b:else/> <!-- Acá va el código que iba dentro del <b:includable> --> </b:if> </b:if> <b:else/> <!-- Acá va el código que iba dentro del <b:includable>, otra vez --> </b:if> </b:loop> <!-- Fin del código --> </b:includable>
El procedimiento para invertir la función es el mismo que el del método 2.
Habíamos visto con anterioridad la manera de personalizar las entradas de tu blog de varias maneras, pero creo que a muchos usuarios les interesará poder organizar la forma en la que se muestran los elementos dentro de sus artículos. Para ello, he conseguido organizar los elementos mediante etiquetas <b:includable>, para que con unas simples líneas puedas adaptar todo según tus necesidades.
Para que puedas comprender mejor el sistema, bastaría con observar el siguiente código de ejemplo y su modificación:
<!--ESCRUCTURA EJEMPLO 1--> <div class="post"> <código titulo entrada /> <código titulo resúmen post /> <código etiquetas /> </div> <!--ESCRUCTURA EJEMPLO 2--> <div class="post"> <código etiquetas /> <código titulo resúmen post /> <código titulo entrada /> </div>
Las etiquetas de los ejemplos son únicamente para ejemplificar.
Ahora que entendiste el propósito del tutorial, empezaremos con la primera modificación, pero antes te invito a que hagas un respaldo de tu plantilla por si algo no sale bien o por si no te gusta el resultado.
Paso 1: Reemplaza el <b:widget type='Blog'> de tu plantilla:
Lo primero que necesitas hacer, es buscar un código muy similar a este desde la edición HTML de tu plantilla (Sin expandir artilugios):
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
Deberás seleccionarlo, y en su lugar añadir todo este código:
<b:widget id='Blog88' locked='false' title='Entradas del blog' type='Blog'> <b:includable id='post' var='post'>
<div class='post'>
<b:if cond='data:blog.pageType == "index"'> // Acá deberás pegar los códigos de los items que desees mostrar en las entradas del índice. <b:else/> // Esto se verá en entradas y páginas estáticas. </b:if>
</div> </b:includable>
<b:includable id="descripcion"> <!-- LOS SIGUIENTES INCLUDABLES PERMITEN EL CORRECTO FUNCIONAMIENTO DE LAS ENTRADAS DEL BLOG, NO LOS ALTERES A MENOS QUE SEPAS LO QUE ESTÁS HACIENDO
LÍNEAS ORGANIZADAS POR VÍCTOR CALDERÓN PARA AYUDA BLOGGERS. -->
Previsualizas los cambios y verás que hay sólo unas palabras en donde debería ir cada entrada, si efectivamente consigues este resultado puedes guardar tu plantilla.
Paso 2: Reestructura las entradas de tu blog como gustes:
Lo primero que necesitas es ubicar el siguiente código:
<div class='post'>
<b:if cond='data:blog.pageType == "index"'> // Acá deberás pegar los códigos de los items que desees mostrar en las entradas del índice. <b:else/> // Esto se verá en entradas y páginas estáticas. </b:if>
</div>
Si te fijas, hay una condicional que nos permite modificar las entradas de manera distintas tanto para el índice como para las entradas. Lo que haremos ahora será añadir todos los elementos que lleva una entrada, como título, cuerpo del artículo, etiquetas, etc. Observa un ejemplo:
<div class='post'>
<b:if cond='data:blog.pageType == "index"'> <!-- EN EL ÍNDICE --> <b:include name="titulos-entradas" /> <b:include name="resumen-entrada" /> <b:include name="leer-mas" /> <b:include name="enlace-comentarios" /> <b:include name="imagen-miniatura" /> <b:else/> <!-- DENTRO DE ENTRADAS Y PÁGINAS --> <b:include name="titulos-entradas" /> <b:include name="cuerpo-entrada" /> <b:include name="etiquetas-post" /> <b:include name="autor-entrada" /> <b:include name="fecha-entrada" /> </b:if>
</div>
Cada elemento <b:include> posee un atributo name el cual lo define como tal. Puedes probar con todos estos:
<b:include data='top' name='mensaje-estado'/> (Es el mensaje Mostrando entradas con X etiqueta)
<b:include name="autor-entrada" /> (Nombre del autor de la entrada)
<b:include name="leer-mas" /> (Inserta el Leer Más)
<b:include name="resumen-entrada" /> (Añade un breve sumario de la entrada)
<b:include name="cuerpo-entrada" /> (Inserta todo el contenido de la entrada)
<b:include name="enlace-comentarios" /> (Muestra el número de comentarios con su enlace)
<b:include name="editar-entrada" /> (El quickedit para modificar los posts rápidamente - Puede no funcionar)
<b:include name="etiquetas-post" /> (Inserta las etiquetas de la entrada)
<b:include name="fecha-entrada" /> (Muestra la fecha de publicación)
<b:include name="titulos-entradas" /> (Inserta el título de la entrada)
En CodeCanyon encontré un artículo muy interesante que consta en construir spoilers con CSS3 y jQuery mediante el Callback del botón de Google+. Este artículo es un tutorial de pago, así que decidí hacer una alternativa algo similar, pero sin jQuery y con Javascript nativo.
Nota: Para comprobar en el demo si la cookie existe, primero debes actualizar la página, la cookie se almacenará en la entrada y no en todo el blog para prevenir que se desbloqueen todos los posts al mismo tiempo.
El tutorial:
Paso 1: Crear la función para el Callback y definir todas las variables:
Lo primero que debemos hacer es una función, que ésta lleve como parámetro el mismo que el del callback, además debemos empezar con todas las variables que se emplearán y también con las instrucciones que se ejecutarán al hacer +1.
<script type="text/javascript"> // Empezamos con las variables var url = document.URL; // Establecemos la URL actual var ruta = "http://tu-blog.blogspot.com".length; // Obtenemos la longitud de nuestro dominio var mensaje_spoiler = document.getElementById("contenido-oculto"); // Creamos una variable a partir del spoiler var boton_spoiler = document.getElementById("boton-plusone"); // Creamos una variable a partir del botón de Google+ var cookieplus = document.cookie.substring(document.cookie.indexOf("plusoneguardado" + '=') + "plusoneguardado".length + 1,document.cookie.length); // Esta variable nos permite crear un índice por si existen otras cookies almacenadas en la página, con esta la seleccionamos de manera individual if(cookieplus.indexOf(';') != -1)cookieplus = cookieplus.substring(0,cookieplus.indexOf(';'))
function spoiler(plusone) { // Empezamos la función con el Callback if(plusone.state == "on") { // Si el estado del callback es on... mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1 document.cookie ='plusoneguardado=confirmado; path=' + url.substring(ruta,999); // Escribimos la cookie denominada plusoneguardado=confirmado y se le asigna un path, se calcula mediante substring y la longitud de la variable ruta }
}; </script>
Paso 2: Detectar la cookie cuando la página se cargue:
Dentro de la misma etiqueta <script> iniciaremos otra nueva función, ésta se denominará leercookie y designará una serie de instrucciones si la condición se cumple:
<script type="text/javascript"> // Empezamos con las variables var url = document.URL; // Establecemos la URL actual var ruta = "http://tu-blog.blogspot.com".length; // Obtenemos la longitud de nuestro dominio var mensaje_spoiler = document.getElementById("contenido-oculto"); // Creamos una variable a partir del spoiler var boton_spoiler = document.getElementById("boton-plusone"); // Creamos una variable a partir del botón de Google+ var cookieplus = document.cookie.substring(document.cookie.indexOf("plusoneguardado" + '=') + "plusoneguardado".length + 1,document.cookie.length); // Esta variable nos permite crear un índice por si existen otras cookies almacenadas en la página, con esta la seleccionamos de manera individual if(cookieplus.indexOf(';') != -1)cookieplus = cookieplus.substring(0,cookieplus.indexOf(';'))
function spoiler(plusone) { // Empezamos la función con el Callback if(plusone.state == "on") { // Si el estado del callback es on... mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1 document.cookie ='plusoneguardado=confirmado; path=' + url.substring(ruta,999); // Escribimos la cookie denominada plusoneguardado=confirmado y se le asigna un path, se calcula mediante substring y la longitud de la variable ruta }
}; </script>
// Función creada para comprobar si la cookie existe window.onload = function leercookie() { // Cargamos la función al cargar la página if (cookieplus == "confirmado") { // Si la cookie contiene el valor "confirmado"... mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1 }
};
No olvides reemplazar "http://tu-blog.blogspot.com" por la URL de tu blog (Sin / al final).
Nota: Este código debe ir antes de:
</body>
Paso 3: Añadir CSS a los elementos:
Para que todos estos elementos interactúen correctamente, lo que debemos hacer es crear las reglas CSS con las que condicionaremos los comportamientos. Lograremos entonces que la clase .g-activo sea del tipo visible, y .g-oculto una clase invisible, y junto con ello aplicaremos estilos a todos los elementos:
#plus-one { /*Atributos del contenedor del spoiler*/ font-family: 'Open Sans', sans-serif; /**/ background:#F9F9F9; /*Color de fondo en formato hexadecimal*/ border:5px solid white; /*Tamaño, tipo y color del borde*/ box-shadow:0 0 5px rgba(0,0,0,0.1), inset 0 0 5px rgba(0,0,0,0.3); /*Sombras con CSS3*/ color:#888; /*Color de la fuente*/ padding:12px 20px; /*Espaciado del contenedor*/ border-radius:10px; /*Bordes redondeados*/ width:85%; /*Ancho del spoiler*/ font-weight:300; /*Ancho de la tipografía, necesita que ésta la soporte*/ margin:10px auto; /*10px de márgen superior e inferior, y automático para centrar*/ }
#plus-one a { /*Atributos de los enlaces dentro del contenedor*/ text-decoration:none; /*Sin subrayado o algún otro tipo de decoración*/ color:#444;/*Color del enlace*/ }
#boton-plusone { /*Atributos del botón y del mensaje*/ font-style:italic; /*Cursiva*/ }
.g-oculto { display:none; /* g-oculto es una clase invisible*/ }
.g-activo { display:block; /*g-activo es una clase visible*/ }
Nota: Este código debe ir antes de:
]]></b:skin>
Y para la fuente, pega el siguiente código antes de </head>
Una vez que ya tengas todo instalado y configurado correctamente en tu plantilla, deberás pegar el siguiente código en la edición HTML de la entrada en la cual insertarás el spoiler:
<div id="plus-one"> <div id="boton-plusone">Contenido Bloqueado. Para desbloquear el contenido oculto presiona en el siguiente botón. <br /> <g:plusone callback="spoiler"></g:plusone> </div>
<div id="contenido-oculto" class="g-oculto"> Inserta acá el código que se mostrará cuando el botón haya sido presionado. </div> </div>
Importante: Para que el spoiler almacene la ruta correctamente, el spoiler debe ir oculto mediante el salto de línea en la página principal, o de lo contrario almacenará la cookie en dicha URL.
En este artículo veremos 2 métodos para personalizar las fechas con CSS3 y Javascript, ya que hace algún tiempo atrás vimos una forma para hacerlo y algunos usuarios han tenido problemas para incrustar el script correctamente en sus plantillas ya que quedaba un contenedor vacío, no se ejecutaba correctamente la función o había un problema con la etiqueta que se utilizaba.
Para evitar este problema, he creado 2 scripts, si el primero fallara en sus plantillas, pueden recurrir al segundo.
Primer método: Mediante data:post.dateHeader:
La etiqueta <data:post.dateHeader /> es la que se encarga de mostrar la fecha en las entradas de tu blog, genéricamente debería funcionar en cualquier plantilla pero como toda regla tiene una excepción, hay algunas que se niegan a funcionar con esta etiqueta.
Para hacer funcionar este método, primero busca la siguiente línea en tu plantilla (Con los artilugios expandidos):
<data.post.body/>
Arriba de ésta pega el siguiente código:
<script type="text/javascript"> // Script creado por Víctor Calderón Para Ayuda Bloggers - Opción para data:post.dateHeader function dividir_fecha() { var fecha_completa="<data:post.dateHeader/>"; // Formato original de la fecha var nueva_fecha=fecha_completa.split(" "); // Dividir la var con .split dia = nueva_fecha[0]; mes = nueva_fecha[1]; año = nueva_fecha[2]; document.write("<span class=\"dia\">" + dia + "</span>" // Devuelve esto, con mes hasta 3 carácteres únicamente + "<span class=\"mes\">" + mes.slice(0,3) + "</span>" + "<span class=\"año\">" + año + "</span>" );
Posteriormente vas a "Configuración | Idioma y Formato", y en "Formato de cabecera de fecha" estableces el siguiente:
13 Noviembre 2012
Si este método no funciona, suprime el código anterior y prueba con el método siguiente.
Segundo método: Mediante data:post.timestamp:
La etiqueta <data:post.timestamp/> es aquella que muestra la hora en alguna determinada sección de la entrada. Con saber la hora no podemos hacer nada, pero podemos aprovechar una de las opciones que se encuentran en el apartado Formato de hora:
Deberás elegir la que tiene este formato:
martes, noviembre 13, 2012
Una vez que ya seleccionamos esta opción, pegaremos el siguiente script en la misma sección que el anterior:
<script type="text/javascript"> // Script creado por Víctor Calderón Para Ayuda Bloggers - Opción para data:post.timestamp function dividir_fecha() { var fecha_completa="<data:post.timestamp/>"; // Formato original de la fecha var nueva_fecha=fecha_completa.split(","); // Dividir la var con .split var mes = nueva_fecha[1]; var año = nueva_fecha[2]; var dia_nuevo = mes.split(" "); // El día y mes se encuentran juntos, para poder obtener sólamente el día se requiere este fix var dia = dia_nuevo[2];
document.write("<span class=\"dia\">" + dia + "</span>" // Devuelve esto + "<span class=\"mes\">" + mes.slice(1,4) + "</span>" + "<span class=\"año\">" + año.slice(1,5) + "</span>" // Los .slice son para eliminar el espacio y en el caso del mes para limitarlo a 3 carácteres ); }
Previsualizamos si la fecha nos aparece correctamente en cada post, y si es correcto podemos guardar la plantilla.
Nota:
Si aparece un error de síntaxis al intentar previsualizar o guardar la plantilla deberás parsear el código que se encuentra al final del script (Toda la sección de document.write).
Si nosotros lo previsualizamos, veremos el siguiente resultado:
13Nov2012
Para poder aplicar atributos usaremos los selectores ya establecidos en las clases, tanto del <div>, como de los subelementos:
.fecha-ayudabloggers { /*Atributos del contenedor de la fecha*/ }
.dia { /*Atributos del día*/ }
.mes { /*Atributos del mes*/ }
.año { /*Atributos del año*/ }
Puedes jugar con los márgenes, tamaños distintos de fuentes, flotación y todos los atributos que estimes necesarios. Para que puedas tener una idea de lo que puedes hacer, adjunto 2 ejemplos con sus atributos respectivos:
Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
En esta oportunidad veremos cómo modificar la forma en la que se muestra el mensaje bajo ciertas condiciones, es decir, cuando no hayan comentarios, cuando el total sea 1 sólo comentario o cuando estos sean plural.
El tutorial:
Recordemos que el código del CommentLink es el siguiente (Basado en una plantilla con los artilugios predeterminados):
Si nosotros aprovechamos las condicionales de Blogger, podemos hacer que este mensaje varíe según la cantidad de comentarios que existan en la entrada.
La condicional para hacer esto requiere la cantidad de comentarios que se encuentren en una entrada, y para este fín la etiqueta <data:post.numComments/> nos servirá:
Recuerden que las condicionales de Blogger funcionan igual que las de javascript, podemos usar las etiquetas <data> y elegir un valor, que este valor se condicione de manera igual mediante el operador ==.
Sabiendo esto, podemos usar la etiqueta dentro de una condicional de esta manera:
Lo que aparezca encerrado dentro de esta condicional es lo que nosotros mostraremos, asignamos un valor que nosotros mismos añadiremos y encerraremos con el enlace:
<a class='comment-link' expr:href='data:post.addCommentUrl'> <b:if cond='data:post.numComments == 0'> Sin opiniones. </b:if>
<b:if cond='data:post.numComments == 1'> Una opinión</b:if>
</a>
Pero, ¿Qué pasa si la entrada tiene más de 0, y más de 1?
Símplemente recurriremos a <b:else /> para que la condicional actúe cuando el valor sea diferente a 0, y dentro de ésta encerraremos la que irá entre 1 e infinito. Necesitaremos alterar un poco la estructura para que la condicional no se "confunda" y no nos muestre el mensaje duplicado.
<a class='comment-link' expr:href='data:post.addCommentUrl'> <b:if cond='data:post.numComments == 0'> <!-- Si el total de comentarios es igual a 0--> Sin Opiniones <b:else /> <!-- Si la condición anterior no se cumple se aplica lo siguiente -->
<b:if cond='data:post.numComments == 1'> <!-- Si el total de comentarios es 1 --> Una opinión <b:else/> <!-- Si la condición no se cumple y tienen 2 o más comentarios -->
<data:post.numComments/> Opiniones
</b:if>
</b:if>
</a>
Ese código debería dar un resultado como este:
Recuerda que debes encerrar el código mediante el siguiente para que el enlace aparesca únicamente en el índice del blog:
<b:if cond='data:blog.pageType == "index"> <!-- El código anterior deberá ir aquí --> </b:if>
Nota: El código completo debería reemplazar el código por defecto de tu plantilla, si no tienes en enlace puedes pegarlo justo debajo de:
Gracias a Jquery UI, en tan sólo unas cuántas líneas podemos crear increíbles animaciones para nuestra web, ya que viene precargado con infinidad de efectos, interacciones, widgets, etc.
Utilizando efectos de .show, .hide y .delay (Propio de jQuery) crearemos un discreto mensaje informativo que aparecerá en una esquina inferior de nuestro blog, el cual desaparecerá en un determinado lapso de tiempo.
Para ver un ejemplo de este mensaje, puedes presionar en los siguientes botones:
Espera que la transición concluya antes de iniciar otra función:
La lista de efectos en jQuery UI es más extensa, y puedes modificar a antojo los parámetros tales como las opciones, duración, etc.
El tutorial
Paso 1: Instalar jQuery UI en la plantilla:
Para poder ejecutar correctamente las funciones deberás instalar jQuery UI antes de </head> mediante el siguiente código:
Si ya tienes el archivo enlazado en tu plantilla omite este paso.
Paso 2: El marcado del documento:
Después de <body> deberás incluir el siguiente contenedor:
<div id="nota-informativa"> <!--Inserta el texto del mensaje acá --> </div>
No olvides incluir algún fragmento de texto que desees mostrar.
Paso 3: Añadir CSS al contenedor:
Ahora antes de ]]></b:skin> deberás añadir el siguiente código con las reglas del contenedor:
#nota-informativa { padding:5px; /*Espaciado interno*/ width:180px; /*Ancho del contenedor*/ text-align:center; /*Alineación del texto*/ background-color:#FFEE88; /*Color de fondo*/ position:fixed; /*Permite que se mantenga estático*/ display:none; /*Oculta el contenedor*/ left:200px; /*Separación del borde izquierdo*/ bottom:80px; /*Separación inferior del borde*/ box-shadow:0 0 5px #555; /*Sombras CSS3*/ }
Paso 4: Incluir el script con la función en la plantilla:
En este paso repasaremos los conceptos básicos para ejecutar una función, recuerda que al igual que Javascript nativo, necesitas incluir todo dentro de un evento, en nuestro caso haremos que la función empiece al inicio de carga de la página:
<script type="text/javascript"> $(document).ready(function () { // Nuestro script cargará cuando el documento haya cargado al 100% }); </script>
Debido a que el selector de nuestro contenedor es #nota-informativa, procederemos a escribir nuestro script, para ello utilizaremos 4 efectos:
Retardo del script (.delay) >> Uso de .show >> Retardo del siguiente efecto >> Uso de .hide
Si no se entiende, al ver el script posiblemente se pueda ver más claramente:
<script type="text/javascript"> $(document).ready(function () { $("#nota-informativa") .delay(2500) // Tiempo del retraso en milisegundos antes de que aparezca el contenedor .show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ) // Uso de .show, específicamente con bounce y algunos parámetros específicos de esta animación. .delay(2000) //Tiempo de duración del contenedor en la página .hide( "drop", { direction: "down" }, "slow" ); //Uso de .hide, con el efecto drop. }); </script>
Los valores numéricos corresponden a tiempos, y en el caso de bouncing en "distance" es la altura máxima de rebote.
Cada efecto es distinto y tiene distintas opciones, pero básicamente sería lo mismo. Si deseas ver una lista de efectos compatibles puedes revisar la documentación de jQuery UI, en el apartado Effect.
Si te ha gustado el efecto de los ejemplos, puedes observar el código fuente que se muestra a continuación, si quieres que se ejecute alguno de manera automática, no olvides reemplazar el evento al que se expone a principios del paso 4:
Efecto Puff:
Marcado HTML:
<div class="nota-informativa" id="puff"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. </div>
<div class="nota-informativa" id="bounce"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. </div>
<div class="nota-informativa" id="blind"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magnaa. </div>
<div class="nota-informativa" id="explode"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magnaa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
En esta entrada quiero abarcar no sólamente la modificación del primer artículo de nuestro blog, sino también mostrarles algunas alternativas de personalización que con algunos experimentos he conseguido.
Para este tutorial recomiendo encarecidamente que respaldes la plantilla de tu blog ya que cualquier error o modificación incorrecta puede impactar negativamente la forma como se visualisen los posts.
Personalizar el primer post individualmente:
Con este método haremos que el primer post del índice tenga un bloque individual en el cual se puedan trabajar cualquier otro elemento, para ello tendremos que recrear toda la zona e incluir el código dentro de la condicional "data:post.isFirstPost".
El procedimiento es relativamente fácil, pero para no complicarles la existencia pueden utilizar el fragmento que les propongo a continuación.
Para ello, busca el siguiente código:
<b:include data='post' name='post'/>
Selecciona este <b:include /> y reemplázalo con el siguiente código:
<b:if cond='data:post.isFirstPost'> <!-- Empezamos con la recontrucción --> <b:if cond='data:blog.homepageUrl == data:blog.url'> <div id='primer-post' class="post"> <!-- Contenedor del post -->
<b:if cond='data:post.title'> <!-- Título de la entrada (Formato H1) --> <h1 class='post-title entry-title primer-titulo'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h1> </b:if>
<div class='primer-body post-body'> <!-- Cuerpo de la entrada --> <data:post.body/> </div>
<div class="post-footer pie-primer-post"> <!-- Footer de la entrada --> <b:if cond='data:post.hasJumpLink'> <a class="jump-link primer-jump-link" expr:href='data:post.url'><data:post.jumpText/></a> <!-- Leer más --> </b:if>
Previsualiza la plantilla y si el cambio es satisfactorio puedes guardar la modificación.
Para personalizar ahora los elementos del nuevo post, deberás utilizar los selectores que se han comentado en el código anterior, si tienes dudas puedes usar este ejemplo:
#primer-post { /*Atributos CSS del contenedor del primer post*/ background:#FCFCFC; color:#999; text-shadow:0 0 1px #CCC; }
.primer-titulo { /*Atributos CSS del título de la primera entrada*/ font-size:28px; }
.primer-titulo a { /*Atributos CSS del enlace del primer título*/ color:#2e4769; }
.primer-body { /*Atributos CSS del cuerpo de la primera entrada*/ line-height: auto;
}
.pie-primer-post { /*Atributos CSS del pié de la entrada*/ width:96%; margin:0 auto; background:#F7F7F7; box-shadow:0 0 1px #CCC; border:1px solid white; }
.primer-jump-link { /*Atributos CSS del leer más*/ float:left; color:#2e4769; }
.primer-comment-link { /*Atributos CSS del contador de comentarios*/ float:right; color:#2e4769; }
Importante: El código incluye algunos selectores primitivos de Blogger, así que los elementos heredarán algunos atributos que posiblemente no desees, para ello suprime las clases genéricas.
Nota: En EmilioCobos.net nos detallan un método muy sencillo de manipular los post mediante "index="postNum"", un atributo muy útil para modificar los posts según el órden que adopten en el índice del blog, puede usarse de la misma manera para personalizar el primer post, o el segundo, o el tercero, etc.
Personalizar un post según su ID:
Todo post en Blogger tiene un ID numérico e irrepetible, a veces necesitamos hacer modificaciones puntuales en algún post y para ello podemos recurrir a este identificador. En lo personal nunca he tenido que verme en esta situación, pero nunca está de más conocer otros métodos.
Para obtener el ID del post puedes hacerlo pegando el siguiente código arriba de <data:post.body />, deberá aparecer un código numérico arriba del cuerpo del post, que únicamente podrá ver el administrador del blog:
<span class='item-control blog-admin'>El ID de este post es: <i><data:post.id /></i> </span>
Obviamente es una forma un tanto "rústica", pero bastante cómoda ya que en lugar de obtener el ID desde el código fuente, podrás verlo directamente desde la entrada.
Para aplicar atributos al post en cuestión, bastaría con hacerlo de la siguiente manera:
#354041916720973270 { /*Atributos del post ID 354041916720973270*/ }
Importante: Si al hacer esto no hay ningún cambio en la entrada, deberás añadir la ID en el <div> de la entrada, reemplaza esto:
Además, en lugar de usar el ID propio de las entradas de Blogger, podemos utilizar la etiqueta como una clase mediante el bucle de éstas, este método es muy útil para añadir íconos por categorías, o para aplicar estilos según su clasificación. Para ello reemplazaremos el siguiente código:
Es un software que permite a los usuarios realizar animaciones sin necesidad de usar el clásico Flash. Creada en Alemania por la compañía DATA BECKER GmbH & Co. KG.
Algo interesante es que la interfaz a utilizar es muy parecida a la de Flash, pero al terminar la animación y exportarla, el resultado es un código HTML5 totalmente listo para subir a la web y con compatibilidad en todos los dispositivos actuales.
Características
Posea una línea de tiempo para crear un sin numero de fotogramas claves. Pueden ser modificados manualmente o también con un modo de grabación simple.
Inserta de manera fácil todas las habilidades de HTML5 y CSS3. Reflejos, sombras, bordes, rotación 3D, etc.
Escenas y soporte multi-línea de tiempo. Las animaciones pueden ser divididas en diferentes escenas y en varias líneas de tiempo paralelas que se ejecutan activándose cuando una determinada acción se lleva a cabo.
Administrador para JavaScript. Ofrece la oportunidad de escribir funciones propias. Todos los objetos pueden ser abordados y manipulados con la ayuda de su ID.
El software esta en estado beta2, ya que a salido a la luz hace menos de un mes. Las descargas gratuitas estarán disponibles hasta el 30 de septiembre de este año 2012, con una licencia gratis hasta el 15 de octubre. Después de la fecha si obtienen un buen apoyo de la comunidad lanzaran una versión oficial y seguir con su desarrollo, para corregir y mejorar este novedoso software.
Para poder usar el programa solo deben ir a su pagina oficial, registrarse y descargarlo. También en su pagina oficial encontraran algunos ejemplos, tutoriales y un foro en que la comunidad ya esta participando, reportando series de bug, mejoras, etc.
Por mi parte en lo personal, lo he estado probando. Dedicando tiempo en saber usarlo, creando una demo para Ayuda Bloggers. Espero que les guste.
Si estás en el proceso de crear tu propia plantilla para Blogger, te interesará este artículo ya que contiene algunos elementos útiles para que tu plantilla se vea mucho mas elaborada, junto con algunos datos y solución a los errores más comunes que les sucede a la mayoría.
Para este tutorial, me he dispuesto a hacer una plantilla a partir del tutorial anterior, para ello voy a mostrarles un antes y un después para que comparemos el resultado (El color de los contenedores en algunas imágenes es para poder diferenciar y ubicar cada elemento en la página, no se establecerán en el producto final).
Los márgenes, alineaciones y dimensiones:
Lo primero que debes considerar en la creación del blog, es el tamaño y ubicación que tendrá cada contenedor, recuerda que esto permitirá que distribuyas de forma óptima los elementos en el espacio y así podrás trabajar de forma eficiente cada sección (Véase este artículo). Procura siempre:
Que los márgenes siempre estén bien distribuídos.
El tamaño de cada contenedor debe estar claramente establecido, aprovechando pixel por pixel.
Antes de aplicar un márgen, establece un padding para que puedas comprobar cuánto espacio utilizará el contenedor.
Si lo deseas, puedes establecer los contenedores con un margen personalizado, intenta siempre que estos sean valores los correctos.
Recuerda que hay otros atributos que utilizan espacio y modifican el tamaño de los contenedores, como los bordes, considérelos al momento de definir las dimensiones.
Forma óptima de uso:
Para este ejemplo:
Tamaño de la sidebar: 280px(Width)+20px(Padding)=300px
Tamaño de las entradas: 640px(Width)+20px(Padding)=660px
Ancho del #contenedor-general: 960px;
Si nos damos cuenta, el padding de cada contenedor nos resta 10px tanto a la izquierda como a la derecha, por lo que el ancho del contenedor tiene que ser 20px menos para poder ocupar cada pixel y no dejar espacios en blanco, la suma de 660px y 300px da 960px, el mismo valor establecido en el contenedor.
Configurando la tipografía:
Una de las cosas más importantes y que permite resaltar el contenido del blog, son las fuentes, su tamaño, su color y desde el principio debemos saber cual estableceremos.
A considerar:
Para el texto de las entradas, utiliza fuentes claras que no molesten en la lectura.
No abuses del color, intenta siempre que se adapte a los colores de la plantilla, considera esto una vez que ya tengas lista tu selección de colores y ya los hayas aplicado.
No uses fuentes demasiado grandes, ni demasiado pequeñas, establece un punto de equilibrio que consideres apropiado.
. Nota: En el ejemplo he utilizado la fuente "Source Sans Pro", disponible desde Google Web Fonts (Ver guía).
Eligiendo los colores óptimos:
Establecer los colores es una de las decisiones más complicadas, ya que necesitas que combinen en el texto, en los contenedores, en el fondo del blog, etc.
Para ayudarlos un poco en esta labor les recomiendo que utilicen ColorCombos, una increíble base de combinaciones de colores óptimas para el diseño de tu sitio, aquí algunos ejemplos:
Observemos la siguiente muestra, para ello utilizaremos colores claros para el fondo del blog y contenedores, el texto tendrá un color oscuro para que haga contraste y no tendrá un impacto negativo:
Importante:
Nunca utilices colores primarios o colores demasiado básicos, esfuérzate en conseguir un color especial.
No sobrecargues la plantilla en exceso mezclando colores, utiliza sólo nos necesarios.
No es necesario que utilices un color único en algún elemento, puedes usar imágenes o gradientes CSS3 (Ver guía).
Manipulando otros elementos del blog:
Recuerda que tu blog posee muchos elementos que pueden ser personalizados, éstos pueden hacer la diferencia al momento de terminar tu plantilla porque con la "brocha gorda" únicamente personalizas lo general, pero los elementos tales como títulos, enlaces, listas, etc. necesitan atributos por igual.
Adjunto una lista de posibles elementos que decorar junto con una guía relevante:
Si deseas ver una lista completa de tutoriales para personalizar tu plantilla, revisa el índice del blog, encontrarás una gran variedad de artículos útiles.
Correcciones de errores:
1. El blog posee un espacio "en blanco" en la zona superior de la página: Si sucede esto, la forma más sencilla de corregirlo es suprimiendo tanto el padding y el margin del <body> y del </html>:
2. El contenido del blog no se mantiene centrado al hacer zoom: Considera establecer un ancho fijo o porcentual y márgenes laterales automáticos en el contenedor del blog:
#contenedor-general { width:960px; /*Ancho en píxeles, puedes usar em o %*/ margin:0 auto; /* Utilizar un valor automático permite centrar un elemento block o inline-block*/ }
3. Aparece una barra de desplazamiento horizontal en el navegador y las dimensiones no sobrepasan el ancho del monitor: Si esto es un problema, podemos eliminar la barra con el atributo "overflow-x:hidden" en el cuerpo del documento web:
body { overflow-x:hidden; /*Barra horizontal (eje x) oculta*/ }
4. Al establecer el ancho de la cabecera al 100% de la página, éste se queda del mismo tamaño que el resto de elementos: Por defecto, la plantilla mantendrá el mismo ancho que el #contenedor-general ya que ésta se ubica dentro de este elemento, para solucionar esto es necesario tomar el código y situarlo sobre este <div>:
5. Si quiero hacer lo mismo del ítem 4 con el pié de página, ¿Qué debo modificar?: Deberás hacer lo mismo, enviar el elemento 1 nivel arriba en la jerarquía:
¿Necesitas otra ayuda o consejo? Cualquier otra duda o problema en la que necesites un poco de orientación, coméntala y se incluirá en la entrada.
Nota: Esta guía se renovará constantemente para añadir otros elementos, dentro de los que están pendientes:
Atributos de un blog moderno.
Otras correcciones de errores.
Cómo usar Firebug en Blogger (Vídeotutorial explicativo).
jQuery y uso de scripts en determinados elementos.
Añadir elementos tales como un menú sencillo y animado.
Los temas que aún no se han tratado y necesiten una elaboración mas detallada se crearán en una entrada adicional, y si te ha gustado este artículo por favor compártelo en tus redes sociales, publicar se ha vuelto un tanto dificil.
