Personaliza los títulos de la sidebar con cintitas

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!

Seguir leyendo

Como poner en blogger las entradas relacionadas

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 != &quot;item&quot;'>
<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='&quot;/feeds/posts/default/-/" + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' 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.

Seguir leyendo

Personalizar las listas numeradas

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

Seguir leyendo

Tutoriales y blog de pruebas actualizado

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 ♥ 

Seguir leyendo

Intercambios de regalos Navideño

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 ♥

Seguir leyendo

Plantilla gratuita: Winter's Tale

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>

Seguir leyendo

Poner una página de error 404 personalizada

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 == &quot;error_page&quot;'>
<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 == &quot;error_page&quot;'>
<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 ♥

Seguir leyendo

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

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

Seguir leyendo

Diseño para Miss Meow

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?

Seguir leyendo

Como usar la Font Awesome para crear social icons

En el tutorial de hoy quiero enseñarles una de las cosas fantásticas cosas que se pueden crear utilizando la fuente Awesome, más unos pocos retoques en css. Por ahora les mostraré como hacer sus propios icons de redes sociales, de una forma bastante rápida y sencilla y sin nececidad de que seas muy bueno editando en Css. Espero que les agrade el tutorial.

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!

Seguir leyendo

Nueva plantilla en el blog ♥

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 ♥ 

Seguir leyendo

[¡Soy luz!] Fonditos para tu blog

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

Seguir leyendo

[Iniciativa] Soy luz!

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! ♥

Seguir leyendo

Como poner un boton de subir en tu blog

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

Descargar

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 ♥

Seguir leyendo