Consejos Blogger: septiembre 2010

jueves, 30 de septiembre de 2010

Qué hacer si... Quiero reportar un blog

Una de las formas de contribuir a que la red sea más segura para nosotros y nuestros hijos es saber identificar los blogs que irrumpen la Política de contenido de Blogger y reportarlos para que Blogger pueda tomar las acciones que consideren pertinentes.

Como dije, es necesario saber identificar estos blogs, pues, debe quedar claro que un blog que puede ser reportado no es un blog con el cual no estamos de acuerdo por sus ideas políticas, personales o de cualquier otra índole del cual estemos en desacuerdo. Sino que es aquél blog que infringe las Política de contenido de Blogger que son bastante claras y que puedes entender un poco más de ellas en la entrada Qué hacer si... Me eliminaron el blog.

Bien, ya habiendo quedado claro cuáles son los blogs que pueden ser reportados tenemos dos opciones a las que podemos recurrir para denunciarlo.

El primero es que, si el blog cuenta con la Navbar deberás hacer click en Informar sobre mal uso.

Una vez que des click ahí se abrirá una ventana con un texto en inglés que traducido al español dice esto:

Una de las características de Blogger es la importancia de la libertad de expresión. Blogger es un proveedor de herramientas de creación de contenido, no un mediador de dicho contenido. Permitimos a nuestros usuarios crear blogs, pero no hacer ningún reclamo sobre el contenido de estas páginas, ni tampoco censurarlas. Sin embargo, Blogger tiene normas y políticas para proteger a nuestros usuarios y la red de Blogger, así como para garantizar que Blogger está cumpliendo con todas las autoridades nacionales, estatales, internacionales y leyes locales.

Y debajo verás tres opciones:
Spam (Más información.)
Desnudos (Más información)
Alguien está publicando mi información privada

Sólo selecciona la opción que corresponde y da click en Continue.

La segunda opción es para aquéllos blogs que no tienen la navbar, o bien, para cuando la infracción es de otro tipo y no está especificada en las opciones anteriores.

En esos casos hay que ingresar al Centro se asistencia y veremos algunos enlaces, pero son sólo cuatro los que nos interesan que son: informar sobre SPAM, desnudos, contenidos discriminatorios, o cuestiones legales.

Este último deberá ser utilizado sólo cuando se trate sobre la violación a alguna ley de tu país, por ejemplo pedofília, fraude, etc.

Para acceder a esa opción debes hacer click en:

¿Has visto contenido inadecuado o ilegal? Averigua cómo puedes informar de este contenido.

Y a continuación click en:

Me gustaría informar sobre cierto contenido que es ilegal en mi país.

En cualquiera de estas dos opciones hay que tener en cuenta que, a menos que se trate de un asunto legal (el último formulario), Blogger necesita que haya reportes de distintos usuarios sobre el mismo blog para que puedan tomarlo en cuenta, así que una vez que lo has reportado puedes comunicarte con el Foro de Ayuda de Blogger para informar sobre el blog que está cometiendo las infracciones y así otros usuarios también puedan reportarlo (esto último no digan que yo se los dije).

Ya que Blogger ha recibido varios reportes y comienza a darle un seguimiento mostrará en dicho blog un anuncio como este:

Este blog se está revisando debido a una posible infracción de las Condiciones del servicio de Blogger y solo está abierto a los autores.

Ahora, es posible que aunque ya hayas hecho el debido reporte no pase nada por mucho tiempo, la razón, no lo sé, sólo un empleado de Google puede responder a esa pregunta. Quizá se deba a que se necesitan muchos reportes de distintos usuarios, o que Blogger no considere que se trate de una infracción.

En los casos en los cuales la infracción sea un delito sancionado en tu país, además de usar el formulario para asuntos legales, puedes, si lo consideras necesario, presentar una denuncia formal en las oficinas policíacas de tu país que correspondan.

Hay que ser consientes que estas medidas no son para afectar a otros autores de blogs o que se trate de una cacería de brujas, sino más bien, para ayudar a que la navegación en Internet sea segura para nosotros y los más pequeños.

Capturando el viento - Entusiasmo

Antes de ver el video, leer, por favor lo siguiente:

La palabra ENTUSIASMO viene del griego y significa:

"tener un dios dentro de ti"

Según los griegos sólo las personas entusiasmadas eran
capaces de vencer los desafíos de lo cotidiano, crear
una realidad o modificarla.
Por eso las personas entusiasmadas creen en sí, actúan
con serenidad, alegría y firmeza.
No es el suceso el que trae al entusiasmo, es el entusiasmo
el que trae al suceso.
El entusiasmo es diferente al optimismo.
Optimismo significa esperar que una cosa salga bien.
Entusiasmo es creer que es posible hacer que salga bien.
Ahora si, mirá el video y vas a entender el porque de la introducción.

Separación entre líneas, palabras y letras

A veces da la sensación que nos ponemos de acuerdo a la hora de preguntar algo, no creo que sea telepatía sino más bien coincidencia. Y la coincidencia de esta semana ha sido la separación entre líneas en los textos.

Me comentan que aunque con el editor dejan un espacio mínimo entre líneas al dar salida al post el espacio no se muestra igual, eso puede ser debido al editor de Blogger pero también podemos establecerlo en los estilos de la plantilla.

(Siempre que ponemos ejemplos nos referimos a la plantilla Minima)
En body establecemos el tamaño de fuente del cuerpo del blog.

body { 

font-size: 14px;

...............

...............

}

Pero también podemos establecer un tamaño distinto para el contenido de los post en:

.post {

font-size: 14px;

...............

..............

}

Aquí un ejemplo de las propiedades más usadas para establecer distancia entre líneas, palabras o letras.

La propiedad line-height controla la altura de cada línea de texto

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five.

(line-height: 12px)

(line-height: 32px)

La separación entre letras la conseguimos utilizando la propiedad letter-spacing

(letter-spacing: 4px)

(letter-spacing: 1px)

La separación entre palabras la controlaremos con word-spacing

(word-spacing: 12px)

Cualquier propiedad añadida en nuestra hoja de estilos antes de ]]></b:skin> se mostrará en todo el blog, si por ejemplo añadimos una propiedad al contenido de los post todas las entradas se mostrarán de igual forma porque está establecido así en la hoja de estilos.

También puede llegar el caso que deseamos añadir a un texto una propiedad en concreto, esto es valido para cualquier propiedad, lo podemos hacer con html de esa forma no se mostraría en todo el blog sino en el lugar que lo añadimos.

