martes, 27 de noviembre de 2012

Blogger: Gadget Entradas Relacionadas

En el pie de esta entrada podéis apreciar una sección

Entradas Relacionadas

; si intentáis buscarla entre los

gadgets de Blogger

no lo encontaréis, debéis ir a la página de LinkWithin para configurarlo. Os indico los pasos a seguir:
  1. Entramos en la web de LinkWithin, rellenamos el formulario correspondiente y pulsamos sobre "Get Widget".
  2. Nos aparece la siguiente pantalla con instrucciones para la instalación, pulsamos el botón "Install widget".
  3. En la siguienet página podremos modificar el título para nuestro

    gadget de Entradas Relacionadas

    y ver el contenido que se añadirá a nuestra página; pulsamos sobre el botón "Añadir artilugio".
  4. Una vez pulsado el botón "Añadir artilugio" si vamos a la sección Diseño de

    Blogger

    veremos que se ha añadido un

    gadget "LinkWithin"

    , son nuestras

    Entradas Relacionadas

    . Las podremos ubicar donde mejor nos vaya, en este blog están puestas bajo las entradas.
  5. Si pulsamos editar sobre el

    gadget

    podremos cambiar el título o el código insertado pero... ¿es posible personalizar más el

    gadget

    ? Pues sí es posible, lo haremos personalizando el CSS de nuestra plantilla, editamos el HTML (si no sabes cómo hacerlo puedes ver la explicación en este otro artículo del blog) y localizamos el siguiente código:
    ]]></b:skin>
    
  6. Justo encima del código anterior insertamos los siguientes estilos, puedes personalizarlos (o eliminar los que no necesites) como creas oportuno.
    /* Estilos personalizados para LinkWithin */
    
    .linkwithin_div {
      background: #FFFFFF;  /* Color de fondo */
      padding: 0 10px;
    }
    
    .linkwithin_text {
      font-family: Verdana; /* Estilo de la fuente del título */
      font-size: 11px;      /* Tamaño del título del widget */
      color: #000000;       /* Color del título del widget */
      font-weight: bold;    /* Estilo fuente en negrita */
    }
    
    .linkwithin_posts {
      width: 500px;         /* Ancho del widget */
    }
    
    .linkwithin_title {
      color: #2288BB;       /* Color de los títulos de las entradas */
      font-family: Verdana; /* Estilo fuente títulos de las entradas */
      font-size: 11px;      /* Tamaño de los títulos de las entradas */
      line-height: 14px;
      text-align:center;
      text-decoration: none;
    }
    
    .linkwithin_title:hover {
      color: #000000;       /* Color de los títulos al pasar cursor */
      font-weight: bold;    /* Estilo fuente en negrita */ 
    }
    
    .linkwithin_posts a {
      border: 0; 
      padding-right: 10px; 
    }
    
    .linkwithin_posts a:hover {
      background: #819FF7;  /* Color de fondo al pasar el cursor */
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }
    
    a#linkwithin_logolink_0, a#linkwithin_logolink_1, 
    a#linkwithin_logolink_2, a#linkwithin_logolink_3, 
    a#linkwithin_logolink_4, a#linkwithin_logolink_5, 
    a#linkwithin_logolink_6, a#linkwithin_logolink_7, 
    a#linkwithin_logolink_8, a#linkwithin_logolink_9, 
    a#linkwithin_logolink_10, a#linkwithin_logolink_11, 
    a#linkwithin_logolink_12, a#linkwithin_logolink_13, 
    a#linkwithin_logolink_14, a#linkwithin_logolink_15, 
    a#linkwithin_logolink_16, a#linkwithin_logolink_17, 
    a#linkwithin_logolink_18, a#linkwithin_logolink_19, 
    a#linkwithin_logolink_20 {
      display:none;         /* Elimina enlace a LinkWithin del gadget */
    }
    
    .linkwithin_img_0 div, div.linkwithin_img_0,
    .linkwithin_img_1 div, div.linkwithin_img_1,
    .linkwithin_img_2 div, div.linkwithin_img_2,
    .linkwithin_img_3 div, div.linkwithin_img_3,
    .linkwithin_img_4 div, div.linkwithin_img_4,
    .linkwithin_img_5 div, div.linkwithin_img_5,
    .linkwithin_img_6 div, div.linkwithin_img_6,
    .linkwithin_img_7 div, div.linkwithin_img_7,
    .linkwithin_img_8 div, div.linkwithin_img_8,
    .linkwithin_img_9 div, div.linkwithin_img_9,
    .linkwithin_img_10 div, div.linkwithin_img_10,
    .linkwithin_img_11 div, div.linkwithin_img_11,
    .linkwithin_img_12 div, div.linkwithin_img_12,
    .linkwithin_img_13 div, div.linkwithin_img_13,
    .linkwithin_img_14 div, div.linkwithin_img_14,
    .linkwithin_img_15 div, div.linkwithin_img_15,
    .linkwithin_img_16 div, div.linkwithin_img_16,
    .linkwithin_img_17 div, div.linkwithin_img_17,
    .linkwithin_img_18 div, div.linkwithin_img_18,
    .linkwithin_img_19 div, div.linkwithin_img_19,
    .linkwithin_img_20 div, div.linkwithin_img_20 { 
      -webkit-border-radius: 10px; /* Bordes redondeados */
      -moz-border-radius: 10px;
      border-radius: 10px;
      border:0 !important;
    }
    
