domingo, 22 de junio de 2014

0

Crear lista de entradas relacionadas para tu blog con CSS


Para eso primero copiamos el siguiente codigo HTML en PLANTILLA / PERZONALIZAR / OPCIONES AVANZADAS
   #tabla {
 border:1px solid #dedede;
 width:300px;
 background-color:#dedede;
}

#tabla a {
 text-decoration:none;
}

#tabla a:hover{
 text-decoration:underline;
 color:#C60;
   font-size: large;
 font-variant: small-caps;
 text-transform: uppercase;
}
Explicandolo sencillamente primero creamos un estilo llamado tabla para la etiqueta <tabla> que lo usaremos como contenedor de borde 1 pixel tipo solido y de color #dedede. Seguido abajo esta el mismo estilo pero aplicado a la etiqueta <a>, osea todos los enlaces que contenga dentro de la tabla tendra como estilo un texto de decoracion none (normal). Para finalizar aqui lo mas importante los estilos de los enlaces cuando se pasa el cursor de un enlace #tabla a(enlace):hover(cursor encima) tendran un texto decorado de sobrelineado (underline) de un color #c60 con una fuente de caracteres (tamaño - variente - transformacion) especificadas, lo que le da el efecto de agrandarse. Bien ahora pasamos a darle a nuestra lista de enlaces el estilo #tabla, pero para eso antes debemos tener una tabla HTML de la siguiente manera:
<table id="tabla" border="1">
     <tr>
       AQUI VA EL ENLACE DE TU ENTRADA
  AQUI VA EL ENLACE DE TU ENTRADA
  AQUI VA EL ENLACE DE TU ENTRADA
     </tr>
   </table>
El codigo de arriba debes pegarlo por lo general en la parte inferior de cada entrada (post) de tu blog y reemplazas "AQUI VA EL ENLACE DE TU ENTRADA" por el texto y HREF correspondiente. Si te fijas la etiqueta <table> tiene los parametros de id (le damos el estilo #tabla que hemos personalizado) hay otra forma de darle el estilo que es con class pero esta se usa en HTML para usarla en distintos tags HTML. Lo que yo hago es tener una tabla de entradas relacionadas osea aquellas que estan directamente relacionadas al post actual y otras de tambien puedes leer, para aquellos post que tiene que ver con la categoria general. Al final te deberia quedas asi (si deseas le quitas el valor del borde a 0):

Este es un enlace de prueba 1
Este es un enlace de prueba 2
Este es un enlace de prueba 3

Este es un enlace de prueba 1
Este es un enlace de prueba 2
Este es un enlace de prueba 3



Si quieres tener una tabla de post relacionados con imagenes lo que haces es modificar tu tabla de la siguiente mananera para que tengas 1 fila por el numero de columnas que desees (segun el numero de enlaces relacionados), asi por ejemplo:
<table>

   <tr>
     <td>AQUI LA IMAGEN DE TUE ENTRADA <br /> AQUI EL ENLACE DE TU ENTRADA</td>
     <td>AQUI LA IMAGEN DE TUE ENTRADA <br /> AQUI EL ENLACE DE TU ENTRADA</td>
     <td>AQUI LA IMAGEN DE TUE ENTRADA <br /> AQUI EL ENLACE DE TU ENTRADA</td>     
   </tr>

</table>
Entonces reemplazas "AQUI VA LA IMAGEN DE TU ENTRADA" por <img src="ENLACE DE ORIGEN DE LA IMAGEN REDUCIDA"><a href="ENLACE ADONDE SE VA A REDIRECCIONAR"></a> />, y AQUI EL ENLACE por lo que explique anteriormente en la lista de entradas simples. Aqui lo importante es que los thumbnail son imagenes reducidas alojadas en otro servidor esto es para que sea mas rapida la carga de tu pagina, para eso yo uso el servidor imgbox.com (ahora que los de imageshak se pusieron premiun que se jodan) ahi subo mis imagenes y me da la opcion de tener imagenes de distintos tamaños lo recomendable 150 x 150 px. Quedaria mas o menos asi:


AQUI EL ENLACE

AQUI EL ENLACE

AQUI EL ENLACE

No hay comentarios:

Publicar un comentario

Hola, si has aguantado hasta aquí seguro tienes ganas de comentar. Sobre todo si quieres darme apoyo moral ya que es lo único que gano porque si crees que solo me dedico al blog porque me sobra el tiempo... estas en lo correcto.

Ya en serio te advierto que en este blog no hay censura, así que aprovecha para sacar todo el odio dentro que tengas reprimido, siempre y cuando no sea contra mi. Aun así si dices u ofendes al autor de este blog, no hay paltas, después de todo hay cosas peores de las que tengo que preocuparme. No por algo tengo habilitada la opción de "anónimo", así que aprovéchala.

No te preocupes por las faltas de ortografía, si haces spam a tu pagina no seas tan descarado de solo dejarme la url, si tienes alguna duda quizás pueda ayudarte, sin compremeterme a nada y de ya te advierto que no lo se todo, aunque estoy muy cerca de saberlo.

Este blog generalmente hablo de anime, cine, manga, comic y series de tv si te interesa algún tema recuérdamelo comentando y mientras mas largo mejor (obviamente me refiero al comentario).

Powered by Jasper Roberts - Blog
Related Posts Plugin for WordPress, Blogger...