¿Cómo dar estilo a un código javascript?

Karasu dijo:

[MENTION=179193]Migueltron[/MENTION] Bueno, no es precisamente igual pero sí se acerca a lo que buscas. :sonrisa:

Aquí te dejo el código:

HTML:

<style>
.fb-row {
	display: flex;
	flex-wrap;
}

.fb-col {
	width: calc(100% / 5);
}

.fb-col .fb-item {
	border-right: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-right: 0;}

.fb-item {
	margin: 8px;
	padding: 16px;
}
/*Imagen del post*/
.fb-item > img {
	width: 100%;
}

/*Título del post */
.fb-item > a {
        padding: 16px 0;
	display: block;
	font-size: 15px;
	color: #111;
	font-weight: bold;
}
</style>

<div class="fb-row" id="container">
	
</div>
<script>
//<=!=[=C=D=A=T=A=[
function getPosts(json) {
var posts = "";
for (var i = 0; i < json.feed.entry.length; i++) {
var title = json.feed.entry[i].title.$t;
var url = json.feed.entry[i].link.pop().href;
var thumbnail = json.feed.entry[i].media$thumbnail.url;

posts+='<div class="fb-col"><div class="fb-item">';
posts+='<img src="'+thumbnail.replace('s72-c', 'w190-h140-p-k-no-nu')+'" alt="'+ title +'" />';
posts+='<a href="'+ url +'">'+title+'</a>';
posts+='</div></div>';

}
document.getElementById('container').innerHTML = posts;
}
//]=]=>
</script>

<script src="https://werplantillas.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getPosts&max-results=5"></script>

Cualquier cosa, me avisas. Saludos. :angeles:

Hacer clic para expandir...

Migueltron dijo:

Gracias por el consejo, robikhan. EDITO: Lo probé, pero no me aparece nada.

- - - Actualizado - - -



Muchas gracias, Karasu.
Sí se parece mucho. Sólo un pequeño detalle, las entradas aparecen en vertical. Habrá alguna forma para que salgan en horizontal? De nuevo, gracias por la ayuda.

Hacer clic para expandir...

.fb-col {
	width: calc(100% / 5);
}

.fb-col {
	width: 100%;
}

.fb-col .fb-item {
	border-right: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-right: 0;}

.fb-col .fb-item {
	border-bottom: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-bottom: 0;}

.fb-row {
	display: flex;
	flex-wrap;
}

.fb-row {
	display: flex;
	flex-wrap: wrap;
}

Karasu dijo:

Pues ya se muestran en horizontal. Pero bueno, si quieres que se muestren como una lista para agregarlas a un widget, cambia éste código.

Insertar CODE, HTML o PHP:

.fb-col {
	width: calc(100% / 5);
}

por este otro:

Insertar CODE, HTML o PHP:

.fb-col {
	width: 100%;
}

Y estos valores

Insertar CODE, HTML o PHP:

.fb-col .fb-item {
	border-right: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-right: 0;}

por

Insertar CODE, HTML o PHP:

.fb-col .fb-item {
	border-bottom: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-bottom: 0;}

Y corrige éste código

Insertar CODE, HTML o PHP:

.fb-row {
	display: flex;
	flex-wrap;
}

por

Insertar CODE, HTML o PHP:

.fb-row {
	display: flex;
	flex-wrap: wrap;
}

Con eso deberÃ*an de verse como una lista normal. Si no pues, ya se verá que se puede hacer. Saludos. :lentes:

Hacer clic para expandir...

Migueltron dijo:

Oh, ya vi el error. Tenía algo raro en mi plantilla, probé en otra y sí salía horizontal. Está idéntico, te lo agradezco mucho.
Ahora me surgieron dos dudas, jeje.

De lo último, vi que con '.fb-col {width: 100%;}', la imagen se adapta al ancho. Y sirve para poner menos entradas. Pero si son 2 o 3 posts, las imagenes se ven más borrosas. ¿Se puede editar algo para que aún con 5 o menos se vean bien?
Y probé hacerlo responsive con las media queries, pero no doy con las propiedades. Hasta se cambia el tamaño en pc. ¿Sería posible adaptarlo? Saludos.

Hacer clic para expandir...

posts+='<img src="'+thumbnail.replace('s72-c', 'w[B][COLOR="red"]190[/COLOR][/B]-h[B][COLOR="red"]140[/COLOR][/B]-p-k-no-nu')+'" alt="'+ title +'" />';

Karasu dijo:

No entendí muy bien lo que quieres salvo lo de la calidad de las imágenes. :sacadoonda:
Respecto a sí es posible adaptarlo, claro que se puede si tienes los conocimientos necesarios. :angeles:

Bueno, en cuanto a la calidad de las imagenes, busca éste código.

Insertar CODE, HTML o PHP:

posts+='<img src="'+thumbnail.replace('s72-c', 'w[B][COLOR="red"]190[/COLOR][/B]-h[B][COLOR="red"]140[/COLOR][/B]-p-k-no-nu')+'" alt="'+ title +'" />';

y cambia los números que están resaltados en rojo por un número más alto. Esto va ha aumentar la resolución de pantalla y por ende debería verse mejor en móviles, simplemente juega con los números hasta encontrar alguno que te sirva. Saludos. :sonrisa:

Hacer clic para expandir...

 [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px) {
    .fb-row {margin:0 -30px;}   
 .fb-item {width:100%;}
    .fb-item > img {height:100px;}
    .fb-item > a {text-overflow: ellipsis;}

  }

Migueltron dijo:

Gracias, sí me refería a cómo mejorar la calidad, pero sin modificar el ancho y el alto.

En sí, pensé mostrar un widget con 2 post(desde 'maxresults'), y otro con 5 posts (tras el cambio que ví al poner width:100% a .fb-col).
Con este cambio, el primer widget muestra automáticamente las imágenes más grandes, y el segundo mantiene el tamaño asignado.
Sólo que el primero se ve borroso, y busco se vean bien las imágenes, sin cambiar el ancho y el alto. Espero explicarme.

Y lo de responsive, era más si me podías compartir cómo sería. Intenté este código, pero no se ven completos los post, sale cortado el último. ¿Qué puede ser?

HTML:

  [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px) {
    .fb-row {margin:0 -30px;}   
 .fb-item {width:100%;}
    .fb-item > img {height:100px;}
    .fb-item > a {text-overflow: ellipsis;}

  }

Saludos.

Hacer clic para expandir...

<style>
.fb-row {
	display: flex !important;
	flex-wrap;
}

.fb-col {
	width: calc(100% / 5);
}

.fb-col .fb-item {
	border-right: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-right: 0;}

.fb-item {
	margin: 8px;
	padding: 16px;
}
/*Imagen del post*/
.fb-item > img {
	width: 100%;
}

/*Título del post */
.fb-item > a {
	display: block;
	font-size: 15px;
	color: #111;
	font-weight: bold;
} [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px) {
	.fb-col {
		width: 100%;
	}
}.fb-row {
	display: flex !important;
	flex-wrap;
}

.fb-col {
	width: calc(100% / 5);
}

.fb-col .fb-item {
	border-right: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-right: 0;}

.fb-item {
	margin: 8px;
	padding: 16px;
}
/*Imagen del post*/
.fb-item > img {
	width: 100%;
}

/*Título del post */
.fb-item > a {
	display: block;
	font-size: 15px;
	color: #111;
	font-weight: bold;
} [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px) {
	.fb-col {
		width: 100%;
	}
}
</style>

Karasu dijo:

Al parecer esto se está volviendo un servicio personalizado y gratis. :v

Fuera de bromas, aquí te dejo los estilos modificados:

HTML:

<style>
.fb-row {
	display: flex !important;
	flex-wrap;
}

.fb-col {
	width: calc(100% / 5);
}

.fb-col .fb-item {
	border-right: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-right: 0;}

.fb-item {
	margin: 8px;
	padding: 16px;
}
/*Imagen del post*/
.fb-item > img {
	width: 100%;
}

/*Título del post */
.fb-item > a {
	display: block;
	font-size: 15px;
	color: #111;
	font-weight: bold;
} [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px) {
	.fb-col {
		width: 100%;
	}
}.fb-row {
	display: flex !important;
	flex-wrap;
}

.fb-col {
	width: calc(100% / 5);
}

.fb-col .fb-item {
	border-right: 1px solid rgba(0,0,0,.1)
}
.fb-col:last-child .fb-item {border-right: 0;}

.fb-item {
	margin: 8px;
	padding: 16px;
}
/*Imagen del post*/
.fb-item > img {
	width: 100%;
}

/*Título del post */
.fb-item > a {
	display: block;
	font-size: 15px;
	color: #111;
	font-weight: bold;
} [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px) {
	.fb-col {
		width: 100%;
	}
}
</style>

El anterior código css mostrará 5 entradas en horizontal y al llegar a una resolución menor a 768px, estas se mostrarán de ancho completo.

Espero solucionar tu problema con eso, saludos. :angeles:

Hacer clic para expandir...

Migueltron dijo:

Jajaja, perdón. Siempre he buscado este estilo y ahora, ya me emocioné, jeje.
Sí aparecen las cinco completas, pero en versión móvil se ve así:

Ver el archivo adjunto 135201

Y para mostrar 2 posts se reducen las imágenes, como cambiaste el .fb-col por width: calc(100% / 5)
Solo buscaba alinearlas más a la izquierda. Si se podía quitando el error de las media queries que ponía, que cortaba la última entrada:

Ver el archivo adjunto 135202

Pero no hay problema si ya dí muchos dolores de cabeza. :carcajadas:
Con el código me ayudaste bastante! Saludos.

Hacer clic para expandir...

Karasu dijo:

Si me dijeras la url de la web, pudiera hacer algo. Él código que te pase antes está basado en el de la url que pones: Plantillas en los feed y no sé si esa es en la cual quieres implementar el código.

En todo caso, como dices en la publicación que tienes conocimientos en css, con eso debería de bastar para adaptar el css a tu gusto. :angeles:

Saludos y que estés bien. Si necesitas algún servicio relacionado con blogger, pues ya sabes cómo contactarme. :lentes:

Hacer clic para expandir...

Migueltron dijo:

Sí, esa url es la que uso, pero en esta quiero implementarla. Aunque ya le puse los mismos códigos.
Oye, creo que me engañé solo, jaja. Apenas intenté poner 2 widgets con el código, pero no se puede repetir dos veces? Sólo me aparece uno.

PD. Tengo dudas sobre algunas propiedades de blogger, y he querido aprender javascript. Pero no sé por dónde.
¿Me recomendarías algún material o te escribo por mensaje privado? Gracias!

Hacer clic para expandir...

Karasu dijo:

Lo más probable es que sea por el nombre de las funciones que no te deja poner dos widget, intenta cambiar el nombre de la función y el contenedor al agregar otro widget. Sobre javascript, en internet tienes infinidad de cursos y artículos al respecto para poder aprender. :angeles:

En cuanto a lo de blogger. Pues te puedo recomendar ésta página: Blogger Code PE - Expert XML Blogger de ella he aprendido gran parte de lo que respecta a blogger, está en francés (creo) pero es perfectamente entendible, ya que trae ejemplos muy claros. La otra web es zkreations, allí también tienes artículos respecto a blogger, no al nivel de bloggercode, pero por lo menos están en español.

Saludos.

Hacer clic para expandir...

Migueltron dijo:

Perdonarás mi ignorancia, Karasu, ¿pero qué propiedad debo cambiar?
Intenté con function getPosts, id=container y fb-row, pero ninguna funcionó. Ya es lo último que pido. 😱josabiertos:

Sobre las webs, creo que aprenderé francés, jaja. Sí se ve muy completa!
La de zkreations sí la había visto, ahora la revisaré más a fondo. Gracias por las recomendaciones.

Hacer clic para expandir...

<div class="fb-row" id="[B][COLOR="red"]container2[/COLOR][/B]">
</div>
<script>
//<![CDATA[
function [B][COLOR="red"]getPosts2[/COLOR][/B](json) {
var posts = "";
for (var i = 0; i < json.feed.entry.length; i++) {
var title = json.feed.entry[i].title.$t;
var url = json.feed.entry[i].link.pop().href;
var thumbnail = json.feed.entry[i].media$thumbnail.url;

posts+='<div class="fb-col"><div class="fb-item">';
posts+='<img src="'+thumbnail.replace('s72-c', 'w190-h140-p-k-no-nu')+'" alt="'+ title +'" />';
posts+='<a href="'+ url +'">'+title+'</a>';
posts+='</div></div>';

}
document.getElementById('[B][COLOR="red"]container2[/COLOR][/B]').innerHTML = posts;
}
//]]>
</script>

<script src="https://werplantillas.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=[B][COLOR="red"]getPosts2[/COLOR][/B]&amp;max-results=5"></script>

Karasu dijo:

Bueno, aquí te dejo el código para poder agregar otro widget similar al anterior, puedes usar el mismo css del anterior código.

Insertar CODE, HTML o PHP:

<div class="fb-row" id="[B][COLOR="red"]container2[/COLOR][/B]">
</div>
<script>
//<=!=[=C=D=A=T=A=[
function [B][COLOR="red"]getPosts2[/COLOR][/B](json) {
var posts = "";
for (var i = 0; i < json.feed.entry.length; i++) {
var title = json.feed.entry[i].title.$t;
var url = json.feed.entry[i].link.pop().href;
var thumbnail = json.feed.entry[i].media$thumbnail.url;

posts+='<div class="fb-col"><div class="fb-item">';
posts+='<img src="'+thumbnail.replace('s72-c', 'w190-h140-p-k-no-nu')+'" alt="'+ title +'" />';
posts+='<a href="'+ url +'">'+title+'</a>';
posts+='</div></div>';

}
document.getElementById('[B][COLOR="red"]container2[/COLOR][/B]').innerHTML = posts;
}
//]=]=>
</script>

<script src="https://werplantillas.blogspot.com/feeds/posts/default?alt=json-in-script&callback=[B][COLOR="red"]getPosts2[/COLOR][/B]&max-results=5"></script>

Como ves, lo marcado en rojo es lo que debes cambiar por algún otro nombre en caso de querer agregar un tercer widget.

Eso sería, :angeles: saludos y que estés bien. :lentes:

Hacer clic para expandir...