Espero que con lo anterior tengáis todo lo necesario para añadir y personalizar vuestro

gadget de Entradas Relacionadas

. Dentro de

areaTIC

puedes encontrar otros artículos interesantes, no dudeis en consultar nuestro archivo; también puedes seguirnos por RSS o las principales redes sociales (twitter, facebook, linkedin...).


5 comentarios:

Ana y Blanca dijo...

El problema de Linkwithin es que una vez que lo insertas y crea las miniaturas de las imágenes correspondientes a tus entradas ya no las actualiza, de modo que siguen apareciendo miniaturas correspondientes a entradas ya borradas y miniaturas sobre imágenes que fueron sustituidas.
No me gusta, por eso. Además, cuando les envías un consulta sobre el tema a sus servicio técnico, no responden nuca.
Debe de haber opciones mejores.
Un saludo

David Berdié Escolano dijo...

La verdad es que no tengo los problemas que comentas ya que no elimino posts ni cambio imágenes de posts ya publicados. En cuanto al soporte bueno, siendo gratuito de entrada no se puede esperar mucho... Si queréis pobrar otro gadget de este tipo podéis consultar el siguiente enlace:

http://stupidblogtricks.blogspot.com.es/2012/02/related-posts-showdown-linkwithin-vs.html

En el artículo os compara Linkwithin, Outbrain y nRelated. Si necesitáis ayuda con algo avisadme y lo miro, lo probaría en areaTIC.

Feliz 2013 y ánimo con vuestro blog, tiene muy buena pinta, especialmente la foto del roscón de reyes, je je je

Penélope dijo...

hola! me gustaria saber como tengo que hacer para quitar las lineas divisoras entre las miniaturas y el fondo malva al pasar el cursor, quiero que me quede como este http://www.juliaphoenix.com/2012/12/iherb-brochas-bdellium-tools-crease.html
el mio es este http://galiciavlog.blogspot.com.es/

David Berdié Escolano dijo...

Hola Penélope, me he conectado a tu blog y veo que ya lo tienes modificado como querías, ¿correcto? Es simplemente ajustar los estilos... siento no haber contestado antes pero este puente he estado desconectado. Si necesitas alguna otra cosa ya sabes donde encontrarnos; te recomiendo que visites en nuestro archivo todos los artículos relacionados con Blogger (http://www.areatic.net/search/label/Blogger), seguro que sacas ideas para tu blog: eliminar la barra superior, formulario de contacto, valoración de posts, inserción de vídeos, seguidores en twitter... Felicidades por tu blog, se nota que le dedicas tiempo!!

Noor Tarot Canal Espiritual dijo...

Hola David. Necesitaba un widget para mostrar entradas relacionadas en mi blog y al intentar (toda la tarde!) utilizar el de Linkwithin, al final me he dado por vencida. Por más que lo he intentado, no hay forma que aparezca ningun codigo, por lo que me he decidido por Outbrain. Todo bien, excepto que no sé cómo personalizarlo. Al colocarlo en el blog, funciona muy bien, pero muestra las entradas sugeridas en tooooodos sitios y eso es un desastre. Sé que se puede solucionar poniendo un condicional, pero ahi acaba mi sapiencia :( Has mostrado como hacerlo con linkwithin, podrias decirme como hacerlo con Outbrain??? Te estaría muy agradecida. Como afeaba mucho el blog, lo he quitado en espera de encontrar una solucion. Te dejo el enlace por si necesitas ver algo. http://noortarot-canalespiritual.blogspot.com.es/
Muchas gracias de todo corazon por tu ayuda. Un saludo, Noor

Publicar un comentario