JMiur [E]

Trataré de contestar lo que pregunta KIRA X92 y cumplir en lo que sea posible:

en mi blog quiero hacer lo siguiente en los post poner una etiqueta por ejemplo un "div id=Link descarga class=descarga y que ese div se vea en la sidebar y no dentro del post. ¿Es posible hacer esto?

Como para todas las cosas, hay decenas de soluciones posibles y claro, cada una de ellas será la que mejor se adapte a una situación particular así que vamos a ver una forma genérica de hacerlo y, en todo caso, luego pueden hacerse las variaciones del caso.

Evidentemente, debemos usar JavaScript ya que no hay otro lenguaje posible porque parto de la base que el enlace a mostrar posee un cierto texto. Si no lo tuviera, si sólo fuera un enlace donde lo unico importante fuera la URL, podríamos usar directamente el campo Vínculo de cada entrada.

Lo primero, entonces, es ocultar ese enlace de la entrada; no voy a usar un DIV con un ID sino simplemente un enlace al que le pondré una clase, cuanto más simple sea, mejor; así que parto de la base que tengo algo así:
<a class="asidebar" href="URL"> TEXTO/IMAGEN </a>
Podríamos poner uno, dos, cualquier cantidad, es indistinto.

Obviamente, lo ocultamos con CSS agregando la regla de estilo a la plantilla:
.asidebar {display:none;}
Ahora, deberíamos tener identificados los posts de alguna manera, es cierto que podríamos hacerlo de otro modo más global pero tal vez tardaríamos mucho en procesar todo eso; entonces, expandiendo la plantilla, buscamos el INCLUDABLE llamado post que por defecto, en una plantilla Mínima dice esto:
<b:includable id='post' var='post'>
  <div class='post hentry'>
y cambiamos esa línea de color por algo así, agregándole un ID exclusivo con el cual podremos identificarlo:
<div class='post' expr:id='&quot;post-&quot; + data:post.id'>
Un poco más abajo veremos el código que muestra las entradas y allí agregaremos el llamado a la función:
<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>mostrarEnlaces(&#39;<data:post.id/>&#39;);</script>
Nos falta la función en si misma que es la que debería leer esos enlaces ocultos y guardarlos en alguna parte; ponemos algo así antes de </head>:
<script type="text/javascript">
//<![CDATA[

// vamos a guardar todos los enlaces ocultos para mostrarlos luego
var asidebarHREF=new Array();
var asidebarTXT=new Array();

// esta es la función que llega con el ID del post a procesar
function mostrarEnlaces(idPOST) {
  var elPOST = document.getElementById("post-" + idPOST);
  // buscamos todos los enlaces que haya
  var lista = elPOST.getElementsByTagName("a");
  if(lista.length>0){
    // si hay alguno, buscamos todos los que tengan la clase asidebar
    var offset;
    for(var i=0; i<lista.length; ++i) {
      if(lista[i].className=="asidebar") {
        // si encontramos uno, lo agregamos a la lista que luego mostraremos
        offset = asidebarHREF.length;
        asidebarHREF[offset] = lista[i].href; // guardamos la url
        asidebarTXT[offset] = lista[i].innerHTML; // guardamos su texto o imagen
      }
    }
  }
}

//]]>
</script>
Por último los vamos a mostrar en la sidebar asi que siempre y cuando esa sidebar tenga su código DESPUÉS de los posts (digamos, que esté a la derecha), bastaría que agregáramos un elemento HTML; por el contrario, si está ANTES (a la izquierda), habrá que pesar otro método [Más información].

Entonces, en el elemento HTML que hemos creado, colocamos esto:
<div id="enlacesposts">
  <script>
    var salida = "";
    // si hay enlaces que mostrar
    if(asidebarHREF.length>0){
      // leemos la lista
      for(var i=0; i<asidebarHREF.length; ++i) {
        // y vamos armando el código HTML
        salida += "<a href='" + asidebarHREF[i] + "' target='_blank'>" + asidebarTXT[i] + "</a>";
      }
      // lo escribimos
      document.write(salida);
    }
  </script>
</div>
Y eso es todo, con un poco más de CSS podemos establecer la forma en que serán mostrados; un ejemplo:
#enlacesposts { /* el DIV contenedor */ }
#enlacesposts a {
  /* cada uno de los enlaces */
    display: block;
}
#enlacesposts a:hover { /* cualquier efecto hover */ }
Hay un ejemplo online que puede verse funcionando en este blog.

