Wings to Creativity

Personaliza los títulos de la sidebar con cintitas

2017-03-01T08:00:00.000-03:00

Buenos días! ¿Cómo están? Aquí estoy con otro tutorial para ustedes, esta vez de como personalizar los títulos de la sidebar poniendo bonitas cintas con css, de este modo lo editan cuando quieran en la edición HTML de la plantilla sin necesidad de hacerlas en photoshop.

Les traigo tres modelitos básicos que pueden editar a su antojo ♥

Antes de empezar recuerda que si colocaste anteriormente algún estilo para el título debes borrarlo o se superpondrán los códigos!

Opción 1

La opción 1 es para los que tienen la sidebar del lado derecho de la pantalla, de ese modo el corte de la cintita les quedaría del lado exterior del blog, pero pueden usarlo del lado que más les guste.

Para colocarlo simplemente vas a la edición HTLM de tu plantilla, luego con CTRL + F buscá ]]></b:skin> y arriba pega el siguiente código:

.widget h2 {
font-family: Arial; /* Fuente del título */
font-size: 19px; /* Tamaño de la fuente */
color: #fff; /* Color de la fuente */
letter-spacing: 3px; /* Espacio entre letras */
padding: 2px;
text-align: center;
bottom: 13px;
position:relative;
width: 260px; /* Ancho de la cinta, si tu sidebar es más pequeña/grande modificalo */
height: 24px; /* Altura de la cinta */
background: #222222; /* Color de la cinta */
top: -4px; /* Hace que la cinta vaya más arriba */
left: -13px; /* Hace que la cinta vaya más a la izquierda */
z-index: 99999;
}
.widget h2:after {
position: absolute;
content: "";
top: -10px; /* Hace que el corte de la cinta vaya más arriba */
right: -5px; /* Hace que el corte de la cinta vaya más a la izquierda */
width: 0px;
height: 0px;
border-bottom: 24px outset transparent;
border-top: 24px outset transparent;
border-right: 24px solid #ffffff; /* Del mismo color que el fondo de tu sidebar */
}

Y lo editas a tu gusto ♥

Opción 2

La opción 2 es para los que tienen la sidebar del lado izquierdo de la pantalla, de ese modo el corte de la cintita les quedaría del lado exterior del blog, pero pueden usarlo del lado que más les guste.

Para colocarlo simplemente vas a la edición HTLM de tu plantilla, luego con CTRL + F buscá ]]></b:skin> y arriba pega el siguiente código:

.widget h2 {
font-family: Arial; /* Fuente del título */
font-size: 19px; /* Tamaño de la fuente */
color: #fff; /* Color de la fuente */
letter-spacing: 3px; /* Espacio entre letras */
padding: 2px;
text-align: center;
bottom: 13px;
position:relative;
width: 265px; /* Ancho de la cinta, si tu sidebar es más pequeña/grande modificalo */
height: 24px; /* Altura de la cinta */
background: #222222; /* Color de la cinta */
top: -4px; /* Hace que la cinta vaya más arriba */
left: -5px; /* Hace que la cinta vaya más a la izquierda */
z-index: 99999;
}
.widget h2:before {
position: absolute;
content: "";
top: -10px; /* Hace que el corte de la cinta vaya más arriba */
left: -5px; /* Hace que el corte de la cinta vaya más a la izquierda */
width: 0px;
height: 0px;
border-bottom: 24px outset transparent;
border-top: 24px outset transparent;
border-left: 24px solid #ffffff; /* Del mismo color que el fondo de tu sidebar */
}

Lo editas a tu gusto..

Opción 3

La opción 3 deja la cinta centrada en el gadget tiene cortes de ambos lados ♥

Para colocarlo simplemente vas a la edición HTLM de tu plantilla, luego con CTRL + F buscá ]]></b:skin> y arriba pega el siguiente código:

.widget h2 {
font-family: Arial; /* Fuente del título */
font-size: 19px; /* Tamaño de la fuente */
color: #fff; /* Color de la fuente */
letter-spacing: 3px; /* Espacio entre letras */
padding: 2px;
text-align: center;
bottom: 13px;
position:relative;
width: 255px; /* Ancho de la cinta, si tu sidebar es más pequeña/grande modificalo */
height: 24px; /* Altura de la cinta */
background: #222222; /* Color de la cinta */
top: -4px; /* Hace que la cinta vaya más arriba */
left: -5px; /* Hace que la cinta vaya más a la izquierda */
z-index: 99999;
}
.widget h2:before {
position: absolute;
content: "";
top: -10px; /* Hace que el corte de la cinta vaya más arriba */
left: -5px; /* Hace que el corte de la cinta vaya más a la izquierda */
width: 0px;
height: 0px;
border-bottom: 24px outset transparent;
border-top: 24px outset transparent;
border-left: 24px solid #ffffff; /* Del mismo color que el fondo de tu sidebar */
}
.widget h2:after {
position: absolute;
content: "";
top: -10px; /* Hace que el corte de la cinta vaya más arriba */
right: -5px; /* Hace que el corte de la cinta vaya más a la derecha */
width: 0px;
height: 0px;
border-bottom: 24px outset transparent;
border-top: 24px outset transparent;
border-right: 24px solid #ffffff; /* Del mismo color que el fondo de tu sidebar */
}

Y lo editas a gusto!

Bueno eso es todo, así de fácil, espero les sea de mucha ayuda el tutorial ♥

Recuerden que pueden escribirme a sol.pourcel@gmail.com por cualquier duda!

Como poner en blogger las entradas relacionadas

2017-02-27T19:16:00.002-03:00

Hola soñadores! ¿Cómo están? El día de hoy les traigo un tutorial bastante fácil de como hacer para que al final de las entrada se muestren las entradas relacionadas a esta con imagen miniatura.

Funciona mediante un script que hace que aparezca al azar tres entradas con la misma etiqueta de la que tu estas viendo.

Aquí les dejo una imagen de ejemplo de como es el resultado:

Como pueden ver aparecen tres entradas al azar de la misma etiqueta que nuestra entrada, si hay alguna entrada sin ninguna imagen, como pueden ver, aparece una imagen que dice imagen no disponible, y si con esa etiqueta no tienen tres entradas publicadas y solo tienen dos o una, aparece solo la cantidad de entradas que tienen publicadas.

Para tenerlo en tu blog solo debes seguir estos tres sencillos pasos:

Paso 1