<div style="color: #4ac0ee; font-family: Arial; font-size: 26px; font-weight: normal; text-align: center; word-spacing: 12px; text-shadow: 1px 2px 1px #000;">Este sería el texto a incluir</div>

Este sería el texto a incluir

Añadimos "color" para el color de letra, el tipo de fuente con "font-family" el tamaño de letra con "font-size", para el grosor de letra "font-weight", centramos el texto con "text-align", separamos las palabras con "word-spacing" y rizamos el rizo con sombra "text-shadow"

miércoles, 29 de septiembre de 2010

Texturas Bokeh para tus diseños

20 Texturas Bokeh

Formato: JPG HQ (3200 × 2400 px)
Licencia: Gratuita para uso personal y comercial.
Referencia y Descarga: Dezignus

martes, 28 de septiembre de 2010

Aumentar imágenes con Zoom It

Aunque hay librerías de scripts que permiten darle un efecto de zoom a las imágenes de tamaño grande, en ocasiones estas librerías no son compatibles con otros scripts que tenemos, o bien, puede hacer un tanto pesada la carga del blog.

Es en esos momentos en los que agradecemos de servicios gratuitos que nos permiten hacer lo mismo pero sin tener que modificar la plantilla ni hacer malabares que nos den dolores de cabeza.

Un ejemplo de ello es Zoom It, un sitio que nos permite de la manera más simple insertar una imagen en el blog con la opción de aumentar la misma imagen con tan solo darle click sobre ella.

El procedimiento es tan simple que está al alcance hasta de los más novatos. Sólo basta subir la imagen a un alojamiento (incluso en Blogger puede ser). Luego entrar a Zoom It, y ahí ingresar la URL de la imagen que hemos subido y que deseamos mostrar.

Al dar click en Create tendremos lista la imagen con la opción de darle zoom a cualquier parte de ella.

Debajo aparecerán dos opciones, una es la URL para que tus lectores puedan entrar al sitio a verla, y la otra es un script que nos permitirá insertar la imagen dentro del blog, sólo basta copiar el código que está dentro de Embed y pegarlo en una entrada del blog.

En el código podremos observar que se pueden modificar los valores del tamaño.

<script src="http://zoom.it/mXJv.js?width=auto&height=400px"></script>

De modo que width=auto hará que el ancho se ajuste automáticamente al ancho de la entrada, y height=400px es el alto en pixeles que tendrá dicho gadget, se puede ajustar por otro valor más pequeño o más grande, según se desee.

Enlace | Zoom It

lunes, 27 de septiembre de 2010

Galería con CSS efecto hover

¿Recuerdan la galería Fancy Thumbnail? fue una idea de SOHTANAKA a la que decidí hacer unos cambios porque era necesario disponer de un generoso espacio para mostrarla.

En Dynamic Drive tenemos la solución para conseguir el mismo efecto con CSS, lo podemos conseguir con cualquier cantidad de imágenes y unos simples pasos.

¿Inconvenientes? Sólo se visualiza en Chrome, Safari 4+, Opera 9.5+ y FF 3.6
En plantilla Edición de HTML justo después de ]]></b:skin>


<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

Entrada o gadget de HTML que vamos a mostrar las imágenes.


<div class="hovergallery">
<img src="url-imagen-1"/>
<img src="url-ímagen-2"/>
<img src="url-imagen-3"/>
<img src="url-imagen-4"/>
</div>

Modificar páginas independientes parte 2

Continuando con el tema de la parte 1

Ya que me han realizado varias preguntas tanto en los comentarios como por correo voy a seguir con el tema.

Hay que usar un poco la imaginación y saber que es lo que queremos mostrar en nuestras páginas independientes, esto será según para que se utilicé.

Todas las modificaciones que queremos realizar las vamos a hacer mediante códigos condicionales.

Estos códigos los podemos colocar dentro de <head> y </head> o dentro del cuerpo de la plantilla entre <body> y </body>

El código condicional que se utiliza para las páginas independientes tiene el valor static_page

Ejemplo 1:

<b:if cond='data:blog.pageType == "static_page"'>

TODO LO QUE PONGAMOS ACÁ SOLO AFECTARÁ A LAS PÁGINAS INDEPENDIENTES

</b:if>

Si cambiamos == por != será lo contrario.

Ejemplo 2:

<b:if cond='data:blog.pageType != "static_page"'>

TODO LO QUE PONGAMOS ACÁ AFECTARÁ A TODO EL BLOG MENOS A LAS PÁGINAS INDEPENDIENTES

</b:if>

Si solo queremos modificar una sola página indepentiente y no todas, cambiamos el código condicional y el valor será el link de la página a modificar.

Ejemplo 3:

<b:if cond='data:blog.url == "http://loseasi.blogspot.com/p/contacto.html"'>

TODO LO QUE PONGAMOS ACÁ SOLO AFECTARÁ A LA PÁGINA INDEPENDIENTE
http://loseasi.blogspot.com/p/contacto.html

</b:if>

Al igual que antes, si cambiamos == por != será lo contrario.

Ejemplo 4:

<b:if cond='data:blog.url != "http://loseasi.blogspot.com/p/contacto.html"'>

TODO LO QUE PONGAMOS ACÁ AFECTARÁ A TODO EL BLOG MENOS A LA PÁGINA INDEPENDIENTE
http://loseasi.blogspot.com/p/contacto.html

</b:if>

Para hacer las modificaciones podemos utilizar estilos CSS.

Colocar el código condicional arriba de </head>, con los estilos dentro:

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
clase o id {propiedad: valor}
</style>
</b:if>

