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.
Fuente: este post proviene de Las Cositas de Ana Mia, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado: