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