27 abril 2011

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

Hola chic@s! Hoy les voy a mostrar la manera de colocar íconos sociales en su columna lateral o culaquier otra sección que quieras, y  lo vamos a conseguir usando una sola imagen; además le vamos agregar efecto al poner el puntero encima (: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. Esto lo hacemos por medio de la propiedad en CSS llamada background-position.

Para lograrlo, hay que tomar en cuenta las dimenciones de la parte de la imagen que queremos mostrar respectivamente.

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.

Tengo dos opciones que he creado y que les voy a compartir, puedes usarlas en su blog si así lo quieren, aunque hay muchos íconos sociales navegando por ahí que puedes usar para este propósito.

Primero, hacer o crear nuestro sprite...

Lo primero que necesitamos 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 usen, 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, y para que  estos coincidan 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...



Como puedes ver, 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.


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

Paso 1. Vamos a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS y agregamos ahí este código CSS...

/* 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; /*la posición del icono del feed*/
}
#marcadores li a.twitter{
background-position: -60px 0; /*la posición del icono de Twitter*/
}
#marcadores li a.facebook {
background-position: -120px 0; /*la posición del icono de Facebook*/
}
#marcadores li a.youtube {
background-position: -180px 0; /*la posición del icono de Youtube*/
}
#marcadores li a.rss:hover{
background-position: 0 -60px; /*la posición del ícono del Feed del efecto hover*/
}
#marcadores li a.twitter:hover{
background-position: -60px -60px; /*la posición del icono de Twitter del efecto hover*/
}
#marcadores li a.facebook:hover {
background-position: -120px -60px; /*la posición del icono de facebook del efecto hover*/
}
#marcadores li a.youtube:hover {
background-position: -180px -60px; /*la posición del icono de youtube del efecto hover*/
}

Si se fijan 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).

También si lo prefieres puedes agregar el código yendo a la edición de HTML de tu plantilla  y pegarlo antes de </b:skin>  es lo mismo, con la diferencia de algunas vetajas que te dicía anteriormente.

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

Paso 3. Ahora agregaremos el código HTML, estando "Diseño", luego agregamos un gadget con la opcion HTML/JavaScript, en la columna lateral que quieras mostrarlos, pero antes, deberás personalizar las almohadillas "#" por los enlaces que corresponden a cada icono.

Puedes usar el bloc de notas de tu computadora para editarlo, luego lo pegas en la columna lateral de tu blog.
<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>
Nota: Guíate siguiendo cada linea de código y los colores que puse para que puedas identificarlos fácilmente.

Paso 4. Finalmente guardas los cambios.

Y 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 este...

                                  

Nota: Utiliza 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 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: necesitan sustituir los enlaces respectivamente, como les decía en el paso 3 de la primera opción.

 ...y el resultado este:

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

Como pueden 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

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 esa parte del jardín que tienes reservada para otras flores :)

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.

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.




                                    

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.

12 abril 2011

Todo sobre las etiquetas de Blogger, bueno, casi

Etiquetas

Cuando vas empezando en el mundo de los blogs, y has creado o estás creando tu propio blog, seguramente estarás muy animado a darle una bonita apariencia para que luzca más atractivo a la vista, lo cual no está nada mal, sin embargo, uno de los aspectos que nunca deberíamos hacer un lado, es, la navegabilidad de nuestro sitio , (me incluyo, siento que a veces he dejado pasar cosas importantes en mi blog) y el punto básico de la navegabilidad es el tener estructurado nuestro contenido, de tal forma que sea fácil acceder a éste.

Poder estructurarlo 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; entonces, lo que deberíamos pensar es, que recursos tenemos en nuestro blog que permiten encontrar ese algo, y cómo facilitarles la tarea para conseguirlo de una manera cómoda y sin muchos líos.

Una manera de facilitarles a los usuarios encuentren el contenido que les interesa, es formarndo categorías del mismo, en otras palabras, formar grupos del contenido, asignándoles un nombre que en este caso serían las etiquetas. Por tal motivo, hoy te voy a compartir muchos datos interesantes sobre las etiquetas, con el fin de que puedas darle un uso a favor de su blog y de tus visitantes, veremos desde lo que son, cómo usarlas, cómo cambiarles el nombre al mismo tiempo en varias entradas, etc.

Voy a mostrarlo todo en forma de preguntas, porque creo que así es más fácil ir por partes, y para que cada quien lea lo que le interese directamente.

Tabla de contenido


¿Qué son las etiquetas de Blogger?


Las etiquetas son nombres que asignamos y escribimos en las entradas, con el fin categorizar nuestro contenido, de ese modo cualquier usuario puede  acceder a un contenido específico, haciendo click en el enlace de la etiqueta, 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 autómatica por medio de sus enlaces, que son los nombres que hemos asignado nosotros a dichas etiquetas, y támbién pueden ser mostradas en un widget que blogger facilita.

¿Cómo asigno etiquetas en Blogger?


Es muy simple, solo tienes que poner los nombre de las etiquetas, separadas por comas en la sección que dice etiquetas en el panel de edición de entradas.

etiquetas-en-las-entradas


¿Cómo se muestran las etiquetas en mi blog?


Al poner etiquetas en tus entradas, estas son mostradas automáticamente en cada entrada, y dependiendo del diseño, pueden aparecer debajo de cada entrada (en el post-footer), o debajo del título.

Las etiquetas, también pueden ser mostrados agregando un elemento (widget) a tu blog, yendo a los elementos de página, seleccionando la opción Etiquetas.

mostrar widget etiquetas

¿Cómo edito el widget de las etiquetas?


Una vez que se ha agregado el widget, puedes editarlas haciendo click en editar, yendo a la pestaña Diseño►elementos de la página, o bien, jalándolas desde tu blog, cuando has ingresado a blogger, usando el icono de herramienta que aparece en cada elemento de tu blog.

Es posible determinar que etiquetas mostrar y cuales no, si se quieren mostrar por orden alfabético o no, si quieres que se muestren en forma de lista o nube y si quieres mostrar el número de entradas por etiqueta.


¿Cuál es el código que hace que aparezcan las etiquetas en mis entradas?


El código que hace que aparezcan las etiquetas en tus entradas, es este…

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
           </span>

…y ese código lo puedes ver, al marcar la opción de expandir plantillas de artilugios en la sección de HTML de tu plantilla.

Conociendo esto, puedes moverlas, para que aparezcan en la posición dentro de la entrada que tu quieras.

¿Cómo puedo saber cuál es el enlace de determinada etiqueta, para colocarlo en un menú de navegación?


Usar los enlaces de determinadas etiquetas en un menú de navegación, es una buena opción que ayuda a mejorar la navegabilidad, para saber el enlace de una etiqueta, solo tienes que hacer click en la etiqueta que te interesa, y copiar la URL o dirección que aparece en la barra de direcciones de tu navegador.

Por ejemplo, esta es la etiqueta que copié de la barra de dirrecciones de mi 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 del enlace, usando el nombre de la etiqueta, y sustituyéndola como a continuación se muestra, ya que los enlaces de las etiquetas siempre aparecen de este modo:

http://Nombredetublog.blogspot.com/search/label/ETIQUETA

Las etiquetas reconocen mayúsculas de minúsculas por lo que es importante escribirlas correctamente, y si tuviera espacios hay que agregar a cada espacio el %20.


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


Para usar un ejemplo, vamos a suponer que colocaste la etiquetas "Explorando Blogger" a varias de tus entradas, pero, finalmente te decides en cambiarla por "Blogger", para no tener que hacer el cambio de una entarda a la vez, lo cual sería muy tardado si ya tenemos muchas entradas (¿se imaginan?), harás lo siguiente:

Paso 1. Vas a  Creación de entradas ► Editar Entradas en el menú de pestañas de Blogger.

panel edición de entradas

Paso 2. Selecciona la etiqueta que deseas cambiar en la sección de etiquetas (a tu izquierda),  siguiendo el ejemplo, seleccioné la opción Explorando Blogger.

seleccionar-etiqueta

Paso 3.  Aparecerán todas la entradas con esa etiqueta, luego, selecciona Todas y se marcarán las casillas de cada entrada.
selecciona-todas

Paso 4. En el Menú despegable de "Acciones de etiquetas", selecciona la opción Nueva etiqueta...
nueva-etiqueta
Paso 5.Luego,  aparecerá una ventana donde escribirás el nombre de la nueva etiqueta, que siguiendo el ejemplo que te mencioné, sería "Blogger", luego, haz click en Aceptar.
nueva-etiqueta-ventana

Paso 6. Una vez que has colocado la nueva etiqueta, lo que sigue es borrar la etiqueta que queremos cambiar, para ello, estando seleccionadas las entradas (desde el paso anterior), solo tienes que volver a entrar al menú desplegable, e ir a donde dice Eliminar etiqueta, después de eso, aparecen los nombres de las etiquetas de las entradas seleccionadas,  luego, busca la que deseabas cambiar, que en nuestro ejemplo sería  "Explorando Blogger" y la borrarás haciendo click sobre esta.
eliminar-etiqueta

Y listo!, hemos cambiado el nombre de una etiqueta en varias entradas a la vez.

¿Cómo puedo agregar una nueva etiqueta a varias entradas a la vez?


De igual forma como lo hicimos en la pregunta anterior, solo omitirás el paso 6.


¿Cómo puedo obtener los feeds de determinadas etiquetas?


Afortunadamente blogger facilita esto, y para obtenerlo solo deberás usar este enlace, y sustituirlo como se indica(marcado con rojo)

http://nombredelblog.blogspot.com/feeds/posts/default/-/nombredelaetiqueta

Si la etiqueta tuviera espacios, por ejemplo, una etiqueta llamada: Gatos azules

...entonces, debemos ponerle en cada espacio %20

...por lo tanto, se escribiría: Gatos%20azules


¿Cómo puedo ofrecer suscripciones de mi blog a determinadas etiquetas o categorías?


Es posible ofrecer suscripciones a determinadas etiquetas, usando el enlace del que antes hablabamos, que es este:

http://nombredelblog.blogspot.com/feeds/posts/default/-/nombredelaetiqueta

El asunto es que el feed se vera distinto según el navegador, pero, podemos enviarlo a Google (i Google) y el enlace tiene esta sintaxis:

http://www.google.com/ig/add?feedurl=http%3A%2F%2Fcompartidisimo.blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2FNoticias%2520de%2520blogger

En el enlace anterior, estoy usando el nombre de mi blog, y la etiqueta Noticias para blogger.

...otro ejemplo con la etiqueta con una sola palabra, que seria Widgets:

http://www.google.com/ig/add?feedurl=http%3A%2F%2Fcompartidisimo.blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2FWidgets

Para usar el enlace anterior y poder ofrecer a los usuarios suscripciones con determinadas etiquetas, usariamos este código por ejemplo:

 <a href="El_enlace_para_agregar_a_google" title:"Suscribirse"><img alt=""  src="imagen_del_icono.png"/>Recibir noticias sobre Plantillas Nuevas</a>
 Y el resultado sería algo como esto, puedes hacer click para ver la redirección:

Recibir Noticias sobre Pantillas Nuevas

Conclusiones: Sin duda el uso de las etiquetas juega un papel muy importante a la hora de organizar nuestro contenido, su uso contribuye a la navegabilidad, ya que los usuarios podrán encontrar información de una manera rápida y ordenada basándose en las categorías que hemos creado.

Referencias:

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