De esta forma se mostrará en las páginas independientes un fondo de color negro y ocultamos la cabezera.

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
body {background: #000000;}
#header {display: none;}
</style>
</b:if>

O podemos hacerlo desde el cuerpo de la plantilla:

Ejemplo si tenemos un menú y no lo queremos mostrar en las páginas independientes, lo buscamos y lo colocamos dentro del código condicional.

Algo así:

<b:if cond='data:blog.pageType != "static_page"'>
<ul>
<li><a href="http://URL=">INICIO</a></li>
<li><a href="http://URL=">PERFIL</a></li>
<li><a href="http://URL=">CONTACTO</a></li>
</ul>
</b:if>

De esta forma se mostrará en todo el blog menos en las páginas independientes.

Como dije antes: "Hay que usar un poco la imaginación y saber que es lo que queremos mostrar en nuestras páginas independientes, esto será según para que se utilicé."

domingo, 26 de septiembre de 2010

Entendiendo, manipulando y personalizando los enlaces de las páginas estáticas

Como ya muchos saben, blogger ha habilitado la función de añadir páginas estáticas a el blog.

¿Que son las páginas estáticas?

Son páginas independientes, que se diferencian de las entradas porque al crearlas no aparecen en tus entradas y para poder verlas necesitamos tener su enlace.

¿Cómo se hacen las páginas estáticas?

Estas páginas se pueden crear desde un panel similar al panel de edición de entradas, y luego, los títulos, que a su vez son enlaces a dichas páginas, son añadidas a un widget en la columna lateral de tu blog o a la sección del crosscol, según tu escojas.

¿Cómo edito a las páginas estáticas?

Hay varias formas y esto dependerá de lo que quieras cambiar, por ejemplo, si quieres editar los titulos y/o el contenido, tienes que ir a Creación de entradas ► Editar entradas, y editar lo que desees, también lo puedes hacer accediendo a través de la edición rápida de la página, (con el símbolo del lápiz) al igual que lo haces con las entradas, claro, pensando que tienes habilitada la opción de edición rápida en tu blog.

Es posible editar el orden en que las páginas se muestren y seleccionar cual mostrar y cual no, por medio de el widget en el que estan colocadas, y esto lo haces en la sección diseño de elementos de la plantilla, o jalandolo desde tu blog. Para Cambiar el orden solo tienes que arrastrar los títulos de las páginas, y ubicarlos en el orden que quieras, y para mostrar cual se muestra y cual no, solo tienes que marcar la casilla correspondiente.

Como puedes ver es sencillo editarlas, ya que no es necesario ingresar a la sección de HTML, lo que es mucho mas cómodo y rápido.

¿Cómo puedo manipular la ubicación de los títulos (enlaces) de las páginas estáticas y cómo lo personalizo?

Si usmeamos en el código de la plantilla expandiendo artilugios, cuando hemos colocado las páginas en el crosscol, veremos lo siguiente:

<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol'> <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

      <b:loop values='data:links' var='link'>

        <b:if cond='data:link.isCurrentPage'>

          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>

        <b:else/>

          <li><a expr:href='data:link.href'><data:link.title/></a></li>         </b:if>

      </b:loop>

    </ul>     <b:include name='quickedit'/>

</div>

</b:includable>

</b:widget> </b:section> </div>

Nota: Al ser colocadas en el sidebar-wrapper, el código es el mismo, simplemente cambia el id del contenedor de las páginas, que en ese caso sería sidebar-wrapper.

Pero, ¿Qué es lo mas relevante que nos dice este código?

Primero, que las páginas estan ubicadas en una parte de la plantilla llamada : crosscol-wrapper, que no es más que una sección o envoltura, nombrada de ese modo y que generalmente en las plantillas originales de blogger, esta colocado entre la envoltura de la cabecera (header-wrapper) y la envoltura del contenido (content-wrapper).

Que los enlaces de las páginas, están el la sección identificada como crosscol y que es quien le da el espacio físico, por así llamarlo, para poder estar ahí, y que a su vez están dentro de el crosscol-wrapper.

Es decir tu puedes tener definido el crosscol-wrapper en tu plantilla : <div id='crosscol-wrapper' style='text-align:center'></div>, pero si dentro de ella, no esta no esta una sección identificada de x ó y modo, no aparecerá el widget (para poder agregar gadgets) en la parte de diseño de tu plantilla en donde estan los elementos de tu plantilla; en este caso la sección del crosscol wrapper, esta identificada de este modo:

<b:section class='crosscol' id='crosscol'>

Que el ID, identificador de el Widget es Pagelist1, y que el tipo es una lista de páginas, es por ello que tiene la etiqueta ul que ordena a la lista, y los elementos li, que son los títulos de tus páginas.

Que los títulos de las páginas funcionan como enlaces ya que usan una etiqueta llamada <a> , que es que sirve para crear enlaces.

Que estas listas de elementos (títulos de las entradas) ó elementos li, tienen una clase, llamada "selected", por lo cual es posible darles un estilo único al momento en que son seleccionados y se permanece en ese enlace, por lo que, esto, representa una gran ventaja a la hora de crear el diseño de nuestro menú de navegación.

¿Menú de Navegación?, Si, menú de navegación, si te fijas es lo mismo, ya que contiene enlaces, que a su vez están listados.

Ya se puso interesante la cosa, al entender lo anterior, resulta muy sencillo poder darle el estilo que quieras a estos enlaces, y también colocarlos donde a ti mas te convenga dentro de tu plantilla, incluso poder crear otra lista de páginas, para que en lugar de una, tengas 2 o 3, o las que necesites.

Recuerda que podemos tener hasta 10 páginas individuales, y además meter otros enlaces a estas listas, cosa que Rosa ya había explicado como hacer.

Bueno todo esto lo veremos por partes ya que es mucho para ponerlo en una sola entrada, así que lo que sigue, lo veremos en otro capítulo de la serie: Personalizando las páginas estáticas :D.

sábado, 25 de septiembre de 2010

Maravilloso menú Pretty Simple

Este bonito menú trabaja con jQuery y es creación de Codrops está adaptado a menor tamaño que el original para poder mostrarlo en esta entrada pero las explicaciones nos darán como resultado un menú de 800px de ancho y 300px de alto que son las medidas de las imágenes.

Ver demo original del autor en Codrops

Los estilos los añadiremos situándonos en plantilla edición de HTML justo después de la etiqueta ]]></b:skin>


<style type='text/css'>
.rotator{
background-color:#111;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:&#39;Myriad Pro&#39;,Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:52px;
line-height:52px;
background-color:#222;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
line-height:52px;
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
</style>

En el mismo sitio y a continuación añadiremos el contenido del siguiente archivo

Si ya estamos utilizando jQuery para algún otro efecto omitimos el siguiente paso, de utilizarlo por primera vez añadiremos también lo siguiente:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Cada presentación contiene un bloque y es la parte que debemos modificar, que serán el título de la pestaña del menú, el título del contenido, la descripción, la url de la imagen y el enlace con el texto "Sigue..." es algo así:

<li><a href="rot4">Título-pestaña-1</a><div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción1
<a href="#" class="more">Sigue...</a></div>
</div>
</li>

Y el código completo para el menú que añadiremos en un gadget de HTML sería el siguiente:


<div class="rotator">
<ul id="rotmenu">
<li><a href="rot1">Título pestaña-1</a>
<div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción 1
<a href="#" class="more">Sigue...</a>
</div>
</div>
</li>
<li><a href="rot2">Título-pestaña-2</a><div style="display:none;">
<div class="info_image">url-imagen-2</div>
<div class="info_heading">
Texto-contenido-2</div>
<div class="info_description">
Aquí texto descripción 2
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot3">Título-pestaña-3</a><div style="display:none;">
<div class="info_image">url-imagen-3</div>
<div class="info_heading">
Texto-contenido-3</div>
<div class="info_description">
Aquí texto descripción 3
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot4">Título-pestaña-4</a><div style="display:none;">
<div class="info_image">url-imagen-4</div>
<div class="info_heading">
Texto-contenido-4</div>
<div class="info_description">
Aquí texto descripción 4
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot5">Título-pestaña-5</a><div style="display:none;">
<div class="info_image">url-imagen-5</div>
<div class="info_heading">
Título-contenido-5</div>
<div class="info_description">
Aquí texto descripción 5
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
</ul>
<div id="rot1">
<img src="url-imagen-1" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1>
</h1>
</div>
<div class="description">
<p>
</p>
</div>
</div>
</div>

❋ Título pestaña-1, 2, 3, 4, 5 escribimos el título del contenido.

❋ url-imagen-1, 2, 3, 4, 5 pegamos la url de la imagen tal y como la copiamos sin añadir la etiqueta de imagen.

❋ Texto-contenido-1, 2, 3, 4, 5 Escribimos la descripción que se mostrará después del título.
❋ Sigue... lo podemos sustituir por cualquier otro texto.
❋ Hay una parte que dice:

<a href="#" class="more">Sigue...</a>

esa parte la podemos utilizar como enlace, si por ejemplo deseamos enlazar una entrada o una página estática copiamos la url que deseamos enlazar y la pegamos sustituyendo la almohadilla. De esa forma al marcar sobre "Leer más... nos llevará al sitio que enlazamos.

viernes, 24 de septiembre de 2010

Últimos días para votar en los Premios 20Blogs y expulsiones del concurso

José María Martín administrador del blog dedicado a los Premios 20Blogs ha actualizado la siguiente entrada y entre otras cosas informa:

Se están comenzando a aplicar las sanciones -en forma de expulsión- a todos aquellos blogs que han incumplido alguna de las normas. Dichas sanciones serán progresivas desde este momento y hasta el final del período de votaciones, por lo que debes estar atento. Si has votado a alguna de esas bitácoras expulsadas tendrás un voto más en dichas categorías para dárselo a quien creas conveniente. Por otro lado, si ves que se te resta a ti alguno, no te alarmes, puede ser que provenga de alguno de los expulsados. Ten en cuenta que cuando eso pasa, los votos que ellos han emitido también desaparecen.

Queremos que quede muy claro que hasta que las expulsiones no se hagan efectivas no se sabrá con seguridad qué bitácoras son en realidad las favoritas de la comunidad, de tal forma que ello no condicione el voto de nadie.

Entiendo con eso que es posible que algunos participantes tengamos que votar de nuevo en algunas categorías, imagino que llegado el momento lo podemos comprobar si accedemos a LaBlogoteca en Mis votos y como bien dice José María habrá que estar atentos.

También es posible que nos encontremos que nuestra posición descienda o disminuyen los votos y es debido a que los votos dados por los blogs excluidos dejan de tener validez.

En las bases del concurso quedaba muy claro que la organización descalificaría a los blogs que incumplieran cualquiera de las normas establecidas. Con estas medidas que personalmente me parecen muy justas la organización deja bien claro que aunque no se pronuncien durante el concurso siguen llevando un control exhaustivo del mismo.

jueves, 23 de septiembre de 2010

Menú en las entradas del blog (redes sociales y más)

Descargar imagen.

Primeramente descargar imagen y alojarla a su servidor.

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios y justo arriba de ]]></b:skin>

Poner el siguiente código:

.piepost-vku a { background:url(piepost-vku.png) no-repeat; width:21px; height:21px; display:block;float:left;filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE 8 Transparency--*/ }
.piepost-vku a:hover {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE 8 Transparency--*/ }

.piepost-vku1 { background-position: bottom left!important }
.piepost-vku2 { background-position: -26px bottom!important }
.piepost-vku3 { background-position: -52px bottom!important }
.piepost-vku4 { background-position: -78px bottom!important }
.piepost-vku5 { background-position: -104px bottom!important }
.piepost-vku6 { background-position: -130px bottom!important }
.piepost-vku7 { background-position: -156px bottom!important }
.piepost-vku8 { background-position: -182px bottom!important }
.piepost-vku9 { background-position: -208px bottom!important }
.piepost-vku10 { background-position: -234px bottom!important }
.piepost-vku11 { background-position: -260px bottom!important }
.piepost-vku12 { background-position: -286px bottom!important }
.piepost-vku13 { background-position: -312px bottom!important }

a.piepost-vku1:hover { background-position: top left!important }
a.piepost-vku2:hover { background-position: -26px 0!important }
a.piepost-vku3:hover { background-position: -52px 0!important }
a.piepost-vku4:hover { background-position: -78px 0!important }
a.piepost-vku5:hover { background-position: -104px 0!important }
a.piepost-vku6:hover { background-position: -130px 0!important }
a.piepost-vku7:hover { background-position: -156px 0!important }
a.piepost-vku8:hover { background-position: -182px 0!important }
a.piepost-vku9:hover { background-position: -208px 0!important }
a.piepost-vku10:hover { background-position: -234px 0!important }
a.piepost-vku11:hover { background-position: -260px 0!important }
a.piepost-vku12:hover { background-position: -286px 0!important }
a.piepost-vku13:hover { background-position: -312px 0!important }

Cambiar piepost-vku.png por el link donde alojaron la imagen.

Ahora agregaremos el menú al pie de las entradas.

El menú se vera con una imagen mediante CSS Sprite, lo que nos va a ayudar a que cargue mas rápido el blog.

Podemos colocar todos los link o solo algunos.

piepost-vku1: Leer post completo.
piepost-vku2: Ir directo a opinar.
piepost-vku3: Compartir en twitter.
piepost-vku4: Compartir en myspace.
piepost-vku5: Compartir en facebook.
piepost-vku6: Votar post en bitácoras.
piepost-vku7: Compartir en google buzz.
piepost-vku8: Enviar post por correo.
piepost-vku9: Imprimir post.
piepost-vku10: Guardar como pdf.
piepost-vku11: Agregar a favoritos.
piepost-vku12: Agrandar texto.
piepost-vku13: Achicar texto.

