martes, 5 de mayo de 2015

Tutorial para tunear Linkwithin

Muy buenas tardes mundo.

Como veis, sigo con la dinámica de publicar tarde, qué le voy a hacer, con esto de la primavera ando un poco ploff, así que, creo que todas las entradas van a salir a esta hora.

Hoy, vengo con un tutorial, sí, me he animado y que espero que os funcione a las mil maravillas, de momento, a mi me va bien. No es que sea yo una apasionada de Linkwithin, pero, cuando no hay otra cosa, hay que conformarse.

He de decir que, tras mucho mirar tutoriales, probar con distintos, pues de cada cual podía coger algo, y mucha prueba y error cambiando por mi cuenta el código que me parecía, he conseguido estos códigos que van bien.

Lo primerísimo y primordial, hacer una copia de seguridad de nuestra plantilla.
Como sabéis, cuando instalamos linkwithin, por defecto, sale el mensaje "Quizás también le interese", hay a quien le gusta y a quien no, así que, lo primero que vamos a hacer es, poner la opción para poder cambiar esa frase por la que más nos guste, cómo???? Muy sencillo:
Nos vamos a plantilla y le damos a editar HTML, allí, pinchamos en cualquier parte de la plantilla y pulsamos, para buscar ctrl+F (para Windows) o cmd+f (para Mac) y buscamos esto: <head>, justo debajo, pegamos este código:

<script>
linkwithin_text= ' Aquí escribes tu frase '</script>

Guardamos y listo, ya tenemos el título cambiado. Fácil, verdad????

Ahora, si os apetece, vamos a ponerlo acorde con nuestro blog y nuestra paleta de colores, te parece???? Pues bien, vamos a ello.

Seguimos en nuestra plantilla, pero esta vez vamos a abrir el artilugio CSS, osease esto;
 <b:skin> ... </b:skin>, al abrirlo, nos vamos al final del todo, donde nos saldrá esto, ]]></b:skin>, y justo encima, pegamos el siguiente código:

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Color de fondo */
padding: 0 0px;
font-weight: normal !important;
}
.linkwithin_text {
font-size:18px; /* Tamaño del título */
color:#5d9ca4; /* Color del título*/
font-family: Crafty Girls; /* Tipo de letra */
font-weight: normal !important;
}
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; /* Con esto quitamos el enlace de linkwithin que se ve para reemplazarlo por lo que estamos cambiando*/
}
.linkwithin_posts {
width: 800px !important; /* Ancho del gadget linkwithin, yo os recomiendo ponerlo del mismo ancho que vuestro cuerpo del blog */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #ffffff !important; /* Color de fondo al pasar el ratón, yo, como veis lo tengo del mismo color, para que no varíe */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
}
.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 !important; /* Para redondear los bordes */ 
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #d7a499 !important; /* Color de los títulos de las sugerencias */
font-family: Crafty Girls !important; /* Tipo de letra para los títulos de las sugerencias */
font-size: 13px !important; /* Tamaño de los títulos */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #d7a499 !important; /* Color de los títulos al pasar el ratón, yo, lo tengo puesto para que no se cambie el color */
font-weight: none !important;
}
---------------------------------------------- */

Así es exactamente como yo lo tengo, tú deberás cambiar lo que está en verde, por el color que prefieras de tu paleta. Otra cosa, si quieres más redondas las sugerencias, deberás poner más pixeles, y si lo quieres más cuadrado, menos.

Bueno mundo, espero que te valga el tutorial, besitos y ... nos vemos en la blogosfera.



67 comentarios:

  1. No me ha salido el comentario!! bueno pues digo que lo voy a hacer si o si esta noche y me quedará seguro genial, un beso

    ResponderEliminar
    Respuestas
    1. Me alegro un montón que te sea útil y deseando estoy vértelo puesto.
      Un beso.

      Eliminar
  2. Genial! muchas gracias por compartirlo.

    ResponderEliminar
  3. que util! gracias por el post
    Un beso

    ResponderEliminar
  4. que util! gracias por el post
    Un beso

    ResponderEliminar
  5. Me viene genial, Ana, porque yo tengo otro que se llama Engageya (o algo así...jajaja) y a veces falla más que una escopeta de feria, así que me voy a plantear cambiarlo con este tutorial tuyo en cuando tenga un ratillo libre. Gracias por compartirlo y un besoo!

    ResponderEliminar
    Respuestas
    1. Sí, yo lo tuve y con las mismas lo quité, y, aunque Linkwithin no me apasiona, por lo menos, que se vea bonito.
      Bsitos guapa.

      Eliminar
  6. Hola !! pasaba por aquí y me quedo siguiendo haces cosas super interesante
    saludos
    http://elrincodejoluda.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola María, muchísimas gracias por quedarte por aquí y me alegro un montón que te guste lo que hago. Me paso a visitarte.
      Bsitos

      Eliminar
  7. Un tutorial muy útil, muchas gracias por tomarte la molestia de compartirlo con todos :)

    ResponderEliminar
  8. Muy interesante y útil.. Si algún día me animo le hecho un vistazo más a fondo.. Pero es que soy una manazas y la cago seguro!!! Y luego tengo que pegarle un grito de ayuda a mi marido... jajaja Un beso!

    ResponderEliminar
  9. Genial, es bastante útil, muchas gracias por compartir con nosotras, un besito.

    STYLE & FLOWERS // BLOGLOVIN

    ResponderEliminar
  10. Muchas gracias, aunque he tenido que averiguar qué rayos es un Linkwithin jajajajaja, lo voy a usar a ver qué tal queda en mi blog, muchas gracias.

    ResponderEliminar
  11. Muchas gracias, aunque he tenido que averiguar qué rayos es un Linkwithin jajajajaja, lo voy a usar a ver qué tal queda en mi blog, muchas gracias.

    ResponderEliminar
  12. Primero tengo que averiguar donde tengo eso en el blog O.o soy lo peor!!! Muchas gracias por el tutorial! :D :D

    ResponderEliminar
  13. Interesante, gracias a ti he conocido esta herramienta. La voy a usar en mi blog. Besos

    ResponderEliminar
  14. Un post muy interesante ,viene bien saber cosas nuevas.Un beso,M.

    ResponderEliminar
  15. Muchas gracias por la info , habrá que mirarlo despacio a ver que tal !!

    ResponderEliminar
  16. Interesante, esta genial saber cosas nuevas, en cuanto tengo un rato pruebo ;)

    ResponderEliminar
  17. que de cosas aprendemos contigo ana! besos

    ResponderEliminar
  18. Muchas gracias! no lo conocía y voy a mirarlo para mi blog, Saludos

    ResponderEliminar
  19. Yo no tenía idea de que era esa aplicación y me ha gustado. Muy buen post y excelentemente explicado.

    ResponderEliminar
  20. Que bien me hubieses venido hace unos meses. Me volví como loca buscando un tutorial como este. Me lo guardo sin dudar, ya que quiero hacer reformas en el blog y me vendrá de perlas si quiero cambiarlo. Muchas gracias cielo

    ResponderEliminar
  21. Que buena info Ana!! No lo sabía, a ver si me pongo con ello ;) gracias guapa

    ResponderEliminar
  22. Wow! Esto va directo a mi carpeta de utilidades para el blog. Gracias por el tutorial!!

    ResponderEliminar
  23. Es genial todo lo que sabes de estos mundos de blogger jajaja,me vienen muy bien tus consejos para el mio que aun se ve tan sencillo. Gracias y a seguir adelante.

    ResponderEliminar
  24. Estooo si que siii me lo apunto :) Gracias corazón por tu aportación ^.^

    ResponderEliminar
  25. Muy útil! A ver si le echo un vistazo que te ha quedado muy chulo!

    ResponderEliminar
  26. Gracias por el tutorial guapa, besos!!!.

    ResponderEliminar
  27. Gracias por compartir este tutorial :)

    ResponderEliminar
  28. Super interesante, gracias por compartir.

    ResponderEliminar
  29. Hola guapa, muy interesante, a ver si saco un poco de tiempo para ponerme al día, besos

    ResponderEliminar
  30. Hola!! Muchas gracias por el tutorial ^^ Lo voy a intentar a ver si lo consigo jejeje un besazo

    ResponderEliminar
  31. Genial el tutorial! Gracias por compartirlo con todos! :)

    ResponderEliminar
  32. Me ha gustado mucho la idea a ver si me sale!

    ResponderEliminar
  33. Que me da miedo a mi tocar la plantilla...Pero es verdad que m aburre lo sosa que está y con todos los pasos que has dado no debría ser tan complicado para una tecnolerda como yo...Si me animo serás la primera en ver los cambios. Un beso!

    ResponderEliminar
  34. Que me da miedo a mi tocar la plantilla...Pero es verdad que m aburre lo sosa que está y con todos los pasos que has dado no debría ser tan complicado para una tecnolerda como yo...Si me animo serás la primera en ver los cambios. Un beso!

    ResponderEliminar
  35. Genial! En cuánto pueda lo pruebo :)
    Un saludo.
    MMEUC

    ResponderEliminar
  36. Genial! En cuánto pueda lo pruebo :)
    Un saludo.
    MMEUC

    ResponderEliminar
  37. Me pondré a investigar pero soy tan torpe para estas cosas que no sé si atreverme a tocar nada... Gracias por compartir

    ResponderEliminar
  38. hola preciosa como te lo curras yo sin tiempo para nada pero paso rapido
    besos

    ResponderEliminar
  39. pues muchas gracias por el consejo.

    ResponderEliminar
  40. Muchas gracias por compartirlo, es de mucha utilidad :D

    ResponderEliminar
  41. Gracias por compartirlo! estos consejos bien genial. Cuando termine los exámenes, me lo tomaré con calma y lo miraré bien. Besos

    ResponderEliminar
  42. Gracias por este tutoríal, tengo que releerlo mas despacio a ver si puedo ponerlo en practica. Sirve también para wordspress?

    ResponderEliminar
  43. ahh que bien, gracias por el tutorial. Besitoss

    ResponderEliminar
  44. Muchas gracias por la información, es un post muy interesante, para los que estamos empezando en estos mundos. Enhorabuena

    ResponderEliminar
  45. Me viene genial el tutorial. Gracias por compartir, muchísimas gracias :)

    ResponderEliminar
  46. gracias ana como siempre muy buenos consejos

    ResponderEliminar
  47. Gracias por compartir! quiero más! besitos

    ResponderEliminar
  48. Muchas gracias por tu post , nos enseñas muchísimas cositas !!!

    ResponderEliminar
  49. Muchas gracias por tu post , nos enseñas muchísimas cositas !!!

    ResponderEliminar
  50. Me lees el pensamiento? Jajajajaja Yo lo tengo puesto ya pero quería modificarlo un poco y no sabía cómo diantres hacerlo. Gracias a tu tutorial podré encontrarlo en un plis plas y ponerme a trapechear Jejeje Besos

    ResponderEliminar
  51. Gracias ;) me gusta tu blog, es interesante por los consejos

    ResponderEliminar
  52. Me gustan mucho tus tutoriales, gracias guapa!!

    ResponderEliminar
  53. Muchas gracias por la ayuda, a mi estas cosas se me dan fatal :(

    ResponderEliminar
  54. Muy buen tutorial, gracias por compartirlo :)

    ResponderEliminar
  55. Gracias por la información, soy nueva en todo esto y cualquier ayuda, siempre es bien recibida. Saludos.

    ResponderEliminar
  56. Me gustan mucho tus ideas... sólo que creo que yo soy muy poco audaz, no se nada de programación y lo poco que he logrado con mi blog me ha costado muchísimas horas de sueño!!! Aún así te felicito por estar a la vanguardia y siempre proponernos cosas nuevas!

    ResponderEliminar
  57. uf... que complicado lo veo. Yo soy una negada! ;)

    ResponderEliminar
  58. Muchas gracias a tod@s por vuestros comentarios, sois un sol

    ResponderEliminar

Me hace muchísima ilusión que me dejes comentarios, saber qué opinas y si te gusta lo que hago, así que te animo a escribirme.
Sólo te pido un favor enorme, no soy un blog spam, ayúdame a seguir siendo así y no dejes enlaces en los comentarios.
Muchos besos a todo@s.