jueves, agosto 13, 2015

[ TutosBlogs ] ¿Como diseñar plantillas de blogger? ( Parte 8 )

By: Ghaaby Captor | Fecha: 8/13/2015 |
 mis loqueros!! aquí vengo con mas tutorial!este es uno muy útil y que yo siempre uso~! son las entradas relacionadas, les explico 2 opciones y ustedes instalen el que mas le guste!! Recuerden que para que este funcione, deben relacionar sus entradas con una etiqueta especifica!








ENTRADAS RELACIONADAS BASICO

1) Se busca ;
</head>

2) Arriba de este pegamos lo siguiente;
<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>




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

4) Abajo de esta linea de código pegamos lo siguiente:
 <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>

 

5) Por ultimo buscas:
<div class='post-footer-line post-footer-line-3'


6) Abajo de este pegas:
<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>

 
Y listo!!!  



ENTRADAS RELACIONADAS TEXTO + IMAGEN EN MINIATURA

1) Buscas esta linea:
<div class='post-footer-line post-footer-line-3'


2) Abajo de esta, pegas lo siguiente:
 <!-- Entradas relacionadas con miniatura Script y Estilo -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>



#related-posts {

    height: 100px;

    min-height: 100px;

    padding-left: 5px;

    text-transform: none;

    text-shadow: 0px 0px 1px #ccc;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-out;

}

#related-posts h2 {

    color: black;

    font-size: 1.6em;

    margin-bottom: 0.75em;

    margin-top: 0;

    padding-top: 0;

}

#related-posts img:hover {

    opacity: 1;

    box-shadow: 1px 1px 1px;

    border-radius: 30px;

   -webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-out;

}

#related-posts a {

    color: black;

}

#related-posts a:hover {

    background-color: #F6CEF5;

    border-radius: 10px;

    color: #DF0174;

    transform: ;

    text-shadow: 0px 0px 2px #fff;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-out;

}



</style>

<script type='text/javascript'>

//<![CDATA[

//Script by Aneesh of www.bloggerplugins.org

//Released on August 19th August 2009

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 thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';

}

if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";

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() {

for(var i = 0; i < relatedUrls.length; i++)

{

if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {

relatedUrls.splice(i,1);

relatedTitles.splice(i,1);

thumburl.splice(i,1);

}}

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;

if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');

document.write('<div style="clear: both;"/>');

while (i < relatedTitles.length && i < 20 && i<maxresults) {

document.write('<a style="text-decoration:none;padding:5px;float:left;');

if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');

else document.write('"');

document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:100px;padding-left:3px;height:100px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');

if (r < relatedTitles.length - 1) {r++;} else {r = 0;}

i++;

}

document.write('</div>');

}

//]]>

</script>

</b:if>

<!-- Entradas relacionadas con miniatura. Script y Estilo -->



<!-- Entradas relacionadas con miniatura -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

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

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Entradas relacionadas&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Entradas relacionadas con miniatura -->

 

Y listo!!! 

NOTA:  Es importante que tus entradas tengan al menos una etiqueta, y que las etiquetas se muestren en la entrada para que las entradas relacionadas funcionen.



  
avatar
13 de agosto de 2015, 4:27

Está interesante!! Es bueno saber como se hace, aunque yo con la plantilla que tengo ahora no creo que lo ponga.

Beshus!!

avatar
кuму
Admin
13 de agosto de 2015, 6:36

Buenisima entrada <3 esta muy bien explicado

avatar
Bam
Admin
13 de agosto de 2015, 10:27

Muchas muchas gracias por todos los codigos y la explicación n.n
Besos!

avatar
Lee Rae Mi
Admin
13 de agosto de 2015, 12:08

waa me encanta este tipo de entrada, siempre son geniales~

avatar
13 de agosto de 2015, 12:21

Hola!
Me ha encantado esta parte.
Muchas gracias por todos los códigos y el tutorial.
Besos

avatar
13 de agosto de 2015, 20:17

muchas gracias lo aplicare espero y me salga todo bien n_n sigue con tus aportes .-.

avatar
S4ku-Chan
Admin
14 de agosto de 2015, 8:46

excelenteeeee gracias cuando edite mis plantillas blogger lo hare porque ya sabes yo uso plantillas clasicas XD

avatar
15 de agosto de 2015, 16:06

Se agradece esta entrada con este tutorial! nunca tendré tu nivel U.u jeje ^^
Saludos y mil thankss!!

avatar
1 de enero de 2016, 18:15

Excelente publicacion! pero ¿como puedo mostrar mas texto? no se ve ni la mitad de los titulos (en mi caso) me gustaria poder mostrar mayor cantidad de caracteres en el texto.
?????????????

avatar
19 de abril de 2016, 1:24

TEAMOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO GRACIAS MUCHISIMAS GRACIAS !!!
TIENES UN NUEVO SEGUIDOR !!!

avatar
El Ra
Admin
17 de julio de 2016, 9:06

GENIAL!!!!!!!
gracias por compartir, explicado a la perfección
excelente información