10.4.14

Personalizar o link within


Então, eu sei que este tuto é conhecido, mas eu coloquei aqui no meu blog porque nunca achei nenhuma personalização do linkwithin perfeita. Ou seja: alguns não davam para colocar borda APENAS na caixinha em hover, porque a imagem do post era personalizada junta; Noutros, as alterações não funcionavam porque não tinham escrito "!important"; Outros ainda tinha pouco para personalizar...  

Bem, decidi fazer o meu próprio modelo, que provavelmente usarei com tudo. Tem montes de coisas personalizadas, indico que só altere as cores mesmo, ou se entender bem HTML, pode mudar as bordas e assim... Usa à vontade, mas credite!

Não sabe o que é o linkwithin? É o gadget de "poderá gostar de". Para quem não chegou lá, aproveite para ver na minha preview:


  • Sem hover:

  • Com hover:


Procure por
/b:skin
/* LinkWithin personalizado
----------------------------------------------- */
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.linkwithin_div {
background: #ffffff;
padding: 3 3px;
}
.linkwithin_text {
text-align: center !important;
font-size: 16px;
color: #BC8F8F;
font-family: silkscreen !important;
-webkit-transition-duration: .60s;
}
.linkwithin_text:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
}
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;
}
.linkwithin_posts {
width: 600px;
}
.linkwithin_posts a {
border: 0px;
padding-right: 5px !important;
padding-left: 5px !important;
border: 0px !important;
-webkit-transition-duration: .60s;
}
.linkwithin_posts a:hover {
background: #EED5B7 !important;
border-radius: 50px;
-webkit-transition-duration: .60s;
}
.linkwithin_img_0 div,
.linkwithin_img_1 div,
.linkwithin_img_2 div,
.linkwithin_img_3 div,
.linkwithin_img_4 div,
.linkwithin_img_5 div,
.linkwithin_img_6 div {
border-radius: 25px;
widht: 100px;
height: 100px;
-webkit-transition-duration: .60s; /* imagem interior */
}
div.linkwithin_img_0,
div.linkwithin_img_1,
div.linkwithin_img_2,
div.linkwithin_img_3,
div.linkwithin_img_4,
div.linkwithin_img_5,
div.linkwithin_img_6 {
border-radius: 25px;
padding: 2px !important;
border: 1px solid #EED5D2 !important;
-webkit-transition-duration: .60s; /* efeitos exteriores */
}
.linkwithin_img_0 div:hover,
.linkwithin_img_1 div:hover,
.linkwithin_img_2 div:hover,
.linkwithin_img_3 div:hover,
.linkwithin_img_4 div:hover,
.linkwithin_img_5 div:hover,
.linkwithin_img_6 div:hover {
border-radius: 50px;
widht: 100px;
height: 100px;
-webkit-transition-duration: .60s; /* imagem interior */
}
div.linkwithin_img_0:hover,
div.linkwithin_img_1:hover,
div.linkwithin_img_2:hover,
div.linkwithin_img_3:hover,
div.linkwithin_img_4:hover,
div.linkwithin_img_5:hover,
div.linkwithin_img_6:hover {
border-radius: 50px;
padding: 2px !important;
border: 1px dashed #BC8F8F !important;
-webkit-transition-duration: .60s; /* efeitos exteriores */
}
.linkwithin_title {
color: #8B8989 !important;
font-family: 'Sofia', cursive; !important;
font-size: 10px !important;
line-height: 10px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #FF1493 !important; /* Cor dos títulos ao passar o cursor */
letter-spacing: 2px; !important;
-webkit-transition-duration: .60s !important;
}

Pronto, está aí. Espero que tenham gostado ^^

Sem comentários:

Enviar um comentário