Ve a la edición HTML de tu plantilla, alli con CTRL + F busca </head> arriba pega lo siguiente:

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-related {display: none;}
</style>
</b:if>
<script type='text/javascript'>//<![CDATA[
// Post relacionados
var classicMode = false ;var summary = 40;var indent = 3;imgr = new Array();imgr[0] = "http://i.imgur.com/TdxRZn5.png";showRandomImg = true;aBold = true;summaryPost = 170;
summaryTitle = 25;numposts1 = 6;numposts2 = 8;var classicMode = false ;var summary = 50;var indent = 3;var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();var thumburl = new Array();function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {var entry = json.feed.entry[i];relatedTitles[relatedTitlesNum] = entry.title.$t;try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined')thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://i.imgur.com/TdxRZn5.png";}}
if(relatedTitles[relatedTitlesNum].length>40) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 50)+"...";
for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;}}}}function removeRelatedDuplicates_thumbs() {var tmp = new Array(0);var tmp2 = new Array(0);var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {if(!contains_thumbs(tmp, relatedUrls[i])) {tmp.length += 1;tmp[tmp.length - 1] =relatedUrls[i];tmp2.length += 1;tmp3.length += 1;tmp2[tmp2.length - 1] = relatedTitles[i];tmp3[tmp3.length - 1] = thumburl[i];}}
relatedTitles = tmp2;relatedUrls = tmp;thumburl=tmp3;}function contains_thumbs(a, e) {for(var j = 0; j < a.length; j++) if (a[j]==e) return true;return false;}function printRelatedLabels_thumbs(current) {for(var i = 0; i < relatedUrls.length; i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--;}}var r = Math.floor((relatedTitles.length - 1) * Math.random());var i = 0;while (i < relatedTitles.length && i < 20 && i<maxresults) {tmb = thumburl[r].replace('s72-c/','s300-c/');document.write('<div class="item-related"><a href="' + relatedUrls[r] + '"><img width="100%" height="50" src="'+tmb+'"/></a><h4><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h4></div>');i++;if (r < relatedTitles.length - 1) {r++;} else {r=0;}} relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>

No hay nada que editar acá.

Paso 2

Ahora de nuevo con CTRL + F busca post-footer-line-2 van a aparecer dos, a nosotros solo nos interesa la segunda, debajo pega lo siguiente:

<div class='post-related'>
<div class='title-box'>
<h4>Puede que te interesen:</h4>
</div>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var defaultnoimage="http://i.imgur.com/TdxRZn5.png";
var maxresults=3; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>

Aquí cambia solo lo que señale con negrita que es el texto que aparecerá en el título.

Si no encuentras post-footer-line-2 puedes agregar debajo de <div class='post-footer'> o
abajo de post-footer-line-1

<div class='post-footer-line post-footer-line-2'> El código </div>

El resultado de esto depende siempre de como esté compuesta tu plantilla!

Paso 3

Por ultimo busca y pega arriba de ]]></b:skin> el siguiente código:

.post-related {
overflow:hidden;
margin-top:40px;
width: 650px; /* debes modificarlo teniendo en cuenta el ancho de tus entradas */
}
.title-box h4 {
background: #222222; /* color del título */
top: 10px;
font-family: 'Arial'; /* fuente del titulo */
font-size: 20px; /* tamaño de la fuente */
color: #FFFFFF; /* color de la fuente */
letter-spacing: 3px; /* espacio entre letras */
line-height: 1.5; /* tamaño de la cajita */
font-weight: bold; /* fuente en negrita */
text-align: center;
text-transform: uppercase; /* letras en mayúsculas */ }
.item-related {
background: #FAFAFA; /* color del fondo del contenedor de imágenes */
width:30%; /* entre mayor sea el porcentaje mayor será el tamaño de las miniaturas */
float:left;
margin-bottom: 20px;
padding: 10.8px;
border-bottom: 25px #222222 solid; /* borde negro de abajo */
}
.item-related:hover {
background: #E3E3E3; /* color del fondo hover del contenedor de imágenes */
} .item-related img {
margin-top:20px;
width:100%;
height:auto;
-webkit-transition: .2s;
-webkit-filter: grayscale(1); /* imágenes en blanco y negro */
}
.item-related:hover img {
-webkit-transition: .2s;
-webkit-filter: grayscale(0);
}
.item-related h4 a {
display: block;
margin-top:10px;
width: 100%;
max-height:32px; /* Evita que el texto se vuelva muy largo */
color: #222; /* color de los títulos de las entradas */
font-size: 14px; /* tamaño de la fuente */
font-weight: bold; /* texto en negrita */
text-transform: lowercase; /* texto en minúsculas */
letter-spacing: 1px; /* espacio entre letras */
text-align: center; /* alinear texto en el centro */
line-height: 1;
}

Ahora solo debes personalizarlo como más te guste y listo ♥

IMPORTANTE: Aparecerá la primer imagen del post. Tener en cuenta!
Si las imágenes del post son muy pequeñas no se mostraran.

Espero que les sea de ayuda el tutorial!
No olvides que puedes escribirme a sol.pourcel@gmail.com por cualquier duda que tengas.

Personalizar las listas numeradas

2017-02-16T13:26:00.001-03:00

Buenos días mis queridos soñadores ♥ Aquí estoy de vuelta con los nuevos tutoriales que les había prometido en la entrada anterior. Hoy les traigo algo super básico y sencillo.. un tutorial mostrando como personalizar las listas numeradas en tu blog además de tres bonitos estilos algo minimalistas que pueden editar a gusto:

Para formar las listas en el editor de entradas deben usar el icono o bien en la edición HTML pegar esto:

<ol>
<li> Contenido 1 </li>
<li> Contenido 2 </li>
<li> Contenido 3 </li>
<li> Contenido 4 </li>
</ol>

Para personalizarlas deben pegar alguno de los estilos que les daré arriba de la etiqueta ]]></b:skin> en la edición HTML de su plantilla.

Estilo 1 ♥

.post ol{
counter-reset:li;
margin-left:30px; /* Separa las listas del borde del blog */
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 30px !important;
padding:5px;
list-style:none;
*list-style: decimal;
background:#fafafa; /* Color de fondo de las listas */
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0px;
left:-40px;
width: 15px;
font-size:14px;
text-align: center;
margin:0 0 10px 0;
font-weight: bold;
padding:5px !important;
color:#fff; /* Color de texto de la numeracion */
background:#fcc; /* Color del fondo de la numeracion */
border-radius: 100%; /* Borde curvo */
border: solid 2px #ffb0b9; /* Color del borde */
}

Estilo 2 ♥

.post ol{
counter-reset:li;
margin-left:40px; /* Separa las listas del borde del blog */
}
.post ol li{
position:relative;
margin:0 0 20px 0px !important;
padding:5px;
list-style:none;
*list-style: decimal;
background:#fafafa; /* Color de fondo de las listas */
text-indent:10px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0px;
left:-50px;
width: 15px;
font-size:14px;
text-align: center;
margin:0 0 10px 0;
font-weight: bold;
padding:5px !important;
text-indent:2px;
color:#fff; /* Color de texto de la numeracion */
background:#fcc; /* Color del fondo de la numeracion */
}
.post ol li:after{
position: absolute;
top:3px;
left:-25px;
border-color: #fff #fff #fff #fcc; /* Color de la flechita */
border-style: solid;
border-width: 9px; /* Tamaño de la flechita */
content: "";
}

Estilo 3 ♥

.post ol{
counter-reset:li;
margin-left:30px; /* Separa las listas del borde del blog */}
.post ol li{
position:relative;
margin:0 0 20px 0px !important;
padding:5px;
list-style:none;
*list-style: decimal;
background:#fafafa; /* Color de fondo de las listas */text-indent:40px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0px;
left:-20px;
width: 18px;
font-size:18px;
text-align: center;
margin:0 0 10px 0;
font-weight: bold;
padding:5px !important;
color:#fff; /* Color de texto de la numeracion */text-indent:2px;
background:#fcc; /* Color del fondo de la numeracion */}
.post ol li:after{
position: absolute;
top:-0px;
left:8px;
border-color: #fafafa #fafafa #fafafa #fafafa; /* Mismo color que el fondo de las listas */border-style: solid;
border-width: 15px; /* Tamaño de la flechita */content: "";
}
.post ol li:hover:after{
position: absolute;
top:-0px;
left:8px;
border-color: #fafafa #fafafa #fafafa #fcc; /* Color de la flechita hover */border-style: solid;
border-width: 15px; /* Tamaño de la flechita hover */content: "";
}

Espero les haya sido de ayuda! ¿Qué les pareció el tutorial?

Cualquier duda pueden escribirme a sol.pourcel@gmail.com

Tutoriales y blog de pruebas actualizado

2016-11-19T02:43:00.000-03:00

Buenos días pequeños angelitos de la red, recién tuve el tiempo de pasarme por cada uno de los tutoriales que hay en este bloggie y quitar o señalar los que no funcionan más ~~(por actualizaciones de blogger o por algún otro motivo)~~ y corregí algunas cositas en cada uno de ellos. ~~(expliqué mejor algunos puntos etc.)~~

Además fui actualizando el blog de pruebas donde ahora se encuentran aplicados la mayoría de los tutoriales que publiqué hasta ahora ♥ Pueden chequear con el si el tutorial que van a seguir sigue funcionando. Ya les señalé en cada post en que parte del blog de pruebas se encuentra la vista previa, también enlacé en el blog de pruebas cada entrada tutorial.

Creo que ahora tengo más tiempo para dedicarle a este bloggie así que haré todo lo posible para compartir con ustedes nuevas ayudas.. ya sean recursos o tutoriales.

Y me gustaría por favor que todos aquellos que sigan activos me dejen un comentario en este post ♥ (no hace falta que dejen el link) porque la verdad ya no se quien de los que sigo sigue activo o no, así que comenzaré a seguir a todos de nuevo.
Así que si escriben aquí que siguen activos visitaré sus blogs para ponerme al día con sus posts y los seguiré de nuevo ♥

Eso es todo.. nos leeremos próximamente .. besos ♥

Intercambios de regalos Navideño

2015-12-12T21:50:00.000-03:00

Hola angelitos ♥ En la entradita de hoy quería hablarles acerca de un intercambio navideño al que decidí participar, siempre me gusta unirme a está clase de eventos, y a pesar de mi falta de tiempo tengo muchas ganas de hacerlo este año.

Este evento fue organizado por de Bleiÿ, y se trata de darse regalos por navidad, todos pueden participar ya que puedes regar algo que sabes hacer como firmitas, algún diseño, dibujos, lo que se te ocurra según veas los gustos de la persona a quien te toque obsequiar algo. Les invito a participar ♥

Clip en la imagen para participar ♥

Plantilla gratuita: Winter's Tale

2015-12-11T01:13:00.000-03:00

Hola pequeños angelitos ♥ Ya hace varios días que publiqué mi última entrada, y es que como verán ahora, les estaba preparando un regalita por la llegada del invierno, la navidad y el año nuevo. Es una plantilla blogger, con temática invernal, se llama Winter's Tale (Cuentos de invierno).

Bueno, ya hace mucho no compartía una plantilla gratis en el blog, esta es muy especial, porque le puse mucho esfuerzo y amor, y puse con delicadeza cada detalle, también tengo que confesarles que la pattern de fondo la hice yo y ese muñeco de nieve del header dibuje yo, espero que les parezcan lindos ♥

Además cuando pasen estas épocas se puede seguir usando, la configuré para que luego que pase el invierno y navidad puedan personalizarla para así poder seguir usándola, solo tienen que cambiar el header y el fondo por otro que deseen ♥ Eso es todo, sin más les dejo el vista previa y la descarga, espero que les guste y se animen a usarla.

Click aquí para ver la demo

Opcion1 : Descarga directa

Opcion2 : ♥ Descargar dándome un regalo gratis ♥

También pueden descargar aquí el header por si quieren editarlo ♥ (pesa 5MB aprox. el archivo)

NOTA: para poner el menú solo debes pegar en un gadget javascript debajo de la header el siguiente código y editarlo con tus links:

<div id="menu">
<div align="center">
<a href='#'>Home</a>
<a href='#'>Profile</a>
<a href='#'>Contact</a>
<a href='#'>Goodies</a>
<a href='#'>Other</a>
</div>
</div>

Poner una página de error 404 personalizada

2015-12-01T08:00:00.000-03:00

Hola angelitos, ¿Cómo están? ♥ El día de hoy les traigo un tutorial bastante fácil, en el que les explicaré como colocar en su blog, una página de error 404 personalizada.

¿Qué es eso? Es una página a la que tus lectores son enviados cuando hacen click en una url inexistente o errónea, pueden ver aquí una vista previa, con este tutorial les mostraré como personalizarla a su gusto y dejarla bonita ♥

Bueno les dejo también una imagen de ejemplo por si tienen problemas con la vista previa:

Paso 1 - Colocar el código del mensaje

Debes ir a Plantilla | Edición HTML y con Ctrl + F debes buscar data:navMessage

Aparecerá repetido 3 veces, nos interesa la segunda de ellas.

Debemos remplazarlo por el siguiente código:

<div class='esconder-status'><data:navMessage/></div>
<b:if cond='data:blog.pageType == "error_page"'>
<div aling='center'>
<div id='error-404'>
<div class='errort1-404'><img src='http://i.imgur.com/yofXhBX.png' style='vertical-align:middle;' width='200px'/> UPS!</div>
<div class='errort2-404'>Página no encontrada</div>
<div class='errort3-404'>
Puedes introducir a continuación lo que buscabas</div>
<form action='/search' id='buscar-error' method='get'>
<input name='q' placeholder='' size='40' type='text'/>
</form>
<div class='errort3-404'>
O si quieres puedes:</div>
<div class='errort4-404'><a href='url de tu blog'>Ir a la página principal</a></div>
</div></div>
</b:if>

Todo lo que está subrayado puede cambiarse con otro texto que desees
Lo que esta en verde es la url de la imagen de error si quieren pueden cambiarla
Lo que está en naranja es el tamaño de la imagen yo lo puse a 200px pueden cambiarlo Lo que está en rojo es el mensaje que dice "Mostrando entradas con la etiqueta.."

Nota: Si utilizaste previamente mi tutorial en donde explico como modificar o eliminar el mensaje "Mostrando entradas con las etiquetas.." debes de hacer lo siguiente:

En lugar de buscar data:navMessage debes buscar con Ctrl + F alguna palabra del mensaje personalizado que pusiste y una vez que encuentres donde esta tu mensaje debes remplazarlo con el código que puse arriba.

Si quieres que vuelva tu mensaje personalizado mas arriba en el código a colocar indique en rojo donde puedes volverlo a poner ♥

Paso 2 - Ocultar en la página de error los gadgets

Ahora hay que hacer que en la página de error no se vean los gadgets y otras cosas así queda mas lindo todo, hacerlo es muy sencillo, se pega el siguiente código arriba de </head>

<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper, #header, #sidebar-right-1, #copyright, .fly
{ display: none;}.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {border-left: 0px; border-right: 0px;}
#main, #main-wrapper {width: 760px; right: -200px;} .status-msg-body {width:660px;background: #;border: none;}.status-msg-border, .status-msg-body, .status-msg-bg, .status-msg-wrap {border: none;color: #fcb6c2;background: transparent;} .esconder-status {display:none;}
</style>
</b:if>

Los que están indicados en negrita son los elementos ocultados..
(los subrayados los puse por la barra de copyright y el botón subir)

Paso 3 - Cambiarle el aspecto

Para hacerlo solo debemos pegar arriba de ]]></b:skin> el siguiente código y personalizarlo:

/* Error
----------------------------------------------- */
#error-404 {
background: #fff;margin: 10px 6px 30px!important;
padding: 15px 20px!important;
}
.errort1-404 { /* Efectos en el texto más grande */
color: #ec1648;font-size: 100px;font-weight: bold;
text-transform: uppercase;
}
.errort2-404 { /* Efectos en el texto mediano */
color: #ec1648;font-size: 50px;top: -10px;
font-weight: bold;
text-transform: uppercase;
}
.errort3-404 { /* Efectos en el texto pequeño*/
font-size:16px;color:#777;margin-top: -10px;
padding:20px;
text-align:center;
}
.errort4-404 a { /* Efecto en Ir a la pagina principal */
background: #777;color: #fff;font-size: 16pt;padding: 5px;
text-align: center;
top: 5px;
}

color: color del texto
font-size: tamaño de los textos
background: color de fondo

Espero les haya servido el tutorial ♥

Como modificar "Mostrando entradas con la etiqueta..."

2015-11-29T15:18:00.000-03:00

Muy buenos días queridos angelitos ♥ Hoy les traigo un nuevo tutorial, en el les enseñaré como dejar bonito el mensaje de "Mostrando entradas con la etiqueta..." que aparece en un feo recuadro gris cuando miramos las etiquetas/secciones en nuestro blog.

Les mostraré como pueden borrarlo o modificarlo, poniéndole otro mensaje y cambiando su aspecto ♥

Eliminar el mensaje "Mostrando entradas con la etiqueta..."

En realidad no vamos a borrarlo de nuestra plantilla, pero si haremos que no sea visible, así será mas fácil deshacerlo por si en algún momento cambiamos de opinión y queremos que se vuelva visible.

Es muy fácil hacerlo, solo vamos a Plantilla | Personalizar | Avanzado | Añadir CSS y pegamos lo siguiente:

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

Guardamos y listo ♥ Si luego lo quieres recuperar solo borra el código.

Modificar el mensaje "Mostrando entradas con la etiqueta..."

Primero vamos a cambiar el mensaje, en lugar de que diga "Mostrando entradas con .. etc etc" podemos poner lo que queramos, como Estas viendo la sección "tutoriales" o algo asi.

Para hacerlo debes ir a Plantilla | Editar HTML y con Ctrl + F buscar data:navMessage

Veremos que esta repetido 3 veces, nos interesa la segunda de ellas.

Ejemplo:

Vamos a sustituirla con lo siguiente:

Lalala tu mensaje va aquí <data:blog.searchLabel/>

<data:blog.searchLabel/> hace referencia a la etiqueta que se esta mirando, por ejemplo tutoriales, recursos o lo que sea, si no quieres que se vea borralo ♥

Ahora solo nos queda hacerlo más bonito ♥

Para hacerlo debes pegar encima de ]]></b:skin> lo siguiente:

.status-msg-body {
font-family: Arial; /* tipo de fuente */
font-size: 16px; /* tamaño del texto */
color: #fcc; /* color del texto */
}
.status-msg-bg { /*Para cambiar el color de fondo de la cajita*/
background-color: #fff;
}
.status-msg-border{ /* color del texto */
border: 1px solid #fcc;
}

Lo editas a tu gusto y eso es todo ♥ Espero les haya servido el tutorial.
Cualquier duda me la dejan en un comentario o me escriben a sol.pourcel@gmail.com

Diseño para Miss Meow

2015-11-24T16:19:00.000-03:00

La entradita de hoy es algo cortita, es para compartirles el nuevo diseño que realicé para Marely de Miss Meow. Fue muy agradable diseñar para ella.

Puse una imagen más abajo para contar un poco como la realicé, el diseño es de temática gatuna, por eso puse unos cuantos gatitos por ahí Además que hice un dibujo para su header, es la primera vez que coloco un dibujo hecho por mí en un diseño.

Bueno eso es todo, ¿Que tal les pareció el diseño?

Como usar la Font Awesome para crear social icons

2015-11-17T08:00:00.000-03:00

Como les prometí aquí les traigo el primer tutorial de unos cuantos que tengo preparados para ustedes ♥

En el tutorial de hoy quiero enseñarles una de las cosas que puedes crear con la fuente Awesome más unos pocos retoques en css.

Por ahora les mostraré como hacer sus icons de redes sociales. Hay otras cosas que se pueden realizar, pero les iré mostrando de a poco.

Bueno acá les pongo un ejemplo para que vean a que me refiero:

Ejemplo

Para colocarlo en tu blog solo tienes que seguir unos pasos muy sencillos.

Paso 1 - Colocar el código HTML

Para agregarlo en tu sidebar solo debes ir a Diseño → Agregar un gadget → HTML/Javascript

En el debes pegar lo siguiente:

<center>
<ul class="side-social">
<li><a href="url" target="_blank" title="Facebook"><e class="fa fa-facebook"></e></a></li>
<li><a href="url" target="_blank" title="Twitter"><e class="fa fa-twitter"></e></a></li>
<li><a href="url" target="_blank" title="Pinterest"><e class="fa fa-pinterest"></e></a></li>
<li><a href="url" target="_blank" title="Bloglovin"><e class="fa fa-heart"></e></a></li>
<li><a href="url" target="_blank" title="Tumblr"><e class="fa fa-tumblr"></e></a></li>
<li><a href="url" target="_blank" title="Google+"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Youtube"><e class="fa fa-google-plus"></e></a></li>
<li><a href="url" target="_blank" title="Instagram"><e class="fa fa-google-plus"></e></a></li>
</ul></center>

Cambia lo que está coloreado por la url de tus redes. Y guarda (se verá algo feo, pero en unos pasos más mejorará)

Si quieres eliminar alguno de los botones tienes que borrar de <li> a </li>

Por ejemplo si quieres borrar el botón de Pinterest debes borrar todo esto;

<li><a href="url" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>

Paso 2- Colocar la fuente Awesome

Ahora debes ir a Plantilla → Edición HTML y con CTRL + F debes buscar la etiqueta <head>

Debajo de ella debes pegar lo siguiente:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Paso 3- Colocar el código Css

Ya solo nos falta determinar el estilo que tendrán tus redes. Ya estando en la plantilla de tu blog solo tienes que buscar con CTRL + F y pegar arriba el código del estilo que mas te guste y personalizarlo ♥

Estilo 1

.side-social li {
text-align: center;
width: 60px; /* Ancho de la cajita */
background: #ffb0be; /* Color de fondo de la cajita */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
margin-bottom: 3px!important;
}
.side-social e {
width: 32px; /* ancho de la fuente - tiene que ser menor que el ancho de la cajita */
height: 32px; /* alto de la fuente */
margin: 15px auto 0;
line-height: 100%;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.side-social li:hover {
background-color: #9ccedf; /* Color de fondo de la cajita hover */
}

Estilo 2

.social li {
text-align: center;
width: 50px; /* Ancho del redondo */
height: 40px; /* Alto del redondo */
background: #fcc; /* Color de fondo del redondo */
text-transform: uppercase;
font-size: 9px;
display: inline-block;
padding: 0;
border-radius: 100%;
margin-bottom: 3px!important;
}
.social e {
width: 40px; /* ancho de la fuente - tiene que ser menor que el ancho del redondo */
height: 40px; /* alto de la fuente - tiene que ser menor que el alto del redondo */
margin: 15px auto 0;
line-height: 10px;
text-align: center;
font-size: 20px;
color: #fff; /* Color del texto */
}
.social li:hover {
background: #777; /* Color de fondo del redondo hover */
}

Puse unas etiquetas para que sepas que cambia que, ahora solo editas a tu gusto y listo ♥ Recuerden que si tienten alguna duda pueden escribirme sol.pourcel@gmail.com abrazos!

Nueva plantilla en el blog ♥

2015-11-15T01:45:00.000-03:00

Como ya habrán notado he cambiado el diseño del blog por uno nuevo, espero que les guste como ha quedado. En la entradita de hoy quiera hacerles un pequeño resumen sobre como lo hice ♥

Bueno, primero quería contarles cuanto tiempo y dedicación le puse a este diseño, la verdad es el primero al que le dediqué tanta atención, empecé a realizarlo el Lunes y estuve prácticamente durante todo el día, todos los días, trabajando en el, hasta el día de hoy, me atrapó bastante.

Lo hice con colores suaves y tranquilos, con un estilo algo vintage, me inspiré un poco con la imagen de la bicicletita con flores, y de ahí poco a poco fueron surgiendo nuevas ideas.

También aprendí nuevas cosas al realizarlo, las compartiré con ustedes próximamente en algunos tutoriales, para que asi puedan ponerlos en práctica en sus blogs :D ♥

Bueno aquí abajo les dejo una imagen donde se encuentran todos los componentes que conforman este diseño:

Espero que disfruten de este diseño ♥

[¡Soy luz!] Fonditos para tu blog

2015-10-31T23:01:00.000-03:00

Holi a todos! Como habrán visto en la entrada anterior participo de la iniciativa Soy Luz y y bueno se me ocurrió compartir con ustedes unos hermosos fonditos que busque en colour lovers, todos me parecieron llenos de luz y vitalidad, y me pareció que se verían muy lindos en sus blogs. Bueno espero que les gusten ♥

Todos los fonditos los encontré en colour lovers

[Iniciativa] Soy luz!

2015-10-26T15:00:00.001-03:00

Hola angelitos! .. Como están? En la entradita de hoy qería compartirles está iniciativa, creada por Bleiÿ, a la cual suelo participar todos los años en está época.

Les contaré un poquito de que trata, bueno es bastante simple, todos los años muchos festejan halloween o el día de los muertos, algunos por simple costumbre o porque otros lo hacen, pero al hacerlo están festejando a la "oscuridad", que sería la muerte, fantasmas, demonios, brujas, etc.

Bueno y el punto de esta iniciativa es dejar de hacerlo y en cambio festejar la luz y la vida. Para hacerlo hay que representar mediante nuestros (vida diaria y/o redes sociales, si desean) está temática.

Me parece que esta es una iniciativa muy hermosa y original y les invito a todos los que les interesa se unan a ella.

- clip en la imagen para saber un poquito más de la iniciativa-

Muchos abrazos! ♥

Como poner un boton de subir en tu blog

2015-10-14T17:11:00.000-03:00

Hola a todos♥ Hoy les traigo un tutorial muy sencillo de como colocar un botón de subir en el blog, aquí una vista previa. Además les comparto unos modelitos por si quieren colocarlos en su blog.

Botoncitos para descargar

Descargar

Como ponerlos en el blog

Solo tenemos que ir a Plantilla → Editar HTML y en el pegar arriba de </body> el siguiente código:

<span style="display:scroll; position:fixed; bottom:10px; right:10px; "> <a id='fly' style='cursor: pointer'>
<img src="url de tu imagen" />
</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='//sites.google.com/site/pruebitawings/home/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
"use strict";
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
$("#fly").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
//]]>
</script>

Ahora tenemos que cambiar lo que estaba indicado con colores, abajo especifico que color cambia que.

▄ Entre mas grande sea el numero el botoncito estará mas separado del fondo del blog.
▄ Entre mas grande sea el numero el botoncito estará mas separado del borde derecho.

▄ Aquí deben colocar la url del botoncito que escogieron.

Si quieres que el botón esté en la esquina izquierda en lugar de la esquina derecha de tu blog cambia lo marcado en verde por left:10px;

Espero que les sea de utilidad el tutorial y que les gusten los botoncitos ♥

Quitar el fondo de un gadget

2015-09-29T13:42:00.000-03:00

Hola a todos los angelitos de este blog ♥ El día de hoy les traigo un tutorial super fácil de como eliminarle el fondo a uno de nuestros gadgets, como se muestra en la imagen o aquí en mi blog de pruebas, bueno sin mas empecemos:

Paso 1:

Una vez instalado nuestro gadget, al que le queremos quitar el fondo, abrimos el blog donde lo pusimos. El que yo voy a utilizar de ejemplo, en este tutorial, es el de la imagen del osito, ustedes pueden quitarle el fondo a cualquier gadget, no solo a uno que tenga una imagen.

Paso 2:

Bueno ahora necesitamos averiguar el "nombre" de nuestro gadget, para obtenerlo primero haremos clip derecho en el gadget (no hagan el clip sobre una imagen, háganlo en alguna parte vacía del gadget), y seleccionamos la ultima opción donde dice Inspeccionar elemento.

Paso 3:

Les aparecerá un ventana como la que muestra la imagen, con muchos códigos y uno de los renglones resaltado con gris, ahí es donde tenemos que mirar el "nombre" de nuestro gadget, por ejemplo el mio es HTML1 el de ustedes podría ser HTLM2 o 3 o 15 etc , bueno recordemos ese numerito porque lo utilizaremos enseguida.

Paso 4:

Vamos a Plantilla | Editar HTML | y con control + F buscamos ]]></b:skin> una vez que nos aparece, pegamos encima el siguiente código:

#HTML1 {
background: none;
border: none;
border-radius: none;
box-shadow: none;
}

Ahora es donde tienen que modificar lo que esta en negrita por el nombre de su gadget.

~~Paso 5:~~ Resultado

Y aquí está mi resultado, y solo son 5 pasos.. cualquier duda pueden preguntarme a mi correo sol.pourcel@gmail.com, espero les haya servido el tutorial ♥

Como colocar una barrita de copy right en tu blog

2015-08-14T12:18:00.000-03:00

Hola mis queridos angelitos, en la entrada de hoy les traigo un sencillo tutorial de como colocar en la parte de abajo de su blog una barrita de copyright o en donde puedan escribir el texto que quieran. Pueden verlo en la imagen de ejemplo o en mi blog de pruebas ♥

Paso 1 -

Con ctrl + F busca </body> y coloca encima lo siguiente:

<div id='copyright'>
<center>
<b>
Gracias por pasarte por el blog♥ .. aquí debes insertar tu texto.
</b>
</center>
</div>

Paso 2 -

Pega encima de ]]></b:skin> el siguiente código:

#copyright {
padding: 8px;
background-color: #fff /* Color del fondo */
background-image: url('url de tu imagen'); /* Imagen del fondo */ color: #222; /* Color del texto */
margin-bottom: -2px;
font-family: Arial; /* Tipo de fuente */
font-size: 8pt; /* Tamaño de la fuente */
z-index: 1000;
}

Paso 3 -

Personaliza a tu gusto, les indiqué que cambia que con algunas etiquetas.

Nota: si no quieres que tu barrita lleve una imagen de fondo y solo tenga un color debes borrar donde dice background-image: url('url de tu imagen');

Espero les haya servido el tutorial ♥ cualquier duda escríbeme a sol.pourcel@gmail.com

Ventanas emergentes (pop-up) en tu blog

2015-06-06T08:00:00.000-03:00

Hola a todos mis queridos angelitos hoy les traigo un pequeño tutorial de como colocar ventanas emergentes en tu blog aquí la vista previa (ver en el sidebar)

Paso 1

Para tenerlo en su blog deben ir a plantilla/ edición HTLM y pegar arriba de ]]></b:skin> el siguiente código:

#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .20;
z-index: 9999;
}
.popup_block{
display: none;
background: #fff url(url de tu fondo)repeat;
padding: 20px;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
border: 2px solid #fafafa;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
img.btn_close {
float: right;
margin: -28px -28px 0 0;
background: transparent;
border: none;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

Paso 2:

Ahora debes editar lo que esta resaltado, abajo explico que cambia que:

top: 50%; entre mayor sea el porcentaje la ventara aparecerá mas abajo
left: 50%; entre mayor sea porcentaje la ventara aparecerá más a la derecha.

Si no modificas esos valores la ventana aparecerá en el centro de tu pantalla

background: #fff url(url de tu fondo)repeat; este código es para modificar el fondo de la ventana emergente, solo remplaza con la url de tu imagen o el color que deseas que tenga el fondo.

-webkit-border-radius: 14px; -moz-border-radius: 14px;border-radius: 14px;

este código es para redondear los bordes de la ventana emergente, entre mayor sea el número mas redondeada será.

Paso 3

Una vez que lo editas a gusto ve a diseño y en un gadget coloca lo siguiente:

<a href="#?w=500" rel="ventana1" class="poplight"><img border="0" src="url de tu gif" /></a><br/>

<div id="ventana1" class="popup_block">

<center><img border="0" src="urldetu imagen" />
Contenido de tu ventana!
</center>
</div>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Code goes here
});
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://media.tumblr.com/tumblr_m441nk6nGt1qb1380.gif" class="btn_close" title="Cerrar ventana" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
</script>

Lo que está en purpura es lo que se verá en el gadget, lo que al hacerle clip te abrirá la ventana emergente, puedes poner una imagen o un texto con un link.

Si quieres poner un link en lugar de una imagen remplaza todo lo que está en purpura con este código:

<center><a href="#?w=500" rel="ventana1" class="poplight"> Tu Texto aquí </a></center>

Lo que está en rojo es lo que aparecerá en la ventana emergente, remplaza solamente donde dice Aquí va el contenido de tu ventana puedes colocar lo que quieras (imágenes, texto un cbox, etc.).

Lo que está en azul no debes borrarlo nunca o no funcionará.

¿Como agregar más ventanas?

Pega en cualquier parte de tu blog los códigos purpurá y rojo, no hace falta que los pongas en el mismo gadget mientras no borres el gadget donde se encuentre lo de color azul (que no hace falta que lo pegues mas de una vez) podrás colocar ventanas emergentes por todo tu blog modificando y pegando lo siguiente donde quieras:

<div id="ventana1" class="popup_block">
<center> Aquí va el contenido de tu ventana </center><br/>
</div>

Debes remplazar lo que esta en rosado por ventana2 o ventana3 etc, no importa que nombre le pongas en cuanto respete lo siguiente: cada código rojo y purpura de la misma ventana emergente deben tener el mismo nombre si no no funcionará, los nombres de los códigos purpura y rojo no deben repetirse con los de las otras ventanas emergentes que pongas en el blog.

Código creado por HoneyPixel

Espero que se entienda lo ultimo u.u cualquier duda pueden escribirme a sol.pourcel@gmail.com o dejarme un comentario.

Tutorial como crearle bordes a tus imágenes

2015-05-12T20:32:00.003-03:00

Hola a todos! .. El día de hoy les traigo un sencillo tutorial a pedido de sobre como ponerle un bordecito a tus imágenes.

Paso 1: abres un nuevo lienzo

Paso 2: colocan la imagen que desean editar

Paso 3: Después en una nueva capa, con la herramienta marco rectangular

haces un rectángulo de menor tamaño que el de tu lienzo.

Das clip derecho sobre tu imagen y te saldrán varias opciones, seleccionas la segunda opción que dice seleccionar inverso. Se marcará el área inverso al que seleccionaste primero. Allí con la herramienta bote de pintura pintas de algún color, puede ser cualquiera. Ya tienes marcado el marco.

Luego yo simplemente utilizo un estilo que deja al marco con un efecto mas lindo.
Yo suelo utilizar los de esta clase:

Por si no los tienen les comparto dos

Descargar

Luego si quieren apretando Ctrl T (y estando en la capa de su borde) pueden modificar el tamaño de su borde o moverlo de lugar. (como se muestra en la imagen de as arriba)

Tutorial: Como combinar fuentes

2015-03-03T00:24:00.001-03:00

Hola a todos mis queridos angelitos! .. estuve bastante perdida últimamente por falta de internet, ya que me mude y no la instalo todavía, espero poder tenerla pronto.

La entrada de hoy esta dedicada a un sencillo tuto de como combinar fuentes en sus ediciones para que queden mas llamativos y lindos, ya que es un poco complicado y a muchos no les sale.

Lo realice en varias imágenes con ejemplos para que se entienda mejor y sea mas entretenido leer..

Tip 1: Si tienes en una edición un título y un subtitulo, o un texto con mayor importancia que el resto del texto, puedes usar esta dos opciones:

La de resaltar o remarcar mas el título con una fuente mas gordita, y al subtitulo hacerlo con una fuente mas finita y menos cargada como indica la imagen.

Si tu título es mas largo que el subtitulo puedes hacer como en el segundo ejemplo, en el titulo usar todas las letras en minúscula y con una fuente llamativa, y al subtitulo ponerle un fuente livianita y con todas las letras en mayus para que acapare un poco mas de lugar y no se pierda tanto debajo de la oración del título.

Tip 2: Si tienes bastante que decir (no creo que tanto como en la imagen de ejemplo xD) siempre tienes que tener en cuenta que todo el mundo siempre lee primero lo que esta como una fuente en mayor tamaño, por eso siempre hay que poner lo mas importante mas grande que el resto del texto!

Tip3: También puedes probar con acomodar los tamaños de los textos haciendo que rellené alguna forma como redondos, cuadrados, rectángulos, triángulos, así queda mas llamativo y no desperdicias un determinado lugar de tu diseño.

Tip 4: Siempre debes de tener en cuenta que temática o mensaje tiene tu diseño, si es para algo llamativo e informal debes colocar cierta fuente que enfatice con el tema, si es para algo serio debes de usar una fuente completamente distinta.

Tip 5: Nunca debes usar fuentes difíciles de leer como en la imagen, porque es un rollo tratar de descifrar algunas veces que dice y cansa la vista. Fuentes de ese tipo quedan mejor para aclarar cosas cortitas o para poner tu nombre.

Descargar tutorial: PDF

Efecto Hover: Pixel Heart |♥

2015-02-07T09:00:00.000-03:00

Holi a todos mis angelitos ♥ hoy les traigo un pequeño efecto que les permite poner a una imagen formas (como corazones, estrellas, etc.) al pasar el cursor por encima.. puede serles útil para sus afiliados o para cualquier uso que quieran darle.. Sin mas les dejo como es ..

Preview

Para tenerlo en tu blog debes ir a Plantilla | Editar HTML y colocar el siguiente código arriba de ]]></b:skin> y en plantillas clásicas arriba de </style>

.storm {
-webkit-transition:.6s;
outline-offset: -2px; /* Posición del borde */
outline: 1px solid #bbb; /* Estilo del borde */
max-width:49px; /* Tamaño máximo de la imagen */
box-shadow: inset 0 0 50px #bbb, 0 0 3px #bbb; /* Sombra de la imagen */
}
.storm:hover, .storm2:hover {
-webkit-transition:.6s;
outline-offset: -50px;
outline: 1px solid #fff;
-webkit-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */-moz-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
-o-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
}
.storm2 {
-webkit-transition:.6s;
outline-offset: -2px;
outline: 1px solid #bbb;
max-width:50px;
box-shadow: inset 0 0 50px #bbb, 0 0 3px #bbb;
}

Una vez que lo haces guardas, y colocas en un gadget de javascripts {en plantillas clásicas solo colócalo en el lugar que lo quiers tener} lo siguiente:

<a href="url" target="_blank"><img class="storm" src="http://i.imgur.com/3g4puLP.png" /></a>
<a href="url" target="_blank"><img class="storm2" src="http://i.imgur.com/W7udCrR.png" /></a>
<a href="url" target="_blank"><img class="storm" src="http://i.imgur.com/3g4puLP.png" /></a>

Por si le quieren cambiar de forma solo deben pegar el link de una forma png en donde dice /* Forma hover */

Aquí les dejo alguna formas por si les sirve-

Da créditos si lo usas- el efecto es 100% creado por mi.

Descargar fuentes de google fonts a tu pc

2015-01-23T09:00:00.001-03:00

Hoy les traigo un sencillo tutorial de como descargar e instalar fuentes de google/fonts en la pc, podría serles de utilidad si por ahí encuentran una fuente de allí para el diseño de sus blogs y tambien quieran descargarla para editar en photoshop.. en fin sin mas vueltas les dejo el tuto..

1. Deben ir a google.com/fonts teniendo su sesión de gmail o google+ iniciada.

2. Busquen entre las categorías de fuentes que existen {ver imagen} y se ven alguna que les guste cliquean en Add Collection, toda las que van escogiendo se van agregando en la parte de abajo de la ventana {ver imagen}.

3. Una vez que encontraron todas las fuentes que les gustan cliquiean donde muestra la imagen y les aparecerá una ventada donde deben escoger .zip .. una vez que lo hagan comenzara la descarga.

4. Cuando termine de descargarse solo deben abrir el zip e instala la fuente en su pc♥

Espero les haya sido de utilidad el tutorial.. saludos!♥

Como editar la caja de comentarios

2015-01-14T16:00:00.000-03:00

Hola a todos mis queridos angelitos.. ¿como están? Hoy les traigo un pequeño tutorial a petición de SDLN..
Como ya habran visto se trata de como personalizar los comentarios en el blog..

Pueden ver un vista previa en los comentarios de mi blog de pruebas
Bueno en fin.. comencemos con el tutorial:

Paso1:

Para que este tutorial funcione deben asegurarse de que no pegaron ningun código para personalizar los comentarios antes, y si lo hicieron deben borrarlo antes de comenzar..

Ahora que se aseguraron de eso, deben ir a Plantilla | Editar HTML y pegar arriba de ]]></b:skin> el siguiente código

.comments .comments-content .icon.blog-author {background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);}

/* -- Fuente y tamaño del texto de los comentarios -- */

.comments {font-family: 'Arial'; line-height: 14px; font-size: 12px;}

/* -- Estilos de la cajita contenedora de los avatares -- */

.avatar-image-container {background: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png');padding: 5px;border:2px solid #FFDDB0;}

/* -- Estilo de la caja de los comentarios -- */

.comment-block {border: 8px solid #CDBB93; border-radius: 8px; background: #fff; color: #666; box-shadow: inset 0 0 50px #FFDDB0, 0 0 3px #FFDDB0; border-image: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png') 30 30 round; right: -15px; position: relative;

}

/* -- Estilo de los links responder o elmiminar el comentario -- */

.comments .comment .comment-actions a,.comments .comment .continue a {display: inline-block; margin: 0 0 5px 5px; padding: 0 2px; text-align: center; text-decoration: none; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); color: #9CD1C9; border: 2px solid #bbb; border-radius: 2px; height: 20px; line-height: 20px; font-weight: normal; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white; text-decoration:none;}

/* -- Color y tamaño de la fecha de los comentarios -- */

.comments .comments-content .datetime a {color:#9CD1C9; font-size:12px; float:right; text-decoration:none;}

.comment-content {margin:0 0 8px; padding:0 5px;}

/* -- Estilo de la cabecera donde va el nombre del que comenta -- */

.comment-header {font-size:18px; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white; border-bottom:2px solid #bbb; padding:5px;}

.comments .comments-content .user a {color:#9CD1C9; font-weight:normal; text-decoration:none;}

/* -- Color del link del nombre del que comenta -- */

.comment-header a {color: #335650; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;}

/* -- Oculta el lapicito en los comentarios del autor del blog -- */

.comments .comments-content .icon.blog-author{width:0px; height:0px; display:inline-block;}

.comments .comments-content .owner-actions {position:absolute; right:0; top:0;}

/* -- Estilo en el link mas respuestas de un comentario -- */

.comments .thread-toggle {margin: 0 0 10px 5px; padding: 0 5px; text-align: center; text-decoration: none; display: inline-block; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); color: #9CD1C9; border: 2px solid #FFDDB0; border-radius: 2px;font-weight: normal;}

/* -- Aca no hay nada que editar -- */

.comments .thread-toggle .thread-arrow {display:inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px;}

.comments .thread-expanded .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc

AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}

.comments .thread-collapsed .thread-arrow{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Paso2:

Una vez que lo pegaron guardan y se fijan si es que se coloco correctamente el código.. traten de pegarlo entero sin que les falte ningún pedacito o lucirá mal.

Les tiene que quedar asi:

Paso3:

Editan a su gusto, coloque etiquetas que indican que cambia que en el código para que les sea mas fácil la edición.. si editan en los lugares donde dice color, border o background ya van a personalizar casi todo, traten de no tocar donde dice margin o padding asi no se les mueve de lugar nada.. :)

Espero y les sea de ayuda el tutorial! - cualquier duda envienmela a sol.pourcel@gmail.com

Como colocar una imagen en el borde del blockquote

2014-11-03T23:34:00.001-03:00

Hoy les traigo un corto y sencillo tutorial de como colocarle un pattern a los bordes del blockquote como pueden ver en la imagen de ejemplo o también pueden chequear el resultado en mi blog de pruebas ♥

Paso 1

Vas a Plantilla | Editar HTLM | y encima de ]]></b:skin> pegas el siguiente código:

blockquote {
background: #fafafa; /* Color del fondo de la caja */
padding: 5px;
color: #666; /* Color del texto */
border: 10px solid ; /* Grosor del borde */
box-shadow: inset 0 0 10px #bbb, 0 0 5px #bbb; /* Sombra dentro de la caja */
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6-DF0Y2w6RBYxyg4xrQ-Ox9ZtKi4D_GyBAgwvIx8WEGW5iMHODTwgyjbKedH-d7tMkh59TwXaEuzfff8iJcKJzKIVAETsigl92oV_D-qYVvTlmHsi5VbcZKQflUN8A7sona8KTcq7UPE/s1600/3817521.png') /* Url de la imagen del borde */
20 20 round; /* Escala de la imagen del borde */}

Paso 2

Ahora solamente debes de editar cada cosa a tu gusto:

Donde dice /* Escala de la imagen del borde */ es para ajustar el tamaño de la imagen que aparecerá en el borde del blockquote..
si pones un numero menor, como 10 10 round; la imagen será mas grande..
si pones un numero mayor como 30 30 round; la imagen será mas pequeña..

RECOMENDACIÓN
Si ya tenias tu antigua blockquote personalizada, te recomiendo que borres el código que ya tenia tu plantilla y que lo remplaces con el que deje.. si no podría no quedar bien al superponerse ambos códigos..

Reflexión: Pareja ideal?

2014-08-11T01:32:00.003-03:00

Hace mucho no compartía reflexiones de nada, y me pareció buena idea retomar esa sección del blog que estaba super oxidada con un tema que les sería de gran ayuda a muchos.. ya que en algun momento a todos nos pasa que nos gusta un chico/a y por impulso nos metemos en una mala relación..

Así que decidí dejarles unos consejos para meditar sobre el tema:

Como identificar a tu pareja idónea

El buscar nuestra pareja es la segunda decisión mas grande de nuestra vida.

Primero que nada debes estar seguro de que es el momento indicado para estar en una relación:

1. ¿Es el momento indicado?

No tienes que buscar pareja solo porque:

Te sientes solo.. Porque si no, solo buscas inconscientemente a alguien que te llene y no será así.
Porque todos tus amigos|compañeros|familiares tienen pareja.. Todo tiene su tiempo no tienes que hacerlo solo porque los demás lo hacen.
Porque te pidieron para salir y no quieres herir sus sentimientos.. Es mejor decir no ahora que después donde pueden terminar dañados tu y la otra persona.
Solo por impulso o por probar que se siente.. Debes estar 100% seguro de que es el momento y la persona indicada, que quieres una relación para el resto de tu vida, no solo algo de momento.

2. ¿Cómo se si es la persona indicada?

- Te tiene que gustar físicamente

.. ¿No se supone que el físico no importa? Pues obvio que importa, si no te gusta como es físicamente, tu gusto no cambiará con el tiempo, ahora la cuestión esta en que te tiene que gustar a ti, puede ser una persono no atractiva para los demás pero si lo es para ti.
Por ejemplo: puedo ser solo yo y no maquillarme ni tratar de verme linda de ninguna manera ~~{soy un desastre!}~~ pero si a mi futura pareja le gusto tal como soy, eso es lo que cuenta.

- Tiene que ser una buena persona

.. Si es una persona agresiva, compulsiva o abusiva, no cambiará así porque si solo con estar contigo.. puede dañarte mucho, tiene que ser alguien que valoré y respete de verdad a todas las personas aparte de ti. Por ejemplo: yo no saldría con un chico que cuando pasa algo malo se la pasa maldiciendo, golpea cosas o que grita a ciertas persona, pelea etc . porque yo no tendría la garantía de que en un futuro no haga eso conmigo..

- Tiene que aceptarte tal cual eres y tu a el/ella

..Algo que todos debemos tener en cuenta es que esa pareja igual a nosotros.. con el mismo gusto en todo NO existe.. todos somos diferentes.. a mi pareja le puede gustar el football y mi no, le puede gustar cierto generó de música y a mi no, le puede gustar ciertas comidas que a mi no.. pero si a el le gusta el football pues bien yo le apoyo, y aunque a el le guste comer comida con mucho mucho limón y yo odie el limón en exceso ¿no voy a terminarle solo por eso o si? xD
La cosa es aceptar las diferencias.. y que esa persona acepte las tuyas..

- Tiene que tener las mismas creencias y valores

.. A veces hay algunas cosas que nunca se pueden aceptar de la misma manera que a los gustos, esas son las ideologías y valores. A pesar que pasen años juntos ~~(lo digo como experiencia personal)~~ jamás puedes llegar a cambiar completamente tus creencias y políticas por las de el o viceversa.. y siempre será motivo de pelea.
Obviamente eso se aplica si eres 100% creyente en algo.

- Debe respetar tu espacio

..Al decir eso me refiero que no debe de desear hacer nada fuera de lugar, que te amé mas de lo que te desea físicamente, tiene que valorarte y querer estar contigo aun sin que existan caricias fuera de lugar. Por que si te desea solo de esa manera no hay garantía en que una vez que haga todo lo que desee físicamente contigo se canse y busque alguien más. En una buena relación no hay que hacer nada de lo que te puedas arrepentir en un futuro.

- Tiene que querer cumplir un propósito a tu lado

.. Todos tenemos metas y sueños que llegaremos algún día a cumplir.. tienes que buscar una pareja que este dispuesta a mirar hacia el futuro e imaginar uno a tu lado. Que no solo piense en estar contigo por ahora y que el futuro no importa.. Porque como dije.. no es solo buscar pareja porque si.. si no terminaremos lastimados, es buscar pareja porque estamos listos y queremos alguien que este con nosotros para siempre.

3. ¿Cómo encontrar alguien con esas cualidades?

Es imposible notar todas esas cualidades en un completo desconocido.. y bueno como dije todo tiene su tiempo, a veces es mejor seguir dos etapas importantisímas antes de pensar en un noviazgo oficial..

Etapa de conocimiento.. conoces a alguien ahí es donde te das cuenta si te gusta físicamente.

Etapa de amistad.. entablas amistad compartes experiencias, sueños, metas descubre su forma de ser en las buenas y malas etc. sin involucrarte de ninguna manera mas allá de la amistad, porque asi, si más adelante no ven futuro como pareja siguen como amigos y al no haber pasado nada no se dañan sentimentalmente.

Etapa de noviazgo.. al ver en la etapa de amistad que son compatibles, le agradas a esa persona, quiere un futuro serio contigo y tu igual, etc.. ahí si puedes llegar compartir mas cariño porque ves que si es la persona indicada para ti.

Recuerda: no es como todos creen que al salir con un amigo que conoces hace mucho arruinarás tu amistad.. si esa persona siente lo mismo por ti, te conoce en todos los sentidos y te acepta como eres puede ser tu pareja ideal.

Amistad larga + noviazgo corto = larga vida juntos y felices

Recuerda x2: el salir con alguien porque si..es una terrible idea lo digo porque yo pase por muchas malas experiencias.. tienen que pensarlo bien, y querer tener una relación seria, que sea para siempre o si no es mejor quedarse solitos y felices, ya que evitaran el sufrir una cantidad por una relación fallida por impulso.

Efecto en imágenes #1: Old blur

2014-07-16T14:35:00.001-03:00

Hoy les traigo un efecto para las imágenes de su blog que les da un efecto de color sepia+blur

Vista previa:

Para colocarlo en tu blog debes ir a Plantilla | Editar Html y pegar arriba de ]]></b:skin> el siguiente código:

.img {
-moz-transition: all 3s;
-webkit-transition: all 3s;
-o-transition: all 3s;
transition: all .3s;
padding: 1px;
background: #;
margin: 2px;
}
.img:hover {
-webkit-filter: sepia(0.8) blur(1px);
-moz-transition: all 3s;
-webkit-transition: all 3s;
-o-transition: all 3s;
transition: all .3s;
}

En plantillas clásicas debes colocar el código arriba de </style>