Así pues tanto ese artilugio como otro que publiqué poco después con miniaturas, no tenían en cuenta que alguna vez sería necesario que su diseño fuera adaptable.
Pero eso lo voy a solucionar ahora mismo facilitando el HTML, el JavaScript y el CSS completo de un gadget que además podréis configurar fácilmente. Para ello he añadido algunas cosillas al JavaScript para que se generen clases extra con las que controlar bien todo y para variar un poco de lo habitual, el CSS hará que los sumarios se vean uno encima de otro, inicialmente en filas de a dos.
Adicionalmente las miniaturas a mostrar podrán tener la proporción que queráis y para que no se deformen con una simple redimensión lo que haremos serán recortes que se obtendrán de la zona central, usando un sistema que ya vimos en una ocasión anterior.
Los cambios en la plantilla serán sólo dos.
Para el primero localizamos el cierre </head>. Justo antes de ese cierre insertamos el estilo que necesitamos para que el gadget tenga la apariencia que pretendemos y a continuación el JavaScript que gestionará la selección de entradas relacionadas extrayendo de ellas el título y una miniatura.
Sería todo lo que sigue y he comentado en el CSS algunas cosas para que podáis cambiar el tamaño de la miniatura. Los colores al gusto.
<!-- Entradas relacionadas con miniatura RWD. Script y estilo-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
margin-top: 20px;
padding: 10px;
background: #ccc;
font-size: 0;
line-height: 0;
font-family: arial;
}
#related-posts h4 {
font-size: 20px;
line-height: 20px;
padding: 0px 20px;
}
#related-posts a {
display: inline-block;
width: 48%; /* Dos posts por fila. Usar 31.33% para tres */
height: 140px; /* Alto de cada bloque (1) */
overflow: hidden;
margin: 0 1%;
padding: 10px;
box-sizing: border-box;
background: #fff;
border-bottom: 10px solid #ccc;
text-decoration: none;
color: black;
}
#related-posts a:before {
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
#related-posts a:hover {
background: #eee;
text-decoration: none;
}
#related-posts .crop {
position: relative;
width: 180px; /* Ancho de la miniatura (2) */
height: 110px; /* Alto de la miniatura = Valor de (1)-30px */
overflow: hidden;
border: 1px solid #ccc;
box-sizing: border-box;
}
#related-posts .crop img {
position: absolute;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
width: 100%;
height: auto;
margin: auto;
padding: 0;
}
#related-posts .titulo {
width: calc(100% - 180px); /* Hay que restar el mismo valor que se indique en (2) */
padding: 0 20px;
font-size: 16px;
line-height: 16px;
box-sizing: border-box;
}
#related-posts .titulo,
#related-posts .crop {
display: inline-block;
vertical-align: middle;
}
/* A partir de aquí el estilo para pantallas más pequeñas */
/* Ajustar los valores 800px y 400px según el diseño particular */
@media (max-width: 800px) {
#related-posts a {
width: 100%;
margin: 0;
}
}
@media (max-width: 400px) {
#related-posts a {
height: auto;
}
#related-posts .crop {
width: 100%;
height: 0;
padding-bottom: 50%;
}
#related-posts .titulo {
width: 100%;
height: auto;
padding: 10px 0 0;
text-align: center;
}
}
</style>
<script type='text/javascript'>
//<![CDATA[
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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPyvXf5TL9O3V0ZkrJibdRXDQs4sTuvWtKQW_-tM-1Upktj__AJqxk-1zCicrUCrWAOtPKc1_HWH6TKtMOkxf4UDS3WIL7krKRzVILFPqzyZys0amUxqECkICEGNvutLQnb7UArTYYx0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>150) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 150)+"...";
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('<h4>'+relatedpoststitle+'</h4>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a href="' + relatedUrls[r] + '"><div class="crop"><img src="'+thumburl[r].replace('/s72-c/','/s300/')+'"/></div><div class="titulo">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
}
//]]>
</script>
</b:if>
<!-- Fin Entradas relacionadas con miniatura RWD. Script y Estilo -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
margin-top: 20px;
padding: 10px;
background: #ccc;
font-size: 0;
line-height: 0;
font-family: arial;
}
#related-posts h4 {
font-size: 20px;
line-height: 20px;
padding: 0px 20px;
}
#related-posts a {
display: inline-block;
width: 48%; /* Dos posts por fila. Usar 31.33% para tres */
height: 140px; /* Alto de cada bloque (1) */
overflow: hidden;
margin: 0 1%;
padding: 10px;
box-sizing: border-box;
background: #fff;
border-bottom: 10px solid #ccc;
text-decoration: none;
color: black;
}
#related-posts a:before {
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
#related-posts a:hover {
background: #eee;
text-decoration: none;
}
#related-posts .crop {
position: relative;
width: 180px; /* Ancho de la miniatura (2) */
height: 110px; /* Alto de la miniatura = Valor de (1)-30px */
overflow: hidden;
border: 1px solid #ccc;
box-sizing: border-box;
}
#related-posts .crop img {
position: absolute;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
width: 100%;
height: auto;
margin: auto;
padding: 0;
}
#related-posts .titulo {
width: calc(100% - 180px); /* Hay que restar el mismo valor que se indique en (2) */
padding: 0 20px;
font-size: 16px;
line-height: 16px;
box-sizing: border-box;
}
#related-posts .titulo,
#related-posts .crop {
display: inline-block;
vertical-align: middle;
}
/* A partir de aquí el estilo para pantallas más pequeñas */
/* Ajustar los valores 800px y 400px según el diseño particular */
@media (max-width: 800px) {
#related-posts a {
width: 100%;
margin: 0;
}
}
@media (max-width: 400px) {
#related-posts a {
height: auto;
}
#related-posts .crop {
width: 100%;
height: 0;
padding-bottom: 50%;
}
#related-posts .titulo {
width: 100%;
height: auto;
padding: 10px 0 0;
text-align: center;
}
}
</style>
<script type='text/javascript'>
//<![CDATA[
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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPyvXf5TL9O3V0ZkrJibdRXDQs4sTuvWtKQW_-tM-1Upktj__AJqxk-1zCicrUCrWAOtPKc1_HWH6TKtMOkxf4UDS3WIL7krKRzVILFPqzyZys0amUxqECkICEGNvutLQnb7UArTYYx0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>150) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 150)+"...";
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('<h4>'+relatedpoststitle+'</h4>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a href="' + relatedUrls[r] + '"><div class="crop"><img src="'+thumburl[r].replace('/s72-c/','/s300/')+'"/></div><div class="titulo">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
}
//]]>
</script>
</b:if>
<!-- Fin Entradas relacionadas con miniatura RWD. Script y Estilo -->
Lo más ortodoxo sería incluir la parte de estilo en la sección CSS de la plantilla, pero como andamos medio de vacaciones no os hago dar muchas vueltas. Tal como lo puse, todo junto, es cuestión de copiar y pegar en un solo sitio. Además, si algún día os cansáis del gadget lo podréis localizar fácil y borrar todo de manera completa mucho más rápido.
Nótese que el código está dentro de una condición para que sólo se ejecute en las entradas, ya que pienso que es la forma óptima de usar esto de los posts relacionadas. En la portada o en páginas no tiene mucho sentido ofrecer enlaces relacionados a un artículo y además así aligeramos la carga de la portada y páginas de navegación. Por ese mismo motivo lo siguiente también está condicionado
El segundo paso consiste en montar un bucle que recorra las etiquetas que tiene cada post y desde ahí llamar a la utilidad JavaScript antes creada. Esta parte hay que insertarla allí dónde queráis que se vean las entradas relacionados. Lo normal será ponerlo en la zona del pie de entradas (post-footer).
<!-- Entradas relacionadas con miniatura RWD. Carga-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="Otras fotografías a las que echar un vistazo";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Fin entradas relacionadas con miniatura RWD. Carga-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="Otras fotografías a las que echar un vistazo";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Fin entradas relacionadas con miniatura RWD. Carga-->
En fin, ya está todo y sólo queda guardar los cambios y ver la cosa funcionando en cualquier entrada.
Y como mientras no hay demo la cosa no existe, a continuación una simulación para que podáis ver los tres formatos que adopta el gadget según se va haciendo más pequeña la ventana.
Posts relacionados
El mejor sushi bar de Berlín
Baywatch Island: Crónica del Campeonato mundial de surf
Ensalada de atún
Clark Gable, un artista diferente
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola Oloman, me gusta el gadget, muchas gracias por compartirlo. Cómo pudiera ponerlo después de loa anuncios ?
ResponderEliminarHola Mery. Para eso tendrás que localizar el código de esos anuncios en tu plantilla y justo después es dónde tienes que insertar el segundo de los códigos que detallo en este post.
EliminarHola, vengo con otra pregunta. A ver que se me ha ocurido esta vez ja ja ja.
ResponderEliminarBueno como ya te habrás dado cuenta, en mi blog tengo lo de Resumen Automático en las Entradas con imagen en miniatura (que gracias a algunos códigos tuyos lo logre), bueno cuando subo un post con video la miniatura me queda algo como https://img.youtube.com/vi/9Cv8tzXW7eE/default.jpg
La pregunta es: ¿A esa miniatura de youtube se le puede superponer una imagen, como por ejemplo una imagen de play?
Mira esta entrada, en la primera parte (CSS) y ahí verás cómo lo hice para superponer un triángulo blanco con un círculo sobre una imagen. De la misma manera podrás hacerlo para tu miniatura.
EliminarEn tú entrada explicas lo de superponer una imagen, pero yo no la quiero dentro del post, nose si me explico. El botón play tendría que ser para entrar a los post, bueno ando buscando algún ejemplo de plantilla para mostrartelo, pero no he encontrado xD.
EliminarBueno supongo que al agregar la imagen aqui
.post img
o también
.post img:hover
dicha imagen se vería en todos los post. Nose, quizás lo que ando buscando sea un código javascript que identifique las miniaturas que tengan como url https://img.youtube.com/vi/ID/default.jpg
y sólo a esas miniaturas agregarles una imagen boton-play.jpg
jejeje pero ni idea como hacerlo. Bueno seguiré buscando alguna plantilla, luego te cuento.
Lo entendí igual que me aclaras ahora. El sistema de ese enlace te sirve perfectamente, pero para que sólo se vea en portada tendrías que condicionarlo para que sólo se ejecute en páginas que no sean estáticas ni entradas.
EliminarLo de
Eliminarhttp://www.oloblogger.com/2015/05/cargar-video-con-miniatura-youtube.html
lo intenté una o dos veces, aunque la miniatura con la imagen de play se ve muy bien dentro del post, pero en un Sumario automático (que es lo que yo casi tengo xD) no se ve la miniatura (ni tampoco se ve la imgen de play) cuando se quiere entrar al post.
Y lo de condicionarlo
http://www.oloblogger.com/2012/01/guia-condiciones-blogger-segun-tipo-de.html
Intenté con este código
style
.post img {
background: url("http://4.bp.blogspot.com/-IDtvyNN05fU/VUS8QFodKkI/AAAAAAAATgY/gtaenkp-iY0/s1600/play-overlay.png") no-repeat;
z-index: 10;
}
/style
pero la imagen de play queda por debajo de la imagen en miniatura, asi que no se ve xD.
Disculpa el comentario anterior no iba completo xD, antes de style le falto lo de
Eliminarb : if cond= 'data:blog.url == "http://pablo-hasel.blogspot.com/search/label/Conciertos"'
que sería el condicionador para que sólo se vea en una etiqueta. Bueno por más z-index que le agregue no consigo que se superponga a la miniatura xD. Bueno gracias por la ayuda. Un saludo
Dos problemas:
Eliminar1) A una imagen no se le puede añadir directamente un :before o un :after con el icono
2) A una imagen no sirve de nada añadirle un background con otra imagen porque no será visible (es lo que comentas)
Por otra parte, veo que tienes miniaturas tanto de vídeos como de otro tipo de imágenes y con CSS no podemos discriminar entre unas y otras, así que o todas llevarían el triángulo o ninguna lo puede llevar.
Conclusión: Con tu sistema actual de sumarios no se puede hacer sólo con CSS lo que quieres. Habría que remodelar todo el script REDIMTHUMB para que con condiciones se comprobara el tipo de imagen que es (de YouTube u otras) y luego añadir directamente en la estructura HTML que genera dicho script, el icono.
Pero esto ya escapa de una simple aclaración como estás viendo, así que me temo que no voy a poder ayudarte mas que con la explicación anterior.
ok. Bueno lo último que he intentado ha sido lo de
Eliminarb:if cond='data:blog.url == "http://pablo-hasel.blogspot.com/search/label/Entrevistas"'
a class='boton-play' expr:href='data:post.url' expr:title='data:post.title'
/a
/b:if
y luego y poco de css
.boton-play {
opacity: 0.6;
background: url( ) no-repeat center;
display: inline-block;
position: absolute;
left: 9px;
border-radius: 50%;
margin-top: 10px;
height: 100px;
width: 100px;
}
.boton-play:hover {
opacity: 1.0;
}
Con este código la imagen de play queda bien, pero sería mejor como tú dices, aunque bueno también esta la opción de añadir el play desde el mismo youtube xD. Gracias por tú tiempo.
Saludos
Hola! Oloman tengo el footer dividido en tres para poder insertar varios gadgets, pero me quedan alineados a la izquierda, como podría centrarlos. Gracias Un saludo
ResponderEliminarAñadiendo a tu CSS esto:
Eliminarfooter .widget {
text-align: center;
}
Hola Oloman! Me encanta este gadget, lo coloqué en mi blog, pero no lo veo con móviles... te dejo el enlace http://dios-tedicehoy.blogspot.com ... gracias de antemano!
ResponderEliminarHola Pat MV.
EliminarSe ve, pero se ve sin el estilo que os expliqué. La cosa es que sólo puedes dar estilo si no usas las plantillas para móviles de Blogger y lo que tienes es un blog adaptable (responsive o también RWD). También lo podrías usar con la plantilla de Blogger para móviles "Personalizada", pero eso te generaría posiblemente otros problemas de diseño.
Hola Oloman,
ResponderEliminar¿Como podría reducir los margenes del texto para que el texto no me salga tan estrecho y así tener mas sitio? gracias!
Me parece super útil este gadget, ya lo puse.
Claro. Cambia ese 30px del padding por un 10px:
Eliminar#related-posts .titulo {
width: calc(100% - 170px);
padding: 0 30px;
...
Perfecto! muchas gracias Oloman :D
EliminarHola Oloblogger.
ResponderEliminarMe encanto PERO!!! estaba probando el protocolo HTTPS y pues al usar las entradas relacionadas no aparece nada No se si es mi blog o la parte de:
script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
ya que pienso que influye el Script de cambiar los Http por Https .
Gracias ;)
Hola Mavs
EliminarTodavía no puede ver nada del nuevo protocolo porque no es de aplicación a dominios personalizados como el mío, pero en principio esa parte precisamente no debería ser el problema.
Me inclino a pensar que quizás sería la imagen por defecto que empieza por http y creo que debería empezar por https. Prueba con eso.
Hola Oloman, todo súper bien con la aplicación de las entradas relacionadas, sin embrago, me carga súper lento el sitio, hace que se quede pegado varios segundos hasta mostrar las entradas relacionadas, ¿a que se deberá?, ¿se podrá optimizar?, saludos!!
ResponderEliminarHola Ignacio. Perdón por el retraso en contestar, pero como siempre ando muy liado y eso le hemos sumado las celebraciones navideñas :D
EliminarEn general, cualquier gadget basado en feeds demora un poco la carga. Es algo inevitable. No sé por qué pero unos días van más rápidos que otros y quizás hemos tenido una racha de los segundos porque Blogger estuvo actualizándolos hace unas semanas y quizás tu observación coincidió con eso.
El único truco que conozco para acelerar eso es reducir el número que figura en max-results, pero dependiendo de la finalidad del gadget a veces no es posible hacerlo.
y por supuesto más liviano para la carga del blog, tenía anteriormente el lightwhit, (no recuerdo si se escribe así) en definitiva me quedo con éste, ufff la carga mejora y se ve más presentable. por un punto aparte: recuerdas que te habia comentado sobre el opacity en mi blog? www.kangutingo.com logré solucionarlo colocando jquery en la plantilla pero me bajó la velocidad del blog subitamente estaba en 96 -98 y quedó en 63-84 :(( quiero quitar a como de lugar el jquery pero manteniendo la nitidez de las imagenes de la portada., Un saludo y Gracias. ;)
ResponderEliminarHola, me encanto, solo una pregunta ¿como puedo hacer que en lugar de que aparezcan 5 entradas solo sean 4?
ResponderEliminarpues como por echarte un gancho.. el código ya está configurado para que aparezcan 4 en la parte que dice maxresults=4 sería que dieras ctl F y pegaras: maxresults= y el que te aparezca maxresults=5 (con un cinco) le cambias el número y le pones 4. creo que sería una solución, puedes probar.
EliminarYa lo probé, si lo tengo con maxresult=4, pero siguen apareciendo 5, saludos.
EliminarYa le modifique muchas gracias resulto bn, eran problemas que tenia con mi platilla, Saludos y gracias :D
Eliminarentonces, el segúndo código no lo tienes bien, acabo de revisar y no lo has puesto todo, vuelve a pegar el segúndo código en tu html dentro del div de related post, no sé si te es complicado, pero ya te dejo el código por facebook para que solo sea copiar y pegar.
EliminarMuchas gracias, ya lo arregle \('u') te iras al cielo ;D
EliminarEs un placer. ;) Un saludo.
EliminarAsí me gusta, que os divirtáis solos ;)
Eliminarjajajaja pensaba en que tenias mucho jaleo y decidí ayudar a chibi. hey y darte buenas noticias, auque no parezca en blogger se puede lograr un 99-99 en page spedd. XD Un saludo.
EliminarGracias!
ResponderEliminarBuenas Noches, Oloma. He intentado implementar este widget y no fui capaz, no me aparecia . Lo pasos que hice fue pegar el primer código justo antes de la etiqueta head y el segundo código probe pegarlo justo debajo de div class='post-footer' y no funciono , después lo pegue justo antes y tampoco. ¿ Qué estoy haciendo mal ?
ResponderEliminarHola Buenos Dias, Milgracias Oloma, se ve perfectamente en la version movil, pero en el ordenador no se ve el wiget, ¿ Cómo puedo hacer para que este mismo widget se vea en el ordenador también? Muchas gracias. Espero con ansias tu respuesta.
ResponderEliminarHola Dra. Eugenia
EliminarLo que ocurre es que hay dos post-footer en la plantilla, uno para la versión móvil de tu blog y otro para la versión de escritorio. Por lo que cuentas se ve que insertaste el código precisamente en el post-footer para móviles. Prueba a añadirlo también en un segundo div class='post-footer' que a buen seguro encontrarás algo más abajo que el que tomaste como referencia.
Muchas gracias , lo voy a hacer ahora mismo. Un saludo, excelente blog
EliminarBuenos Dias Oloman ya lo he agregado y ela version escritorio sale descolocado, las imagenes cortadas y texto muy pegado, como puedo arregarlo. Mi Web es Medicinadesalud.com Gracias
EliminarCambia el valor de este width:
Eliminar#related-posts a {
display: inline-block;
width: 98%;
height: 130px;
overflow: hidden;
...
Y el del height de aquí:
#related-posts .crop {
position: relative;
width: 180px;
height: 92px;
overflow: hidden;
...
Es un apaño para tu blog en particular, pues sus medidas en cuanto a ancho son escasas y tus imágenes son de proporciones muy dispares.
Amigo como hacer para que el texto se coloque debajo de la imagen?
ResponderEliminarGracias.
Eso es lo que hace la parte adaptable del CSS (la de las @media), pero si quieres que sea desde el principio, entonces el código habría que cambiarlo bastante. Como cosa fácil, esta parte:
Eliminar@media (max-width: 800px) {
#related-posts a {
width: 100%;
margin: 0;
}
}
@media (max-width: 400px) {
#related-posts a {
height: auto;
}
#related-posts .crop {
width: 100%;
height: 0;
padding-bottom: 50%;
}
#related-posts .titulo {
width: 100%;
height: auto;
padding: 10px 0 0;
text-align: center;
}
}
... que se quede sólo en esto (sin las @media):
#related-posts a {
width: 100%;
margin: 0;
}
#related-posts a {
height: auto;
}
#related-posts .crop {
width: 100%;
height: 0;
padding-bottom: 50%;
}
#related-posts .titulo {
width: 100%;
height: auto;
padding: 10px 0 0;
text-align: center;
}
Buenas, quisiera saber si se puede que busque solo los resultados de una sola etiqueta, siempre la misma
ResponderEliminarcreo modifiando el codigo:
< script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
pero no lo he logrado, saludos y gracias
Pues debería ser ahí.
EliminarSi en lugar de ...default/-/" + data:label.name + "?alt=json...
pones ...default/-/NOMBRE_ETIQUETA?alt=json...
siendo NOMBRE_ETIQUETA el nombre literal de aquella dónde únicamente quieres buscar, creo que sí debería funcionar.
hola como hago para q las entradas externa queden en vertical
ResponderEliminarHola, dime a qué te refieres con las entradas externas. si lo que quieres es que queden una debajo de otra debes modificar width: 180px; /* Ancho de la miniatura (2) */ y poner max-width: 100%; - con eso se adaptará siempre al ancho de la pantalla. y si lo que quieres es que sea más alto que ancho debes modificar height: 110px; /* Alto de la miniatura y poner height: 310px; y width: 48%; - no sé si me entiendas pero ve probando. Olomán está de vacaciones durante un tiempo, así que nos estaremos apoyando en lo que se pueda. Un saludo.
ResponderEliminar