26 comentarios:

Watesam  

Esta muy buena esta entrada, yo tengo otra pregunta y es de cuantas formas se puede mostrar el archivo de entradas y si es posible mostrar todas las entradas sin fecha y por orden, bien sea de publicadas o alfabético.
Es impresionante todo el trabajo que haces desde que conozco el blog no paro de leer los feeds así sea solo por curiosidad
Un abrazo desde Colombia.

Responder
JMiur  

Saludos, Watesam:
Las entradas pueden no tener fecha; mejor dicho, puede no mostrarse la fecha pero sólo se muestran en un orden, cronológicamente empezando por la última publicada.

Si te refieres al elemento Archivos, ahí, las únicas opciones disponibles son las que te muestra el editor cuando lo añades. Esas si pueden ordenarse de manera inversa, comenzando por la más antigua pero no por orden alfabético.

Responder
Graciela  

Tengo que leerlo con las pilas nuevas :P no entiendo, pero ya me daré cuenta de qué se trata. Buen jueves y besos.

Responder
Jabba  

Debe ser que esta mañana me he levantado un poco obtuso, pero no termino de entender eso de colocar un enlace de un post en la sidebar y que no aparezca en el propio post. ¿No es mejor colocar directamente el enlace como tal en la sidebar y el enlace en el post? Es decir, ¿de qué sirve poner un enlace en un post si ese enlace no está en el post?

Responder
Xtrem  

JMIUR ¡AYUDA¡ ALGUIEN SABE PORQUE NO SE PUEDE SUBIR O MODIFICAR O TENER VISTA PREVIA DE LAS PLANTILLAS DESDE EL AREA DE - DISEÑO - EDICION HTML - INTENTO CAMBIAR UNA PERO BLOGER NO PERMITE HACER NADA.

Responder
Jorge Luis  

Es un error general Blogger no permite realizar cambios a las plantillas desde hace 6 horas. En los foros de Blogger muchos colegas estan publicando las mismas preguntas. Esperemos que se solucione pronto.

Responder
BOCUSE  

Debe ser un problema generalizado. Otras veces ha pasado y supuestamente Blogger lo arreglará, pero ¿Cuándo?... éste sí es un verdadero dilema y no el de "Hamlet".
Mientras.., tranquilidad.

Responder
JMiur  

Graciela, Jabba:
Sólo se trata de una necesidad para un caso particular, desconozco los motivos para querer hacer algo así o si tiene alguna utilidad específica

Tal como dice Jorge Luis, se trata de un error generalizado de Blogger así que lo mejor es irse a dar un paseo y esperar que a la vuelta ya esté resuelto.

Responder
Graciela  

jajaja Jabba ha hecho un trabalenguas. Jorge las pilas funcionan bajas en mi cerebro...ahhh es para un caso particular, muy bien :P

Responder
JMiur  

Sí, lo es, no se qué aplicación tendrá, en todo caso, es una curiosidad :-)

Responder
Graciela  

Así es, muchas veces uno imagina algo y lo quiere ver reflejado en su blog :D

Responder
JMiur  

Sí. De alguna manera, es un desafío. :D

Responder
Jabba  

A mi no me convencéis... por mucho desafío que sea jeje ;)

Responder
JMiur  

¿A usted no le gustan los desafíos Don Jabba? :D

Lo interesante de estas cosas es que uno se divierte haviéndolas y luego, se olvida de ellas pero ¡quién nos quita lo bailado!!!!

Responder
KIRA X92  

jejeje gracias por resolver mi dilema ... ahora mismo pruebo ... para los que no entendieron de que se trata, por ejemplo si tengo un video publicado pero el link de descarga quiero que aparesca en otro lugar que no sea el cuerpo del post (en mi caso sidebar) .... Gracias JMiur
Ahora te tengo una nueva pregunta como hago para que con un boton aparesca y desaparesca la sidebar (predeterminadamente oculta)
:D

Responder
JMiur  

Fíjate en esta entrada. Para que aparezca inicialmente oculta, la propiedad CSS de la sidebar debe ser display:none;

Responder
KIRA X92  

ejejej gracias me has ayudado mucho a progresar con mi nuevo blog esa entrada era lo que buscaba.

JMuir hace un tiempo atras pusiste entradas magazine, yo tengo algo parecido a un showcase pero no puedo hacer que al hacer clic sobre la imagen abra el post y no la imagen misma , tienes alguna solucion que no sea cambiarle manualmente el link a la imagen ( ya que tendria que editar cientos de post)
Gracias por ayudarme ..,

Responder
JMiur  

No sé en que blog es eso, Kira. Debería ver el script que utilizas para hacer esos resúmenes.

Responder
KIRA X92  

es en AnimeTop por ahora me kedan 2 conflictos, como te dije hacer que la primera imagen del post tenga su enlace hacia el mismo. Bueno y lo otro era por ejemplo si un titulo de post tiene 20 o mascaracteres como puedo hacer que solo se vean 15 (busque si existia algun maxlengh en css pero nada).

Responder
KIRA X92  

JMiur.
¿Es posible Mostrar los post que solo comienzen con una determinada letra ? osea separarlos y clasificarlos alfabeticamente sin necesidad de ponerles una etiqueta con la letra (que era lo que se me habia ocurrido )

Responder
JMiur  

utilizando tres propeidades de CSS, el ancho puede limitarse:
overflow:hidden;
width:valorpx;
word-wrap:break
pero no se limita por la cantidad de caractere sino por el tamaño y, como los caracteres no tienen los mismos anchos, el resultado puede ser cualquier cosa.

Para cortar el título en una cierta cantidad de caracteres debe usarse javascript. Como usas un script que haxe un resumen buscando la imagen, debes cambarlo para que tambien muestre el título y antes, lo cortas si es largo.

En Blogger, los posts se muestran de una sola manera, en ordencronológico comenzando por el último publicado así que no, sólo puedes hacer eso usando etiquetas.

Responder
KIRA X92  

gracias JMiur ya pude cortar los titulos y ajustarlos ... no estoy usando ningun script para los resumenes ya que son poco personalizables sin que fallen por lo que estoy usando 2 css diferentes 1 para los post en los "index" y otro para paginas estaticas (creo me va a tocar ponerle manualmente a las imagenes de la portada el link hacia el post) aunque tambien se me ocurria si es que se puede poner un div flotante sobre el showcase que al hacerle clic lleve al post ... esto es posible?

Responder
KIRA X92  

Creo que realmente resulto molesto con tantas preguntas XD
Bueno aqui otra que quizas sea util para muchos anoche agrege el boton "me Gusta" de facebook y lo probe pero la publicacion en mi perfil de facebook salio con una imagen cualquiera (aleatoria) del blog es posible que yo decida que imagen quede en los perfiles al hacer clic en me gusta

Responder
JMiur  

Si "se puede poner un div flotante sobre el showcase que al hacerle clic lleve al post" seguramente si, no tengo idea; son detalles de diseño muy específicos así que no puedo orientarte en eso.

La imagen que se muestra es definida por Blogger y se corresponde con aquella que el servicio detecta, en principio, la primera de cada post. No puede ser controlado y lo único que puede hacerse es lo que está indicado en esta entrada.

Responder
KIRA X92  

hola JMiur muchas gracias por la AYUDA bueno he aqui otra pregunta...
se puede remplazar links (texto) automaticamente por imagenes? por ejemplo tengo en cada una de mis publicaciones links de megaupload y quiero que todos los links que comienzen con http://megaupload.com/loquesea sean remplazados por una imagen

Responder
JMiur  

Sí, se puede pero, para cada una de esas cosas se requiere hacer una función específica.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR