Como poner en blogger las entradas relacionadas

27 de febrero de 2017

poner en blogger 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:
poner en blogger entradas relacionadas ejemplos
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.

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%;
  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


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

16 de febrero de 2017

Personalizar las listas numeradas blogger

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:
Personalizar las listas numeradas blogger tres estilos
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