Entradas relacionadas sin imagen en Blogger




Poner las entradas relacionadas sin imagen en Blogger ofreciendo un camino a los lectores, para que puedan seguir una línea temática, mientras navegan por el blog.

La similitud de entradas está basada en las etiquetas, por lo cual, el sistema será más eficaz cuanto mejor se hayan asignado a cada entrada.


Primero entrar en
Diseño ► Edición de HTML ►Presionar Ctrl + F y buscar lo siguiente:

</head> 

antes pegar el siguiente codigo:

<script>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}
//]]>
</script>

→ Buscar :

<b:loop values='data:post.labels' var='label'>

→ Antes de </b:loop> pegar:


<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>
→ Buscar esta línea:


<div class='post-footer-line post-footer-line-3'

Pegar debajo:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h4>Entradas relacionadas:</h4>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div></b:if>

Hacer click en Vista Previa, donde no se verán los resultados, solo es para asegurarnos que hicimos todo bien; y Guardar los cambios.
El resultado se vera cuando veas una entrada del blog, y no se mostrará en la página principal ya que cuenta con condicionales.
Entradas relacionadas: podes poner otro texto.
Nota → Debe haber varias entradas en el blog, con una misma etiqueta, sino no funciona.

Personalización de Entradas relacionadas sin imagen en Blogger



ir a:


Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado




En el recuadro pegar el siguiente Código:


/*-- Entrada Relacionada Sin imagen --*/
#relpost {
padding:10px;
display:block;
clear:both;
}
#relpost h2{
border-bottom: 3px double #EFECCC;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0.5em;
margin-top: 0;
padding-top: 0;
}
#relpost a:hover{
text-decoration:underline;
}
#relpost ul{
list-style-type:none;
margin:10px 0;
padding:0;
}
#relpost ul li{
background: url("URL de la Imagen") no-repeat scroll left center transparent;
display: block;
list-style-type: none;
margin-bottom: 10px;
padding-left: 20px;
padding-top: 0;
}
.post-footer-line-4 ul li {
font-size: 13px;
margin:5px 0px 0px 0px;
}/*alinear las viñetas*/
.post-footer-line-4 {
font-size: 13px;
margin:10px 0px 0px 150px;
}/*alinear el rirulos*/
@media screen and (max-width:650px) {
#container {
width: 98%;
padding: 1%;
}


 background: url es la imagen de la viñeta.



Ahora al presionar en cualquier entrada veras que tienes en cada post Entradas relacionadas sin imagen.


Si te gusta la entrada compártela.

¡Gracias!

2 comentarios:

  1. Anónimo4/12/14

    Gracias andaba buscando entradas relacionadas sin imagen.Este tutorial me a servido.

    ResponderEliminar
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top