Buscamos <div class='post-footer-line post-footer-line-1'/> y justo abajo colocaremos los link:

Código de los link.

<span class='piepost-vku'>
<a class='piepost-vku1' expr:href='data:post.url' title='Leer post completo...'/>

<a class='piepost-vku2' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Ir directo a opinar...'/>

<a class='piepost-vku3' expr:href='"http://twitter.com/home?status=Viendo: " + data:post.title + " " + data:post.url' target='_blank' title='Compartir en twitter...'/>

<a class='piepost-vku4' expr:href='"http://myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en myspace...'/>

<a class='piepost-vku5' expr:href='"http://facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en facebook...'/>

<a class='piepost-vku6' expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' target='_blank' title='Votar post en bitácoras...'/>

<a class='piepost-vku7' expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl' target='_blank' title='Compartir en google buzz...'/>

<a class='piepost-vku8' expr:href='"mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar post por correo...'/>

<a class='piepost-vku9' expr:href='"http://www.printfriendly.com/print?url=" + data:post.url' target='_blank' title='Imprimir post...'/>

<a class='piepost-vku10' expr:href='"http://www.printfriendly.com/print?url=" + data:post.url' target='_blank' title='Guardar como pdf...'/>

<a class='piepost-vku11' href='javascript:AddToFavorites();' title='Agregar a favoritos...'/>

<a class='piepost-vku12' href='javascript:void(0);' onmousedown='agrandartexto();' title='Agrandar texto...'/>

<a class='piepost-vku13' href='javascript:void(0);' onmousedown='reducirtexto();' title='Achicar texto...'/>
</span>

Si no vamos a utilizar algunos de los link solo borrarlo desde <a ... hasta ... />

Si lo queremos mostrar solo al abrir el post lo colocaremos dentro de un código condicional.

<b:if cond='data:blog.pageType == "item"'>

Código de los link.

</b:if>

Si elegimos agregar a favoritos (piepost-vku11), hay que colocar el código JavaScript visto en la anterior entrada:

Arriba de </head>

Poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
function AddToFavorites()
{
var title = document.title; var url = location.href;
if (window.sidebar&&window.sidebar.addPanel) // Firefox
window.sidebar.addPanel(title,url,"");
else if(window.opera && window.print) // Opera
{
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else
window.external.AddFavorite(url, title) // IE
}
//]]>
</script>

Si elegimos agrandar/achicar el texto (piepost-vku12 y piepost-vku13), hay que colocar el código JavaScript.

Arriba de </head>

Poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
var newsfont = 12;
function changeFont(id) {

if (document.getElementById) {
document.getElementById(id).style.fontSize = newsfont+"px";
} else {
if (document.layers) {
document.layers[id].fontSize = newsfont+"px";
} else {
if (document.all) {
eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \"");
}
}
}
}

function agrandartexto() {
if (newsfont < 30) {
newsfont= newsfont +2;
changeFont('main-wrapper');
}
}

function reducirtexto() {
if (newsfont > 12) {
newsfont= newsfont -2;
changeFont('main-wrapper');
}
}
//]]>
</script>

Ver mas detalles sobre agrandar/achicar texto, o elegir otro código JavaScript, en está entrada:

Ver con vista previa antes de colocar el código condicional para ver como va quedando.

Guardar Plantilla.

A los que me pidieron este código disculpen la demora. (mas vale tarde que nunca)

Recuperar las fotos de TinyPic

Desde hace ya un tiempo TinyPic ha tenido que reducir el número de países a los que les da servicio de alojamiento de imágenes debido a que ya no les resulta muy rentable el negocio dado que la mayoría lo utiliza de forma gratuita y es poco el número de usuarios que deciden pagar por este servicio.

Como consecuencia cada vez más los países donde las IP de los usuarios son bloqueadas para que estos no puedan acceder a sus servicios, y esto ha afectado a muchos blogs que tienen dentro de su diseño imágenes alojadas en este servidor. Por lo que ahora en lugar de mostrar la imagen original muestra esta otra:

Para recuperar las imágenes de TinyPic vamos a valernos de cualquier sitio que nos permita navegar anónimamente para que oculte nuestra IP y y de este modo podamos acceder a nuestras imágenes haciéndole creer al servidor que no estamos en nuestro país sino en cualquier otro.

Sitios de estos hay muchos, uno que pueden usar es ProxyGiga.

Lo único que tenemos que hacer es entrar ahí y escribir en el recuadro la URL de la imagen que tenemos alojada en TinyPic y dar click en Go.

De esta forma podremos visualizar la imagen y la podremos guardar en el equipo y subirla a Blogger para evitar problemas futuros. Ya subida la imagen en Blogger (o cualquier otro alojamiento si es que quieres arriesgarte) cambia la URL que tengas de TinyPic por la nueva que acabas de subir y fin del problema.

Otros sitios para esconder la IP:
Megaproxy
ProxyMafia

Agregar a favoritos o marcadores

1:) Con el siguiente código agregaremos el blog a favoritos (IE) o marcadores (firefox).

Ir a Diseño, Elementos de la página y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<div style="text-align: center;">
<a href="javascript:agregarmarcadores();" title="Agregar a Favoritos/Marcadores">Agregar ¿Cómo se hace...? a: <img border="0" alt="Agregar a Favoritos/Marcadores" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSX3cX9ZcpGGJ9jLsY7wQ2121CG1rYUBI_ajN-d9PhaFksVZ6ppth5Ssosj02focor2f9tOBf_dhBktF643aHPoIeODbXgXbYvIrj4P0IkxeiLh5MpVL1r8UKp9DT9sTnouG3rxpqT_dDZ/s1600/FireFoxIE.png" title="Agregar a Favoritos/Marcadores" /></a></div>
<script type="text/javascript">
//<![CDATA[
function agregarmarcadores() {
if (window.sidebar&&window.sidebar.addPanel)
window.sidebar.addPanel("TEXTO O TITULO","http://TU URL.blogspot.com","");
else
window.external.AddFavorite("http://TU URL.blogspot.com","TEXTO O TITULO")
}
//]]>
</script>

Cambios a realizar:

center - Por left o right.
Agregar ¿Cómo se hace...? a: - Texto del link.
FireFoxIE.png - Imagen del link.
TEXTO O TITULO - Texto que se va a mostrar en el panel.
http://TU URL.blogspot.com - Link de tu blog.

Imagen del ejemplo.

2:) Con el siguiente código agregaremos una entrada a favoritos (IE) o marcadores (firefox).

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios y justo arriba de </head>.

Poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
function AddToFavorites()
{
var title = document.title; var url = location.href;
if (window.sidebar&&window.sidebar.addPanel) // Firefox
window.sidebar.addPanel(title,url,"");
else if(window.opera && window.print) // Opera
{
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else
window.external.AddFavorite(url, title) // IE
}
//]]>
</script>

Ahora agregaremos el link o una imagen en la entrada.

El ejemplo que voy a poner se mostrara debajo de la entrada, y solo se verá cuando entren en ella.

Ustedes van a tener que colocarlo en donde mejor les quede, según el diseño de su blog.

Buscar <div class='post-footer-line post-footer-line-1'/>

Y justo abajo poner el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<a href="javascript:AddToFavorites();" title="Agregar entrada a Favoritos/Marcadores" alt="Agregar entrada a Favoritos/Marcadores">TEXTO O IMAGEN</a>
</b:if>

Personalizar donde dice: TEXTO O IMAGEN

Imagen del ejemplo.

En mí blog lo coloque debajo del título.

Arriba de:

<div class='post-header-line-1'/>

<div class='post-body entry-content'>

miércoles, 22 de septiembre de 2010

Vectores Gratis: Imágenes de Hojas de Cuaderno (papel)

Las imágenes de hojas de cuaderno son muy utilizadas en la creación de plantillas, en el digital scrapbooking, entre otros proyectos digitales. Pues aquí te tengo un sitio donde encontrarán muchas y de alta resolución, puedes usarlas tanto en proyectos personales como comerciales, la única restricción es que no se pueden redistribuir "tal y como son", pues sólo pueden ser descargadas desde el sitio web que refiero.

Ver | Descargar

Ve y llévatelas.

Enlace: Fuzzimo

Fuentes gratuitas en Broble

En Broble la descarga de fuentes es gratuita y podemos utilizarlas con cualquier editor que tengamos en nuestro PC simplemente hay que descargar el zip y extraer la fuente, dirigirnos a Windows e incluir la fuente en la carpeta fonts.

martes, 21 de septiembre de 2010

Emoticones cupcake para tu blog

Hola, el otro día me entretuve un poco haciendo uno emoticones de cupcake, la mayoría son gif's animados, pensando en los que les encantanlas animaciones :D los hice a partir de unos brushes que encontré en qbrushes, estan super, los puedes descargar gratis, luego haré una plantilla usándolos :D

Pronto haré una versión con los emoticones mas pequeños, tendré que hacer algunas mejoras en el color y en los bordes, la textura y el brillo, para que al cambiarlos de tamaño, se vean nítidos,es por eso que no me animé a ponerlos todavía en el script, para que se muestren de forma automática en las entradas y los comentarios, pero ya que haga los cambios lo haré y los compartiré con ustedes.

También tengo pensado hacer otros con diferentes formas, por ejemplo de flor, de osito panda, de corazón, de calavera etc.

Bueno, parece que hoy amanecí con ganas de hacer promesas, :D, parezco politica, jaja, mejor ahí les van los emoticones.

Te recomiendo que los almacenes en tu propio servidor de almacenamiento de imágenes como photobucket, o picassa, actualmente tengo cuenta pro, pero no se hasta cuando seguré con esa cuenta y supero el límite de banda ancha de la cuenta gratuita.

Crédito por los brushes:

Lovesiren

lunes, 20 de septiembre de 2010

Menú desplegable con efecto deslizante

Este es un menú vertical desplegable que funciona a base de las librerías de Scriptaculous y Prototype que harán que se mantenga oculto en un extremo de la ventana y que se despliegue una vez que demos click en él. Este menú es muy conveniente para quienes les gusta ahorrar espacio y mantener el aspecto del blog muy prolijo. Además, el efecto deslizante que tiene le da muy buen gusto.

Puedes ver un ejemplo funcionando en este blog de pruebas.

Para colocarlo en tu blog sólo sigue estos tres pasos, primero entra en Diseño | Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

#sideBar{
text-align:left;
}

#sideBar h3{
margin:10px 10px 10px 10px;
color:#FFFFFF;
font-size:110%;
font-family:arial;
font-weight:bold !important;
}

#sideBar h3 span{
font-size:125%;
font-weight:normal !important;
}

#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074; /* Color de fondo de las pestañas */
width:177px;
color:#FFFFFF; /* Color del texto de las pestañas */
}

#sideBar li a{
width:100%;
}

#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

#sideBar li a:hover{
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:underline; /* Subrayado en el link al pasar el cursor */
}

#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtXqrrsISmw3n7A3DFzmqc8hxp42zH-Th-_6jwQPIm-1nVS0GXLUu-doqzRysrw1d-yVZA40mBBL5CXI_x9WVkL-iy8hzTzcaYmPRyvyaKbrorqT5SgkfMiMS-7zZh5oaZZXzYsS-LgFEB/s1600/background.png);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0;
}

#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px; /* Alto del menú */
}

#sideBarContentsInner{
width:200px;
}

Luego antes de </head> pega esto:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>


<script type='text/javascript'>
var isExtended = 0;
function slideSideBar(){
new Effect.toggle('sideBarContents', 'blind', {scaleX: 'true', scaleY: 'true;', scaleContent: false});
if(isExtended==0){
new Effect.Fade('sideBarContents',
{ duration:1.0, from:0.0, to:1.0 });
isExtended++;
}
else{
new Effect.Fade('sideBarContents',
{ duration:1.0, from:1.0, to:0.0 });
isExtended=0;
}}
function init(){
Event.observe('sideBarTab', 'click', slideSideBar, true);
}
Event.observe(window, 'load', init, true);
</script>

Por último antes de </body> pega este código:

<div id='sideBar'>
<a href='javascript:void(0)' id='sideBarTab'><img alt='sideBar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJjfeFSLnr-idFDg8PEKASbl6w5mwSKUOkoFA8rcdu82Gh7beLdfEhsnuSRXaPa181VXBPakPXE_SAu5P1QEtUAUjxNryAdRHYvyBRLcbvv15v9QKXc52xtDTC-Zf47kxP6KdaLDKE9u4/s1600/slide-button.gif' title='sideBar'/></a>
<div id='sideBarContents' style='display:none;'>
<div id='sideBarContentsInner'>
<h3><span>Contenido</span></h3>
<ul>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a href='URL del enlace'>Pestaña 3</a></li>
<li><a href='URL del enlace'>Pestaña 4</a></li>
<li><a href='URL del enlace'>Pestaña 5</a></li>
<li><a href='URL del enlace'>Pestaña 6</a></li>
</ul>
</div>
</div>
</div>

Cambia la URL del enlace donde se indica así como el título de la pestaña y ya estará funcionando.

En el primer código hay unas anotaciones en color verde que se pueden personalizar tales como el color del texto, tamaño, etc.

Luego, tanto el fondo del menú como el botón que dice 'menú' son dos imágenes, por lo tanto, si se desea cambiar de color deberán editarse estas imágenes. Esas imágenes están en el primer y último código, las he puesto en color azul para que las identifiques, la primera corresponde al color de fondo y la segunda al botón del menú.

Sin duda es un menú al que se le puede sacar mucho provecho, ya sea para agregar contenido del blog, redes sociales, o cualquier otro tipo de enlaces que se deseen tener de manera que no ocupen mucho espacio en el blog.

Por último recuerda que el menú usa Scriptaculous y Prototype por lo tanto, si usas Mootools o jQuery seguramente no podrás utilizarlo.

500 iconos a redes sociales

Ecualink 500 Iconos gratuitos a redes sociales.

REFERENCIA:@EcuaLink

Green Thumb Social Icons

Green Thumb es una colección primaveral de íconos de las principales redes sociales.

CARACTERÍSTICAS

Pack de 12 íconos de las principales redes sociales: RSS, Delicious, Facebook, Design Bump, Design Float, Digg, Linkedin, Myspace, Reddit, Stumbleupon, Technorati y Twitter.
Autor : Chris Thurman
Formatos: PNG, ICO.
Tamaños: 256x256, 128x128, 64x64, 32x32.

Descargar

domingo, 19 de septiembre de 2010

La etiqueta span y los caracteres Unicode

Hace unos días me preguntaban sobre una forma de dar estilo a caracteres especiales más conocidos como Unicode y es muy sencillo si utilizamos la etiqueta span de la que ya hablamos en otra ocasión.

Este carácter ► para mostrarlo tendríamos que escribir lo siguiente ►
Si utilizamos la etiqueta span de esta forma:

<span style="vertical-align: middle; color:#990000; font-size:20px;">►</span>

Tendríamos este resultado ►

Es tan sencillo como pensar el color y tamaño que deseamos darle, añadir los estilos y antes del cierre de la etiqueta span añadir el carácter que vamos a utilizar.

☀ ♬ ☎ ❁ ❧ ®

sábado, 18 de septiembre de 2010

Tabla de equivalencias css

Por preguntas realizadas por la entrada anterior con respecto al tamaño de las fuentes, agrego una tabla.

Esta tabla es para ver las diferencias entre pt, px, em y %.

Es una aproximación, que dependerá de la fuente, el navegador y sistema operativo.

Tener en cuenta el tamaño de la fuente padre en el cuerpo del diseño, sobre todo si utilizamos porcentaje.

PT (puntos): Valor en puntos.

PX (píxel): Significa pixeles y es un punto de la pantalla.

EM (M): Es una medida tipográfica que equivale al ancho de la letra eme.

% (porcentaje): Si un padre tiene como tamaño de fuente 20px y el hijo posee un tamaño de 50%, este tendrá un tamaño final de 10px.

Si se establece el tamaño de letra al elemento <body>, todos los elementos de la página tendrán el mismo tamaño de letra, salvo que indiquen otro valor.

body { font-size: 10px; }
h1 { font-size: 2.5em; }
h2 { font-size: 150%; }

En primer lugar, se establece un tamaño de letra base de 10 píxel para toda la página. A continuación, se asigna un tamaño de 2.5em al elemento <h1>, por lo que su tamaño de letra real será de 2.5 x 10px = 25px. Después asignamos un porcentaje al elemento <h2>, por lo que su tamaño de letra real será de 1.5 x 10px = 15px.

Les recomiendo leer acá:

viernes, 17 de septiembre de 2010

Ocultar títulos de las páginas estáticas

Una pregunta que me hacen muy seguido es cómo ocultar los títulos de las páginas estáticas, pues como son simples páginas el tener un título les da una apariencia de entradas comunes y es justo eso lo que queremos evitar.

El procedimiento es sumamente sencillo y basta usar una condicional que dará la instrucción que cuando se trate de una página entonces el título desaparezca.

Para ocultar los títulos de las páginas sólo entra en Plantilla | Edición de HTML y antes de </head> pega lo siguiente:

<b:if cond='data:blog.pageType == "static_page"'>
<style type="text/css">
h3.post-title {
display:none;
}
</style>
</b:if>

Con ese simple y sencillo paso el título de las páginas no se mostrarán.

Zoom para imágenes con jQuey

Este efecto tan curioso que vamos a ver es de Dynamicdrive y seguramente ya lo vimos con anterioridad en algunas páginas de wallpapers, lo que conseguimos es mostrar una imagen pequeña y al pasar el puntero del ratón visualizar los detalles de dicha imagen con efecto zoom con la posibilidad de acercar más la imagen con la rueda del ratón.

Se consigue gracias a jQuery y si estamos utilizando otra librería no es problema porque podemos conseguir mostrar el ejemplo en un iframe, es decir, añadir el script y los estilos en otro blog y mostrarlos allí donde deseamos. Ver explicaciones en Vagabundia sobre Blogger ultra super minimizado

Ahora si que es el momento de poner manos a la obra porque aunque a simple vista de la sensación de ser algo complicado en realidad no lo es si entendemos su funcionamiento.

Para empezar conseguimos dos imágenes iguales, una de gran tamaño para el efecto zoom que nos permitirá ver los detalles de la imagen y otra de menor tamaño que será la que se mostrará nada más cargar la página.

Una vez tenemos las dos imágenes nos situamos en plantilla edición de HTML, allí localizamos </head> y justo antes añadimos lo siguiente:

(Si ya estamos utilizando jQuery omitimos este paso porque quiere decir que ya tenemos jquery.min.js añadido )

Allí podemos ver en primer lugar los estilos de la imagen del zoom y a continuación el script más extenso. Al principio del primer script veremos la siguientes líneas:

jQuery.noConflict()

var featuredimagezoomer={
loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBa8hoczcsDRwsEj6hCTfQTDRMttGFukiCtEOPIfpcXBxbW62v1iPgLuJ8zvqKaWR3xLkIsmDSbD04f_5oFWHWtXh9RZ2PVpJxiWLd3R_lKvaMOg9gUjosItNOwtoX1NxPsuY-4j1ZtTfa/s0/spinningred.gif', //full path or URL to "loading" gif

Lo marcado en color rojo es la imagen de carga que podemos cambiar por otra simplemente sustituyendo la url de la imagen.

El siguiente script es el sitio para añadir la url de la imagen grande y también especificar el tamaño que se mostrará en el zoom.

$('#image1').addimagezoom({

zoomrange: [3, 10],

magnifiersize: [300,300],

magnifierpos: 'right',

largeimage: 'url-imagen-1' //<-- No comma after last option!

}

Donde url-image-1 añadimos la primera imagen grande.

El primer valor es para la anchura de la imagen que nos mostrará el zoom, el segundo valor será para la altura.

Si mostramos el efecto en una entrada debemos tener en cuenta el ancho de la miniatura y el que especificamos para la imagen del zoom porque la suma de los dos anchos no debe ser superior a nuestras entradas de lo contrario nos creará problemas y no quedará demasiado bien estéticamente.

Para añadir el efecto más de una vez, procedemos de la misma forma que la anterior, lo haremos a continuación donde dice #image2. Veremos que a continuación tenemos preparado para añadir una tercera imagen a falta de añadir las propiedades de imagen, si dudamos también podemos copiar el código anterior y cambiar de forma que sea #image3 ó #image4 y así sucesivamente.

$('#image3').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
largeimage: 'url-imagen-3' //<-- No comma after last option!
})

Terminamos con la plantilla guardando los cambios y nos dirigimos justo al sitio que deseamos mostrar el efecto. Si es un gadget editamos un gadget de HTML. En el interior del gadget o entrada añadimos lo siguiente:

Con width establecemos la anchura de la imagen pequeña y con height la altura, sin olvidar que deben ser iguales las dos imágenes, y a su vez coinciden con la misma id.

Agrandar y reducir texto

Hay varias formas que podemos agrandar y/o reducir el texto de nuestro blog.

Todas estas formas se pueden hacer agregando un código JavaScript.

Podemos agrandar todo el texto del blog o solamente una parte que elijamos.

Yo voy a poner varios códigos, ustedes eligen el que crean mas conveniente.

Los ejemplos que voy a mostrar tienen una fuente principal de 12px, que viene a ser la que se encuentra en el body del blog.

Podemos verlo en nuestro código CSS de la plantilla buscando:

body {
.......
font-size: 12px;
.......
}

Si no es 12 px, pueden cambiar el tamaño en los siguientes códigos.

Parte 1: (Código JavaScript)

Poner el código arriba de </head>

No hay que poner todos los códigos, como dije antes ustedes elijan solamente uno.

Para todo el texto del blog:

Funcionará en el total del blog, mientras no tengamos en alguna etiqueta un tamaño menor en px, pero lo podemos solucionar cambiando el tamaño en px por un % aproximado.

10px cambiarlo, por ejemplo 85%.

Código 1:

Este código es sencillo, solo cambiara el texto a un tamaño elegido.

El texto se agrandará a 22px y se reduce a 12px. (personalizar a gusto)

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
document.body.style.fontSize="22px";
}
function reducirtexto(){
document.body.style.fontSize="12px";
}
//]]>
</script>

Código 2:

El texto se va agrandando de a 2px en 2px, hasta un máximo de 5 veces, de la misma forma se va a ir reduciendo.

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
var txt = document.body;
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="12px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "22px";}
}
function reducirtexto(){
var txt = document.body;
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="22px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "12px";}
}
//]]>
</script>

Para una parte que elijamos del blog:

Lo que va a agrandar o reducir es el texto de una parte del blog, utilizaremos para ello una ID.

En los ejemplos yo elegí la id main-wrapper.

Si quieren pueden agregar el contenido del texto dentro de una ID.

Ejemplo:

< id="nombreID" >
.... contenido con texto ....
</div>

O bien colocan el ejemplo para que agrande el texto de las entradas.

<div class='post-body entry-content'>
<div id="nombreID">
<data:post.body/>
<div style='clear: both;'/> 
</div>
</div>

Cambiar "nombreID" por el mismo que tendra el script.

Código 1 con ID:

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
document.getElementById("main-wrapper").style.fontSize="22px";
}
function reducirtexto(){
document.getElementById("main-wrapper").style.fontSize="12px";
}
//]]>
</script>

Código 2 con ID:

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
var txt = document.getElementById("main-wrapper");
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="12px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "22px";}
}
function reducirtexto(){
var txt = document.getElementById("main-wrapper");
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="22px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "12px";}
}
//]]>
</script>

Agrego otro código que es el que actualmente utilizo en mi blog.

Código 3 con ID:

<script type='text/javascript'>
//<![CDATA[
var newsfont = 12;
function changeFont(id) {

if (document.getElementById) {
document.getElementById(id).style.fontSize = newsfont+"px";
} else {
if (document.layers) {
document.layers[id].fontSize = newsfont+"px";
} else {
if (document.all) {
eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \"");
}
}
}
}

function agrandartexto() {
if (newsfont < 30) {
newsfont= newsfont +2;
changeFont('main-wrapper');
}
}

function reducirtexto() {
if (newsfont > 12) {
newsfont= newsfont -2;
changeFont('main-wrapper');
}
}
//]]>
</script>

Si eligieron la opción de las entradas, no olvidar cambiar la ID main-wrapper por la Id que pusieron en el div. (nombreID)

Ya elegido y colocado uno de los códigos, guardar cambios.

Parte 2: (Colocar link o botón)

Lo que vamos a hacer es colocar los link llamando a las 2 funciones, una para agrandar y otra para reducir el texto.

Esta parte es igual para cualquiera de los 5 ejemplos de los códigos JavaScript.

Colocaremos en la parte del blog que quieran, puede ser en un gadget para mostrar en la sidebar, o directamente en las entradas.

Si van a ponerlo en las entradas pueden colocar los link dentro de una condicional, para que se vea unicamente al abrir el post.

Ejemplo:

<b:if cond='data:blog.pageType == "item"'>
ACÁ PONER LOS LINK
</b:if>

Ver entrada similar:

Código de los link:

<a href='javascript:void(0);' onclick='agrandartexto();' title='Agrandar texto...'>Agrandar texto</a>
<a href='javascript:void(0);' onclick='reducirtexto();' title='Reducir texto...'>Reducir texto</a>

Cambiar el texto.

Pueden poner en su lugar una imagen:

<img scr="URL de la imagen"/>

Pueden encontrar imágenes acá: http://www.iconfinder.com

Ver como queda en vista previa, y si todo va bien guardar.

Otra entrada para cambiar el texto: