27 abril 2011

Agregar íconos de redes Sociales usando una sola Imagen y crear efecto hover


¡Hola qué tal! Hoy te voy a mostrar la manera de colocar íconos de redes sociales en tu columna lateral o cualquier otra sección que quieras y que soporte gadgets, y  lo vamos a conseguir usando una sola imagen; además vamos agregar un efecto al poner el puntero encima (evento :hover).

Esto lo vamos a lograr usando una técnica llamada sprites. Si nunca has escuchado hablar de esta técnica, puedes ver esta entrada de JMiur donde habla sobre ella. De cualquier modo yo trataré de explicarla lo más claramente que me sea posible.

Esta técnica consiste en crear una solo archivo de imagen, conteniendo todas las imágenes que usaremos en un elemento (o varios), y luego mover o desplazar la imagen creada, con el fin de mostrar la parte que nos interesa. Ésto lo hacemos por medio de la propiedad en CSS llamada background-position.

Para lograrlo, hay que tomar en cuenta las dimensiones de la parte de la imagen que queremos mostrar respectivamente, así como la posición del  icono dentro de la imagen .

VENTAJAS:  Esta técnica es muy conveniente ya que hacemos menos peticiones al servidor de almacenamiento de imágenes que usemos, lo que favorece la carga de nuestro blog, ya que entre menos peticiones de imágenes y scripts (enlazados) tengamos en nuestro blog, éste carga más rápido.

Con ésto nos vamos a ahorrar 7 imágenes ya que usaremos sólo una de las ocho que tendríamos que usar  y sólo para mostrar cuatro iconos, más los del efecto hover.

Tengo dos opciones que he creado y que te voy a compartir, puedes usarlas en tu blog si así lo quieres, aunque hay muchos íconos sociales navegando por ahí que puedes usar para éste propósito.

Primero: crear nuestro sprite

Lo primero que tenemos que hacer, es crear la imagen con nuestros íconos. Para ello, puedes usar Paint.net, Photoshop o Gimp.

En este ejemplo, los icono pequeños serán visibles, y los más grandes se mostrarán al poner el puntero sobre cada icono respectivamente (:hover).


A continuación puedes ver la imagen terminada lista para que la uses. Tiene fondo transparente.


Mide 240 pixeles de ancho por 120 pixeles de alto, la parte de arriba (con los iconos más chiquitos) será la parte visible y la de abajo, con los íconos más grandes, será la que se va a mostrar al poner el puntero del ratón encima de la imagen (evento :hover).

Los iconos visibles miden 40 x 40 pixeles, y los de abajo 60 X 60 pixeles. Para que sea fácil entender el funcionamiento, los iconos deberán estar en un bloque de 60 X 60 pixeles cada uno, (que es la medida de los del icono más grande que son los de abajo).

Entonces, la medida con la que vamos a trabajar para cada bloque es 60 pixeles de ancho por 60 pixeles de alto, y esta es la representación gráfica:


Agregar nuestro código CSS y HTML para poner a los iconos  en acción

Paso 1. Ve a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS y agregamos ahí este código CSS. Si nunca has agregado CSS desde el diseñador de plantillas, te invito a que le eches un vistazo a esta entrada que explica más detalles.

Aquí en es CSS, puedes ver como vamos cambiando la posición de la imagen para que se muestre cada icono respectivamente ;)


/* Marcadores Sociales */
#marcadores{
margin: 20px auto 0;
padding: 5px 0 0 0;
width: 240px;
height: 120px;
}
#marcadores li {
list-style-type: none;
margin : 0;
padding: 0;
float: left;
}
#marcadores li a{
background: url(http://4.bp.blogspot.com/-063Xsp75qOY/TbeA0johGtI/AAAAAAAAFvY/UYDlwDYKEU4/s1600/marcadores-tuto3.png) no-repeat 0 0;
margin: 0;
padding: 0;
display: block;
width:  60px; /*El ancho del bloque con el icono*/
height:  60px; /*El alto del bloque con el icono*/
}
#marcadores li a.rss{
background-position: 0 0; /*posición del icono del feed o RSS*/
}
#marcadores li a.twitter{
background-position: -60px 0; /*posición del icono de Twitter*/
}
#marcadores li a.facebook {
background-position: -120px 0; /*posición del icono de Facebook*/
}
#marcadores li a.youtube {
background-position: -180px 0; /*posición del icono de Youtube*/
}
#marcadores li a.rss:hover{
background-position: 0 -60px; /*posición del ícono del Feed del efecto hover*/
}
#marcadores li a.twitter:hover{
background-position: -60px -60px; /*posición del icono de Twitter del efecto hover*/
}
#marcadores li a.facebook:hover {
background-position: -120px -60px; /*posición del icono de facebook del efecto hover*/
}
#marcadores li a.youtube:hover {
background-position: -180px -60px; /*posición del icono de youtube del efecto hover*/
}


Si te fijas en el código anterior, vamos desplazando los iconos tomando en cuenta la medida del bloque contenedor de cada ícono, que es 60 x 60 pixeles y el primer valor es para la coordenada x (horizontal) y el segundo para la y (vertical).

Paso 2. Haz click en Aplicar al blog para  guardar los cambios.

Paso 3. Ahora necesitas agregar el código HTML, estando "Diseño", luego hace click en agregar gadget en la sección que quieres que aparezcan, y eliges el gadget: HTML/JavaScript, pero antes, deberás cambiar las almohadillas: "#",  por las direcciones web de cada página de red social respectivamente. Puedes usar el bloc de notas de tu computadora para editarlo y luego lo pones en el gadget. Este es el código HTML:


<ul id="marcadores">
<li><a class="rss" href="#"  title="Suscribirse"></a></li>
<li><a class="twitter" href="#" title="Seguir en Twitter"></a></li>
<li><a class="facebook" href="#" title="Seguir en Facebook"></a></li>
<li><a class="youtube" href="#" title="Seguir en YouTube"></a></li>
</ul>


Para editar el código HTML, guíate siguiendo cada linea de código y los colores que puse para que puedas identificarlos fácilmente. el valor del atributo "class" indica a qué red social corresponde cada icono.

Si quisieras cambiar el orden en que los iconos son mostrados (de izquierda a derecha), pon primero la linea del código HTML que corresponde al icono que te interesa. Por ejemplo, si quisieras mostrar primero el icono de Twitter usarías:


<ul id="marcadores">
<li><a class="twitter" href="#" title="Seguir en Twitter"></a></li>
<li><a class="rss" href="#" title="Suscribirse"></a></li>
<li><a class="facebook" href="#" title="Seguir en Facebook"></a></li>
<li><a class="youtube" href="#" title="Seguir en YouTube"></a></li>
</ul>


Paso 4.Finalmente guarda los cambios.

El resultado final, sería este:


Opción 2

Ahora usaremos esta imagen que contiene los iconos del feed, de correo, twitter y facebook , creando un efecto que parece que el icono sale hacia arriba al poner el puntero encima de éste.


Nota: Lee las instrucciones de la primera opción. La imagen anterior tiene fondo blanco.

El CSS sería este:


#marcadores2{
margin: 10px auto 0;
padding: 5px 0 0 0;
width: 200px;
height: 84px;
}
#marcadores2 li {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
#marcadores2 li a {
background: url(http://1.bp.blogspot.com/--DjPR0HsB8c/TbiHJZAWEzI/AAAAAAAAFvw/g0-m4xDQAcU/s1600/marcadores2.png) no-repeat 0 0;
margin: 0;
padding: 0;
display: block;
width:  50px; /*El ancho del bloque con el icono*/
height:  42px; /*El alto del bloque con el icono*/
}
#marcadores2 li a.rss{
background-position: 0 0; /*la posición del icono del feed*/
}
#marcadores2 li a.correo{
background-position: -50px 0; /*la posición del icono de correo*/
}
#marcadores2 li a.twitter {
background-position: -100px 0; /*la posición del icono de Twitter*/
}
#marcadores2 li a.facebook {
background-position: -150px 0; /*la posición del icono de Facebook*/
}
#marcadores2 li a.rss:hover{
background-position: 0 -42px; /*la posición del icono del Feed del efecto hover*/
}
#marcadores2 li a.correo:hover{
background-position: -50px -42px; /*la posición del icono de correo del efecto hover*/
}
#marcadores2 li a.twitter:hover {
background-position: -100px -42px; /*la posición del icono de twitter del efecto hover*/
}
#marcadores2 li a.facebook:hover {
background-position: -150px -42px; /*la posición del icono de facebook del efecto hover*/
}


El código HTML es este:


<ul id="marcadores2">
<li><a class="rss" href="#" title="Suscribirse"></a></li>
<li><a class="correo" href="#" title="Seguir por e-mail"></a></li>
<li><a class="twitter" href="#" title="Seguir en Twitter"></a></li>
<li><a class="facebook" href="#" title="Seguir en Facebook"></a></li>
</ul>


Nota: necesitas poner las URLs de las páginas de cada resd social respectivamente, en sustitución a la almohadilla "#", como te decía en el paso 3 de la primera opción.

El resultado este:

Nota: No agregué el botón de Facebook (no lo uso), para que puedas probar los enlaces.

IMPORTANTE: recuerda guardar la imagen en Blogger para usar su propio enlace y no afectar la carga de la misma en su blog.

Como puedes ver, es posible crear cualquier tipo de efecto que se les ocurra, cambiando las imágenes y usando una sola imagen :)

Probado en: IE6, IE7, IE8, Firefox y Google Chrome

Otras referencias:
css-tricks
Libros Web

Crédito por los iconos de redes sociales
Set1
Set2

en Seguir leyendo
23 abril 2011

Vectores, brushes, patterns e inspiración basada en el Diente de león (Dandelion)

Diente de leon

El diente de león, como se le conocen comúnmente, son esas florecitas silvestres que la naturaleza nos regala y que además de atribuírsele propiedades terapéuticas, han servido de inspiración a diseñadores, ilustradores, fotógrafos, decoradores entre otros artistas, para crear diferentes obras donde figura la forma de la flor.

En el arte, esta flor generalmente se captura cuando las inflorescencias están maduras, que es cuando sus esporas escapan fácilmente por la fuerza del aire.

Cuando era niña, recuerdo que siempre las cortaba y soplaba porque me encantaba ver cómo se esparcían todas sus esporas alrededor de mi... ¿A ti te trae algunos recuerdos esta peculiar florecita? Bueno, sólo espero que no te recuerden que tienes que llamar al jardinero, o decirle al marido que se deshaga de ellas, porque han invadido tu césped o ésa parte del jardín que tienes reservada para otras flores x)

Ahora que estamos en plena primavera y que es tiempo de renovación, aquí te tengo una colección de recursos y creaciones donde figura la susodicha flor, que bien pueden servir de inspiración, o para llevar a cabo algún proyecto digital, incluso para decorar tu casa.

Vectores

vector de diente de leon








Arte Digital y fotografía



DIENTE DE LEON fotografia


DIENTE DE LEON fotografia


Diente de león en arte digital



Patterns








Brushes o pinceles para photoshop y Gimp

Diente de leon BRUSHES





Ilustración

diente de leon ilustracion



diente de león ilustracion


Decoración

DIENTE DE LEON HABITACION



DIENTE DE LEON habitacion

DIENTE DE LEON habitacion

DIENTE DE LEON



Otros elementos de diseño

DIENTE DE LEON

DIENTE DE LEON


diente de leon con tornillos



DIENTE DE LEON LAMPARA


Aunque muchos quicieramos que estas florecitas no se posaran sobre nuestro césped, no cabe duda de que sus formas son muy bonitas e inspiradoras ¿o ustedes que piensan?

Les recomiendo ver los términos de uso de sus respectivos creadores por aquello de los créditos.
en Seguir leyendo
22 abril 2011

+100 iconos muy verdes

Hoy es día de nuestra madre tierra, el día en que debemos recordar que vivimos en un sitio que tenemos que cuidar, amar y respetar todos los días.

Aquí les tengo unos sets de íconos, ideales para blogs de ecología, o para cualquier otro blog que quiera lucir muy verde, los primeros vienen en formato png y se pueden usar tanto en proyectos personales como comerciales...

                       



Y estos otros para tu computadora.




                                    
en Seguir leyendo
19 abril 2011

Introduciendo la plantilla para Blogger simposium


Hola, ¿cómo están?; hoy he terminado otra plantilla y aquí la tienen lista para ser usada en su blog ;).

Ideal para blogs personales, es estilo grungre, aunque el iphone que usé le da un toque de sofisticación, ¿no lo creen?;  espero que les guste.

Características
  • Plantilla de 2 columnas
  • Sidebar fijo, con fondo de iphone (no en IE6 aunque se puede implementar un hack facilmente)
  • Iconos sociales en la columna lateral 
  • Menú con fuentes y colores personalizable que son los títulos de las páginas estáticas
  • Buscador de google integrado en la cabecera, por lo que no tendrás que editarlo para que funcione, excepto por las preferencias de búsqueda que trae consigo el widget
  • Resumen automático en las entradas
  • Fecha tipo calendario
  • Cajas de comentarios personalizados
Es necesario configurar la fecha de la pestaña azul para que se muestre correctamente  y agregar el código en la columna lateral, para que se muestren los iconos sociales, agregando los respectivos enlaces, pero es rápido y fácil.

Configuración de la Fecha
Tienes que ir a Configuración►Formato y en la opción que dice: "Formato de cabecera de fecha" seleccionar la penúltima opción (una antes de la ultima) . 

Agregar íconos en la columna lateral
Deberás ir a Diseño ►elementos de la página y agregar el siguiente código en la columna lateral, eligiendo la opción Html/JavaScript, pero antes, puedes pegar el código en una nota de tu computadora, para agregar los enlaces correspondientes de tu feed, la página de twitter y facebook, repectivamente donde está los gatitos "#", es fácil solo sigue las lineas  y colores que puse, para saber cual corresponde a cada uno.

<ul id="marcadores"><li><a class="rss" href="#"  title="Suscribirse"></a></li><li><a class="twitter" href="#" title="Seguir en Twitter"></a></li><li><a class="Facebook" href="#" title="Seguir en Facebook"></a></li><li><a class="Blogger" href="http://blogger.com/home" title="Ingresar a Blogger"></a></li></ul> 
Pueden cambiar todas las fuentes y colores a su gusto, desde el  diseñador de plantillas yendo a Avanzado,  cambiar los colores del buscador y de la pestaña de la fecha yendo a la Edición de HTML de la plantilla.

Siéntete libre de comentar o preguntar cualquier duda, o sugerencia  :D.

Disfrútenla, y hasta la próxima.


...o si prefieres copiar y pegar el código en la edición de HTML de tu plantilla (recuerda que tienes que borrar el que tienes, y pegar este nuevo, luego, seleccionar la opción de Conservar widgets, para no perder los widgets que tengas en tu blog) aquí lo tienen:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*

Blogger Template Style
Base: Mínima
Name: simposium
Date: Abril 2011
Adaptación y Diseño: compartidísimo
URL:http://compartidisimo.blogspot.com
 */

/* Variable definitions
   ====================

<Variable name="menuTextColor" description="Menu Color texto"
type="color" default="#ffffff" value="#1f272e">
<Variable name="menuHoverTextColor" description="Menu color texto Hover"
type="color" default="#9D1961" value="#d81d75">
<Variable name="menuTextFont" description="Menu tipo de fuente"
type="font"default="normal normal 77% Verdana, sans-serif" value="normal normal 19px Lobster">

   <Variable name="textcolor" description="Text Color"
             type="color" default="#ccc" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#9ad" value="#d81d75">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#ccc" value="#d014c6">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#777" value="#aca6ab">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#ad9" value="#0c3a72">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#777" value="#41290c">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#999" value="#4e2a05">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#a7a" value="#d014c6">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% Verdana, Geneva, sans-serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% Cardo">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 30px Syncopate">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="italic normal 14px Verdana, Geneva, sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 16px Schoolbell">
*/

#navbar-iframe {
        height: 0px;
        visibility: hidden;
        display: none;
}

body {
background:transparent url(http://2.bp.blogspot.com/-r2zrUplXMh0/TbBeHFnbMKI/AAAAAAAAFog/IYiMZNSG0I4/s1600/woodpattern.jpg) repeat top left;
margin:0 auto;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: left;
}
#wrap3{
background: url(http://4.bp.blogspot.com/-St-WJMU-s18/TbBFn6qyvhI/AAAAAAAAFoI/d3gBEnrsiTA/s1600/bodyaft.jpg) no-repeat top left;
margin:1px 0 0 0;
padding:0;
width:100%;
position: relative;
height: 576px;
}

a:link {
color:$linkcolor;
text-decoration:none;
  }
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
  }

a:hover {
  color:$hovercolor;
  text-decoration:none;
}
  
/* Header o cabecera */
#header-wrapper {
margin:0 auto;
padding:0;
width: 980px;
height:250px;
position:relative;
background: none;
}

#header {
margin:0 auto;
text-align:left;
color:$pagetitlecolor;
padding:0;
width:900px;
height:160px;
position:relative;
top:0;
left:0;
}
#header h1 {
position: relative;
left: 20px;
top:40px;
margin: 0;
padding: 0 0 0 5px;
font: $pagetitlefont;
display: block;
max-width: 650px;
line-height:.8em;
text-shadow: -2px 1px 0px #56c3e7;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
position:relative;
top:30px;
padding:0px 0 15px 27px;
max-width:650px;
text-transform:none;
letter-spacing:.2em;
line-height: 1.0em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin:0;
}

a img {
  border-width:0;
  }


/* Date o Fecha  */

#fecha {
display: block;
position: relative;
width:50px;
height:50px;
float:left;
margin: 0;
padding: 3px 0px 8px 0px;
background:#56c3e7 ;
border-top: 1px solid #48a4c2;
border-left: 1px solid #48a4c2;
}

.fecha_mes {
display: block;
font-size: 12px;
font-weight:bold;
padding:5px 0 0 11px;
color:#1a1001;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ffffff;
}

.fecha_anio {
display: block;
padding:0 0 0 0;
font-size: 11px;

}

.fecha_dia {
display: block;
font-size: 19px;
font-weight:bold;
padding:3px 0 0 10px;
color:#1a1001;
text-shadow: 1px 1px 1px #fff;
}
.fecha_anio{display:none;}

/* Outer-Wrapper o Envoltura principal*/
.clear {
  clear: both;
}
#outer-wrapper {
position:relative;
top:0; left:0;
margin:0 0 0 14px;
width: 980px;
padding:0px;
font: $bodyfont;
clear:both;
}
#content-wrapper {
position:relative;
width:990px;
margin:0 auto;
padding:0;
background:none;
text-align: left;
}

#center{
margin:0;
}

#main {
width: 660px;
margin: 0;
background:none;
float: right;
overflow: hidden;
display:inline;
word-wrap: break-word;
}
#sidebar-wrapper {
position:fixed;
top:108px;
left:20px;
background:url(http://2.bp.blogspot.com/-FSkq8t5IKnM/TaxvRKUHShI/AAAAAAAAFlQ/PSPzqDeXzP8/s1600/iphonenp.png) no-repeat;
margin:0;
padding:0;
width:300px;
height:549px;
float: left;
line-height:1.2em;
overflow: hidden;
display:inline;
word-wrap: break-word;
}
/* Headings */
h2 {
margin:1.5em 0 .75em;
line-height: 1.4em;
text-transform:none;
letter-spacing:.2em;
color:$sidebarcolor;
}
.comment-link {
  margin-left:.6em;
}

/* Menu  */
#PageList1 h2{display:none;
}
.menu{
width:540px;
position:relative;
top:-28px;
left:0px;
display: inline-block;
float: right;
margin:0;
padding:20px 0 0 0;
height:40px;
white-space: nowrap;
 }
.menu ul{
margin:0;
padding:0;
list-style-type: none;
}
.menu li{
float:left;
margin:0;
padding:0;
}
.menu li a{
padding:10px 12px 6px 10px;
margin: 0 12px 0 10px;
background:url(http://1.bp.blogspot.com/-mxa7mg4VdDQ/Tatk0glhufI/AAAAAAAAFkA/hxYbhzaH7II/s400/menu.gif) no-repeat;
display: inline-block;
height:25px;
color: $menuTextColor;
font: $menuTextFont;
text-align: center;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
}
.menu li a{
float: none;
}
.menu li a:hover {
background: url(http://1.bp.blogspot.com/-d7SPOJCFD-w/TatgWtOpGcI/AAAAAAAAFj4/Ne8KgnFLkF0/s400/menusel.png) no-repeat;
color: $menuHoverTextColor;
}
.menu li.selected a {
background:url(http://1.bp.blogspot.com/-d7SPOJCFD-w/TatgWtOpGcI/AAAAAAAAFj4/Ne8KgnFLkF0/s400/menusel.png) no-repeat;
margin: 0;
padding: 12px 3px 6px 3px;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
}
#crosscol-wrapper {
margin:0 auto;
width:460px;
float: right;
}
/* Contenedor y estilos del buscador */
#search-conte{
width: 190px;
height: 70px;
position: absolute;
top:220px;
right:0px;
margin:0;
float: right;
background: none;
display: block;
opacity:0.4; filter:alpha(opacity=40)
}
.search-c h2 {
display: none;}

input.gsc-search-button {
color: #000000;
border: 1px solid #16b5e9;
background: #16bff7;
margin: 0;
padding:0 3px 0 2px;
height: 26px;
text-shadow: 1px 1px 1px #ffffff
}

input.gsc-input {
color: #271a02;
background: #c8bf31;
border: 1px solid #9a9212 !important;
padding: 4px
}
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}

/* Posts o Estilos de las entradas */
.post {
padding:10px 7px 14px 9px;
margin: 0 0 30px 51px;
border-top:1px solid #e9dfcf;
letter-spacing:.0em;
line-height:.8em;
font-size:17px;
background:#FFFFFF;
webkit-box-shadow:3px 2px 7px #000000;
-moz-box-shadow:3px 2px 7px #000000;
box-shadow:3px 2px 7px #000000;
}
.post h3 {
margin: -10px 0 0 -9px;
padding: 9px 0 20px 18px;
font-size:120%;
font-weight:normal;
text-shadow: 1px 1px 1px  #cccccc;
color:$titlecolor;
background: url(http://4.bp.blogspot.com/-N-jM2cONyvU/Ta3gEFXsLMI/AAAAAAAAFm4/oooUjTJG0D4/s1600/3p.gif) no-repeat top left;
line-height:1.6em;
display: block;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
.post-body {
line-height:1.4em;
}
.post-body ul li {
list-style-type: square;
}
.post-body blockquote {
  line-height:1.3em;
}
.post-footer {
margin:10px 0 0 0;
padding:10px 0 0 0;
color:$sidebarcolor;
text-transform:none;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
padding:5px 6px 15px 0;
/*background: url(http://1.bp.blogspot.com/-5kR5eWpXfAQ/TYj2cuw03GI/AAAAAAAAFGQ/3j1b3iiABHg/s1600/ttac.gif) no-repeat top left;*/
}

.post img, table.tr-caption-container {
padding:0px;
}

.post-body img{
margin: 5px auto 0;
padding: 3px;
background: #f9f4ea;
padding: 4px;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
 margin: 1em 20px;
padding:8px 5px 8px 5px;
border-left:4px #CEF6F5 solid;
border-right:1px #CEF6F5 solid;
border-top:1px #CEF6F5 solid;
border-bottom:1px #CEF6F5 solid;
background:#f8f8f8;
overflow:auto;
}
.post blockquote p {
  margin: .75em 0;
}

/* Comments o Comentarios */
#comments h4 {
margin: 1em 3em;
line-height:1.0em;
color:#166091;
text-shadow: 1px 1px 1px #000000;
font-size:18px;
}

#comments-block {
margin:0 0 0 10px;
line-height:1.0em;
background:transparent;
color:#20150a;
padding: 1em;
}
#comments-block .comment-body { /* caja de comentarios*/
margin:0 0 1.2em;
background-color: #39a8f3;
background-image: -moz-linear-gradient(top, #39a8f3, #ffffff);
background-image: -ms-linear-gradient(top, #39a8f3, #ffffff);
background-image: -o-linear-gradient(top, #39a8f3, #ffffff);
background-image: -webkit-gradient(linear, left top, left bottom, from(#39a8f3), to(#ffffff));
background-image: -webkit-linear-gradient(top, #39a8f3, #ffffff);
background-image: linear-gradient(top, #39a8f3, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#39a8f3', EndColorStr='#ffffff');
color:inherit;
padding:5px 8px 5px 8px;
line-height:1.1em;
font-size:13px;
-webkit-border-bottom-right-radius: 12px;
-moz-border-radius-bottomright: 12px;
border-bottom-right-radius:  12px;
}
.comment-author { /* sección nombre del comentarista*/
background-color: #39a8f3;
margin:.5em 0 0;
padding:6px;
font-weight:bold;
color:#e6f1f8;
text-shadow: 1px 1px 1px #80c9fa;
font-size:15px;
}
.comment-footer {
margin:0;
margin:-10px 0 10px 0;
font-size:10px;
}
#comments-block .comment-footer  a{
color:#b6dcf6;
line-height:1.2em;
}
#comments-block .comment-body p {
margin:0;
padding: 5px 5px 8px 5px;
font-size:14px;
line-height:1.2em;
overflow: auto;
}
#comments-block a{
color:#2a0a0a;
text-decoration:none
}
#comments-block a:hover{
color:#ee9d3f;
}
#comments-block a:visited{
color:#2a0a0a;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.avatar-image-container{
border:4px solid #ffffff;
margin:-5px 0 0 0;
}
.avatar-image-container.avatar-stock {
background: url(http://4.bp.blogspot.com/-SGVRdTVEU_I/TZtDiTE9xNI/AAAAAAAAFYI/Oj8zWFsfs-Y/s1600/icono-persona-c.png) no-repeat;}

#comment-editor{
margin:0px;

}
.comment-form{
background: #fff;
margin:5px 0 0 40px;
padding:15px;
}


#blog-pager-newer-link {
float: right;
margin-right:70px;
}

#blog-pager-older-link {
float: left;
margin-left:70px;
 }

#blog-pager {
text-align: center;
 }

.feed-links {
clear: both;
line-height: 2.5em;
}

.feed-links {
display:none;
}



/* Sidebar */
.sidebar {
width:252px;
height:349px;
margin:113px 0 0 27px;
padding:0 0 0 0px;
line-height:1.2em;
color:$sidebarcolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */    
overflow: auto;     /* fix for long non-text content breaking IE sidebar float */
}

.sidebar ul {
margin:0;
padding:0 0 0 20px;
}

.sidebar ul li{
font-size: 17px;
}

.sidebar li {
 margin:-8px 0 0 0;
 padding-left:12px;
 }
.sidebar li a{}


.sidebar .widget {
margin:0 0 10px 0;
padding:0 5px 0 10px;
}

.sidebar h2 {
font-weight:normal;
letter-spacing: 0.1em;
padding:4px 15px 7px 4px;
font-size:18px;
text-shadow:1px 1px 1px #000;
line-height:200%;
background:none;
color:#64a6f8;
}

/* Estilos Etiquetas */

#Label1 ul{
margin: -10px 0 0 0;
}

#Label1 ul li{
margin: 0;
padding:0 0 7px 0;
font-size: 17px;
color: #084591;
}


#Label1 li a{
color: #5e646b;
}

#Label1 ul li:hover {
color: #f26917
}

#Label1 li a:hover {
color:#084591;
margin-left: 4px
}

/*#Label1 li:hover {
background: #000;}*/

main .widget{
font-weight:bold;
}

/* Profile o perfil */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 0px;
border: 4px solid #FFFFFF;;
}

.profile-data {
margin:0;
text-transform:none;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: none;
letter-spacing: .1em;
}

.status-msg-wrap{
display:none;
}

.comentacontador a {
float:right;
margin: -15px 0 0 0;
font-size: 22px;
color: #252525;
text-decoration:none;
padding:0px 3px;
}
.comentacontador a:hover {
color: #100808 !important;
}
.avatar-image-container.avatar-stock {
background: url(http://3.bp.blogspot.com/_yCA1gGtzYzo/TONFjN5XWqI/AAAAAAAAEF8/Ykkd8T8ZdO8/s1600/anonimo-compartidisimo.png) no-repeat;}

/* Footer o pie */

#footer-wrapper{
background:none;
width:100%;
height:141px;
margin:0 auto;

}
#footer {
background:none;
clear:both;
margin:0;
padding-top:15px;
line-height: 1.6em;
text-transform:none;
}



/* Estilos leer mas */
a.readmore{}

a.readmore:hover {
font-weight: bold;
}

/* Entradas populares sidebar o Popular posts*/

#PopularPosts1 ul{
margin: 0 0 0 -10px;
color:#2c9be8;
}
#PopularPosts1 ul li{
list-style-type: none;
}


#PopularPosts1 ul li a{
color: #f710d4;
}
/* Marcadores Sociales o Social bookmarks*/

ul#marcadores{
list-style-type: none;
margin: 20px auto 0;
padding: 10px 0 0 0;
width: 200px;
height: 44px;
}
ul#marcadores li {
padding: 0;
float: left;
}
a.rss, a.twitter, a.Facebook, a.Blogger {
background: url(http://3.bp.blogspot.com/-ztX6PHhvlRI/Taz0OPuE_8I/AAAAAAAAFmo/kw4M-Kmrlc8/s400/marcsocilaes.png) no-repeat 0 0;
margin: 0;
padding: 0;
display: block;
width: 48px;
height: 44px;
}

a.rss{
background-position: 0 0;

}
a.twitter{
display:block;
background-position: -48px 0;
}
a.Facebook {
background-position: -96px 0;
}
a.Blogger {
background-position: -144px 0;
}
a.rss:hover{
background-position: 0 -44px;
}
a.twitter:hover{
background-position: -48px -44px;

}
a.Facebook:hover {
background-position: -96px -44px;
}
a.Blogger:hover {
background-position: -144px -44px;
}


]]></b:skin>



<!-- ESTILOS Y SCRIPT RESUMEN DE ENTRADAS -->
<style type='text/css'>
.contemini {
overflow:hidden;
width:200px;
height:180px;
margin:10px 6px 10px 0;
padding: 0;
border: none;
display:block;
float:left;
}
.miniaturas {
width:200px;
height:180px;
background: no-repeat scroll 10% 20% #ffffff;
}
</style>


<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;

if(img.length>=1) {
imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';
summ = sumario_img;
}

var summary = removeHtmlTag(div.innerHTML,summ,imgtag,enlacetitulo);
div.innerHTML = summary;
}

function removeHtmlTag(strx,chop,imagen,enlace){
var original=strx;
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
if(strx.length<=chop) {
return original;
}
else {
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
var devolver = imagen + '<div>' + strx + '... <a class="readmore" href="' + enlace+ '">Leer más ►</a></div>';
return devolver;
}
}

sumario_noimg = 400;
sumario_img = 250;
//]]>
</script>



<!-- Script Fecha Calendario -->

<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
    d = ultimaFecha;
 }
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";

anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
 ultimaFecha = d;
}
//]]>
</script>


  </head>

  <body>


<div id='wrap3'>  <div id='outer-wrapper'><div id='wrap2'>
    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>


    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='simposium (cabecera)' type='Header'/>
</b:section>
 <b:section class='menu' id='menu' showaddelement='no'>
<b:widget id='PageList1' locked='true' title='Páginas' type='PageList'/>
</b:section>
<div id='search-conte'><b:section class='search-c' id='search-c' showaddelement='no'>
<b:widget id='CustomSearch1' locked='true' title='Buscar' type='CustomSearch'/>
</b:section></div>
   </div>
 <div style='clear:both'/>
 <div id='content-wrapper'>
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'/>
</b:section>
</div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
    </div> <!-- end content-wrapper -->
 <div style='clear:both'/>
</div>

 <!--  ATENTION DISTRIBUTORS AND USERS: YOU ARE ALLOWED TO DISTRIBUTE THIS TEMPLATE, BUT YOU CAN'T ADD ANY LINK ON THE FOOTER.PLEASE, DO NOT REMOVE THE FOOTER CREDIT LINK. ATENCION DISTRIBUIDORES Y USUARIOS: ESTA PLANTILLA SE PUEDE REDISTRIBUIR, PERO, POR FAVOR RESPETA LOS CREDITOS, GRACIAS POR TU APOYO.
  -->  
<div id='footer-wrapper'><span style='float:right; font-size:11px; color:#ffffff; margin:0px; padding: 5px 0 0 10px;'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> Copyright &#169; 2011 | Designed by:
<a href='http://compartidisimo.blogspot.com/' target='_blank'>compartidisimo</a></span></div>
 <!-- end outer-wrapper -->
  </div></div>
</body>
</html>

              
Créditos
iphone: teehan+lax
íconos sociales: Aquaticus
lapices: fuzzimo
pattern de madera: crimson designs

ACTUALIZACION: Abril/21/2011, cambié el fondo de la plantilla usando la madera como pattern que se repite, para que esta sea vista totalmente independientemente de la resolución de pantalla del monitor y eliminé la posición fixed de este.

en Seguir leyendo
12 abril 2011

Todo sobre las etiquetas de Blogger, bueno, casi

Etiqueta azul


Una aspecto básico al empezar en la creación del blog, es la clasificación/organización de nuestro contenido. Hacerlo ayudará a que los usuarios de tu blog, puedan encontrar o descubrir contenido que les interese.

Organizar tu contenido para que sea accesible no es una tarea muy difícil, en parte es intuitiva, ya que para conseguirlo, puedes visualizarte a ti mismo llegando a tu propio sitio como un extraño que busca algo. 

La pregunta que debemos hacer entonces es: qué recursos tenemos en nuestro blog que permiten encontrar ese algo, y cómo facilitar la tarea de conseguirlo de una manera cómoda y sin muchos líos.

Para cumplir con ese propósito de facilitar a los usuarios que encuentren contenido que les interesa, empezamos por crear categorías del mismo, en otras palabras, clasificar el contenido formando grupos a los que asignaríamos un nombre que en este caso serían las etiquetas.

Imagina que alguien tiene un blog de cocina y comparte muchas recetas tanto platillos fuertes como dulces. Una buena idea entonces sería asignar categorías como: postres, platillos principales, entradas, etc. Pero no solo nos limitaríamos a grandes categorías. Podemos también crear subcategorias como: pasteles, quequitos, sopas, ensaladas, etc., incluyendo todas las etiquetas necesarias a una entrada (sin rebasar el límite), buscando organizar de forma más eficaz el contenido.

Al agregar etiquetas en las entradas, pensando en formar categorías podremos crear un menú de navegación usando el enlace de la página que incluye las entradas con determinada etiqueta. Así los usuarios del blog pueden buscar temas que les interese. O bien puedes mostrar los enlaces de las páginas de etiquetas usando el gadget de "Etiquetas".

Hoy te voy a compartir muchos datos interesantes sobre las etiquetas, con el fin de que puedas darle un uso a favor de tu blog y de tus visitantes. Veremos qué son, cómo usarlas, cómo cambiarles el nombre al mismo tiempo en varias entradas, etc.

¿Qué son las etiquetas de Blogger?


Las etiquetas son nombres que asignamos y ponemos a las entradas, con el fin de categorizar o clasificar nuestro contenido. De ese modo cualquier usuario puede acceder a un tema o contenido específico, haciendo click en el enlace de la etiqueta que aparecerá en la entrada, lo que ayudará a encontrar información de interés de una forma más sencilla.

Las etiquetas son mostradas en cada entrada de forma automática por medio de sus enlaces, que son los nombres que hemos asignado nosotros a dichas etiquetas, y también pueden ser mostradas en un widget que Blogger facilita llamado "Etiquetas" el cual puedes agregar fácilmente desde Diseño, seleccionándolo de la lista de Gadgets al añadir un gadget.

¿Cómo asigno etiquetas en Blogger?


Es muy simple, solo tienes que hacer click sobre la opción en el editor de Blogger que dice: Etiquetas y poner los nombre de las etiquetas en el campo correspondiente, separadas por comas.


Seccion de etiquetas en el editor de Blogger



¿Existe un límite en cuanto al número de etiquetas que puedo agregar a cada entrada?

Si lo hay y es de 20 etiquetas por entrada. En cuanto al número de etiquetas en todo el blog, este no puede superar las 2,000 etiquetas.

Cómo mostrar las etiquetas en el blog


Al poner etiquetas en tus entradas, estas son mostradas automáticamente en éstas, y dependiendo del diseño de la plantilla que utilices, pueden aparecer debajo de cada entrada, debajo del título, incluso a un lado de la entrada.

Si utilizas una plantilla nativa de Blogger, vas a poder colocar las etiquetas debajo del título de tu blog o al final de la entrada fácilmente, usando la funcionalidad de Blogger llamada: "ordenar elementos". Lee más abajo en el apartado: Cómo cambiar la posición de las etiquetas dentro de la entrada.

Las etiquetas que asignes a tus entradas, también pueden ser mostrados agregando un gadget a tu blog. Para agregarlo, solo tienes que ir a Diseño y seleccionar el gadget: Etiquetas de la lista de gadgets.


Gadget de etiquetas de Blogger en la lista de gadgets

Este elemento puede ser configurado para que muestre solo las etiquetas que tú decidas. Puede mostrarlas por orden alfabético, o por frecuencia. Mostrarlas todas o solo las que selecciones, excluyendo cualquiera de ellas.

Con respecto a su presentación, puedes elegir mostrarlas como una lista o bien como una nube de etiquetas. ¡Prueba estas opciones por ti mismo para ver como lucen en tu blog!


Opciones de configuracion del gadget de etiquetas


Cómo editar el gadget de las etiquetas


Una vez que se has agregado el gadget, puedes editarlas yendo a la pestaña Diseño, luego, haciendo click en "Editar" en la sección que corresponde al gadget de etiquetas, o bien, puedes abrir las opciones de configuración, usando el icono que puedes ver a continuación:  mismo que aparece en tu blog, una vez que has accedido a tu cuenta y que se muestra debajo del gadget.


Cómo cambiar la posición de las etiquetas dentro de la entrada


Simplemente te diriges a Diseño, y haces click en Editar, en la sección que corresponde a las entradas del blog. Hecho lo anterior, habrás accedido a las opciones de configuración de la entrada. Ve a donde dice: "Ordenar elementos", y arrastra y suelta las etiquetas en la sección que quieres que aparezca. Por ejemplo, si quieres que aparezca debajo del título de la entrada, lo pondrías en el area con borde discontinuo que aparece debajo de: Titulo de la entrada. Todas la áreas con borde descontinuo que ves en la imagen de abajo son las secciones donde puedes colocar los elementos de la entrada.



Cómo saber la dirección web (URL) de las páginas que tienen determinada etiqueta, para colocarlo en un menú de navegación


Puedes crear un menú de navegación usando las direcciones web que incluyen todas las entradas con determinada etiqueta.

Hacerlo ayudará a que los usuarios de tu blog naveguen en tu contenido, y que puedan encontrar fácilmente contenido que les interese.

Para saber la dirección web o URL de las entradas de una etiqueta, solo tienes que hacer click en la etiqueta que te interesa, usando el gadget de etiquetas, y copiar la URL o dirección que aparece en la barra de direcciones de tu navegador.

Por ejemplo, esta es dirección web que copié de la barra de direcciones del navegador al hacer click en la etiqueta Plantillas para blogger:

http://compartidisimo.blogspot.com/search/label/
Plantillas%20para%20blogger

También puedes tener la dirección web de las entradas con determinada etiqueta, usando el nombre de la etiqueta, y sustituyéndola como a continuación se muestra, ya que los enlaces de las etiquetas siempre aparecen con el siguiente formato:

http://Nombre_de_tu_blog.blogspot.com/search/label/NOMBRE_DE_LA_ETIQUETA

Las etiquetas son sensibles a mayúsculas y minúsculas, por lo tanto hay que ponerlas exactamente como las has definido desde las entradas.

Si tuviera espacios hay que agregar a cada espacio esto:  %20.

Una vez que tengas la dirección web de la página con determinada etiqueta, las puedes poner en el gadget de páginas, pensando en que usas una plantilla nativa de Blogger y este elemento aparece debajo de la cabecera como un menú de navegación.

La dirección web de las páginas de etiquetas, cambia de manera dinámica en Blogger, debido a la paginación. Sin embargo éso no afectará en que todas las entradas de una etiqueta sean mostradas al usar la dirección web de la primera página de las entradas con determinada etiqueta. Pero sí en que el enlace de la página aparezca seleccionado en el gadget de páginas estáticas. Aunque esto ultimo lo podemos cambiar editando el código del gadget.


Cómo cambiar el nombre de una etiqueta en varias entradas a la vez


Para cambiar el nombre de una etiqueta, primero hay que agregar la nueva etiqueta a todas las entradas que tengas la etiqueta que deseas editar, y luego eliminar la etiqueta que queremos cambiar.

Por ejemplo, si tengo la etiqueta: fotos y la quiero cambiar a fotos bonitas, primero, agrego la etiqueta: fotos bonitas a todas las entradas que tienen la etiqueta "fotos" y después, elimino la etiqueta: fotos a todas esas entradas. De ese modo quedará solo la etiqueta nueva que es fotos bonitas.

Es fácil, solo hay que seguir estos pasos:

  1. Ir a las entradas. Selecciona la pestaña Entradas y luego: Todas (aparece debajo de Entradas).
  2. Filtrar las etiquetas. Haz click sobre la lista desplegable: Todas las etiquetas, que aparece arriba de la página a la derecha, a un lado del buscador, y selecciona la etiqueta que deseas cambiar.
    Lista desplegable para filtrar etiquetas en la interfaz de Blogger
  3. Seleccionar todas las entradas con la etiqueta que quieres cambiar. Una vez que se muestren todas las entradas con la etiqueta, marca la casilla que aparece arriba de la tabla para seleccionar todas las entradas con esa etiqueta.
    casilla para seleccionar entradas en la interfaz de Blogger
  4. Agregar el nombre nuevo de la etiqueta. Haz click sobre el icono de etiqueta, que aparece arriba en la tabla, y selecciona: Etiqueta Nueva. En el campo del recuadro que se abre escribe la etiqueta etiqueta nueva y haz click en Aceptar. Hasta aquí ya habrás agregado la nueva etiqueta a todas esas entradas. Ahora hay que eliminar la etiqueta que estás queriendo cambiar.
    Opción de agregar Etiqueta nueva en la interfaz de Blogger
  5. Eliminar el nombre de la etiqueta que estamos cambiando. Teniendo seleccionadas todas esas entradas, haz click de nuevo en el icono de etiqueta y selecciona de la lista el nombre de la etiqueta que querías cambiar. Hecho lo anterior habrás eliminado esa etiqueta y aparecerá un mensaje de Blogger confirmándolo. Ahora esas entradas tendrán el nuevo nombre de la etiqueta.
¡Listo!, hemos cambiado el nombre de una etiqueta en varias entradas a la vez.

Hay que tomar en cuenta que solo puedes cambiar la etiqueta de hasta 50 entradas a la vez. También se puede hacer a la inversa...hazlo como te resulte más fácil.


Cómo mostrar enlaces de entradas con ciertas etiquetas en un gadget 


Es posible mostrar en tu blog los enlaces de las entradas con una etiqueta específica, si utilizamos el gadget del feed. Puedes mostrar hasta 5 entradas con una etiqueta usando este gadget.

opcion de feed de la lista de gadgets de Blogger


Para ponerlo en el blog, necesitas poner la siguiente URL, donde dice: URL del feed pero antes hay que editarla poniendo los datos de tu blog, como se indica en le texto resaltado con negrita.

http://Nombre_del_blog.blogspot.com/feeds/posts/default/-/nombre_de_la_etiqueta

Este sería un ejemplo del enlace de mi blog, usando la etiqueta Noticias de blogger.

http://compartidisimo.blogspot.com/feeds/posts/default/-/Noticias%20de%20blogger

Cuando tiene espacios, hay que poner en cada espacio esto: %20

Una vez configurado el gadget del feed, se mostrará una lista de enlaces con los títulos de tus entradas, que tengan dicha etiqueta.

Conclusiones: Sin duda el uso de las etiquetas juega un papel muy importante a la hora de organizar nuestro contenido. Usando los enlaces de las páginas de etiquetas ya sea en un menú de navegación, en el gadget de etiquetas y mostrándolas en las entradas, le facilitaremos a los usuarios encontrar información que les interese de una manera rápida y sencilla basándose en las categorías que hemos creado.

en Seguir leyendo
08 abril 2011

20 Estupendas Manualidades para Regalar el Día de las Madres y su Historia

manualidades para regalar el día de las madres

Pronto será el día de la madre, y todos lo que tenemos la fortuna de tener una en vida y a nuestro lado, esperamos ansiosos para festejarla y alagarla. Claro que todos lo días debemos decirle cuánto la queremos y cuánto nos sentimos bendecidos, por tener con nosotros una mujer tan maravillosa que nos guía y nos enseña todas esas cosas que ha aprendido en base a su experiencia. Pero es ese día, una fecha especial, en la que nos vestimos de gala para celebrarlo a lo grande.


Trazando un plan

Cuando se acerca el día de las madres, todos pensamos en que comprarle, tal vez un vestido, unos aretes de perlas, un bolso, etc., lo cual no está nada mal. Sin embargo, en la mayoría de los casos, son esos pequeños detalles que nosotros mismos creamos, los que hacen sentir a nuestra madre muy complacida y feliz, superando cualquier regalo costoso que sólo fuimos y sacamos de la tienda para meterlo luego a una cajita.

En ese sentido, he aquí la cronología de lo que sería, un día de la madre inolvidable:

Primero lo primero

Definitivamente, ese día nos tenemos que levantar muy tempranito y llevar el desayuno a la cama de mamá, y que mejor que decorar una charola con flores hechas a mano, y poner ahí su desayuno favorito...

charola decorada


Si la mamá es muy madrugadora, pues se levanta antes de que cante el gallo, y es imposible adelantársele, entonces, haremos un mantel individual de papel, que tendremos listo un día antes, para ponerlo en la mesa y poner ahí el desayuno...

mantel decorado alusivo dia de las madre

Eso sí, también le tendremos listo un cubre sillas con un bonito mensaje, para engalanar el trono que le corresponde: "ese lugar donde se sentará para tomar su desayuno"

cubre sillas decorado

Luego, habiendo disfrutado de ese apetitoso desayuno, papá le dará una tarjeta hecha a mano, en donde escribirá lo mucho que la quiere, pero, además de esas palabras dulces y románticas, meterá ahí  un chequecito (en donde sólo incluirá su firma), para que vaya y se compre lo que siempre ha querido.

tarjeta de papel con flores
Entonces, como será la mamá la que se encargue de ponerle los ceros a tal chequecito, le tendremos lista una bonita pluma decorada con una flor que le hemos creado...

Pluma decorada con una flor

Más tarde, como mamá llegará cansada de hacer las compras, la llevaremos a un sofa o una silla a descansar, y para no perder la costumbre le pondremos ¿adivina qué? Su telenovela favorita...aaahh! Y para que se sienta más cómoda, le daremos este precioso cojín donde colocaremos una foto con sus hijos, y si son muchos pues haremos un colage, que también se ven muy monos.


Cojin decorado con fotos


Luego, aprovechado que hay un comercial, llegará la hija, y le colgará en el cuello este collar que ella misma le ha hecho con mucho cariño y esmero.

Collar con mensaje alusivo a la madre


Llegando la noche, ya para acostarse, papá la sorprenderá saliendo del closet y armará un buen bailoteo, eso sí, habiendo cumplido una dieta rigurosa de vegetales y libre de chelas, para bajar cualquier kilito de más y lucir más guapetón :D

Striper

Finalmente, lo que sigue, mejor se lo dejamos al papá, ya que esas son cosas de adultos xD


¿Otras ideas de regalos?

Esta idea me encantó. Tal vez porque esta temporada me fue muy mal con la gripe y no soltaba las toallas de papel. Es un estuche de fieltro para toallitas de papel (sin decir marcas) que definitivamente será muy útil, y fácil de acomodar en cualquier bolso de mano :)

Estuche de fieltro para tallas de papel
Instrucciones: Crafts for all seasons

También para la mamá costurera, o a la que simplemente le encanta arreglar todo lo que se ha roto o descocido, poner ese botón que perdimos o arreglar ese vestido o blusa que no nos queda, ¿qué te parecen estos cojincitos de fresita para poner ahí las agujas?

cojin de fieltro en forma de fresa para agujas
Instrucciones: Martha Stewart

Para la mamá que le encanta cocinar ¿qué te parecen estas cubre cucharas decoradas?, ahora la cocina lucirá más divertida...

cubre cucharas de fieltro
Instrucciones: Kaboose


Y para las mamás que les encanta leer, estos creativos separadores de libros en el que incluiremos algunas fotografías, son una buena alternativa; definitivamente así mamá se mantendrá en orden con sus lecturas.

Separador de libros

Instrucciones: Make and takes


También ¿qué te parece como luce este cuaderno con un  forro de tela? A mi me encanta,  bien pudiera servir para que mamá escriba ahí sus recetas favoritas, o para un diario.

Envoltura para cuaderno
Instrucciones:Craft Passion


Y ¿qué me dices de estas cajas decoradas? muy útiles para organizar todas esas cosas que mamá colecciona, sobre todo, para las mamás que también ya son abuelitas.

cajas decoradas
Instrucciones: Martha Stewart


Y este prendedor, sencillo pero femenino, que la hará ver más bonita...

prendedor de tela en forma de flor
Instrucciones: Martha Stewart


...o este otro con mucha pedrería, para las mamás que también les gusta brillar, ¡súper elegante!

Prendedor con piedras
Instrucciones:Craftzine


Y si eres muy habilidos@ en la costura, y tienes una madre ecologista,  hacer una bolsa con material reciclado, sin duda, será el regalo perfecto.

Bolsa con material reciclado
Instrucciones: Craft Passion.

Estas flores de papel con las fotos de los hijos, es el proyecto perfecto para llevar a cabo con los niños de la clase, si por ejemplo eres maestra.

ramo de flores de papel para poner fotos
 Instrucciones: Kabose

O esta máscara para los ojos, súper colorida, para la mamá moderna y divertida :)

mascara para ojos de tela
Instrucciones: Family Fun



Todo esto es poco comparado con el amor y el cuidado que la madre nos da ¿no lo crees? Entonces, a trabajar se ha dicho ;)

= = = = = = = = = = = = = = = = = = = = = = = = = = = =
Otras fuentes e instrucciones
Instrucciones para el cubre silla
Instrucciones para el cojín con fotografía
Instrucciones para la tarjeta


en Seguir leyendo