20.7.14

Modelo para Link Within


Okaeri :)

Acho que toda a gente sabe, mas para quem desconhece isso, o Link Within é aquele gadget que algumas pessoas (cada vez menos) adicionam no fim dos posts, normalmente chamado "Poderá gostar de". Eu já disponibilizei uma maneira fácil de o editar faz pouco tempo, mas agora criei um novo modelo, mais pequeno e económico, creio. Eu achei muito fofo, podem editar as cores há vontade, estou a usá-lo num layout de SAO que irei disponibilizar quando consertar os erros puder.

Prévia


Tutorial

1. Adicionar o gadget (of course):
Saiba como fazê-lo aqui: www ou aqui: www

2. Procure por:
/b:skin

3. Acima cole todo o código seguinte:
.linkwithin_div { /*área do link within */
margin: -20px 0px 5px 0px!important;
background: transparent;
padding: 3px 3px;
}
.linkwithin_text { /*título do gadget link within*/
color: #edc86b!important;
font-size: 20px;
font-family: Colonna MT!important;
margin-left: 250px!important;
text-shadow: #fff!important;
-webkit-transition-duration: .60s;
}
.linkwithin_text:hover { /*título do gadget link within */
color: #fff!important;
text-shadow: 0px 0px 3px #faaab1!important;
-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 { /*não mexam!!!*/
display:none;
}
.linkwithin_posts { /*caixinha dos posts link within*/
width: 500px!important;
height: 70px!important;
margin-left: 125px!important;
}
.linkwithin_posts a { /*caixinha, e texto do link within*/
background: url(http://2.bp.blogspot.com/-WdLtaYuSoxE/U-YytgWVrQI/AAAAAAAAVug/E3uWxBhqJjo/s1600/baseanime.png)repeat!important;
width: 55px!important;
height: 55px!important;
border: 0px !important;
padding: 0px 20px 0px 20px!important;
-webkit-transition-duration: .60s;
}
.linkwithin_posts a:hover { /*caixinha e texto, com mouse*/
background: url(http://1.bp.blogspot.com/-Hc-7XzMJpt4/U-Yx7GeMG9I/AAAAAAAAVuU/8vtJLcDPreU/s1600/fundolinkwithin.png) no-repeat!important;
border-radius: 5px;
-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 { /* imagem do link within - interior */
border-radius: 25px;
width: 50px!important;
height: 50px!important;
-webkit-transition-duration: .60s;
}
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 { /* contorno da imagem, efeitos exteriores */
border-radius: 25px;
padding: 2px !important;
border: 1px dashed #fae3a2!important;
width: 50px!important;
height: 50px!important;
-webkit-transition-duration: .60s;
}
.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 { /* imagem - interior */
border-radius: 50px;
width: 50px!important;
height: 50px!important;
-webkit-transition-duration: .60s;
}
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 { /* contorno da imagem, efeitos exteriores */
border-radius: 50px;
padding: 2px !important;
border: 1px dashed #8a74cf!important;
-webkit-transition-duration: .60s;
}
.linkwithin_title { /*títulos dos posts do link within*/
width: 75px;
text-align: center;
margin: 0px -10px 5px -10px!important;
font-size: 10px!important;
color: #faaab1!important;
font-family: muli!important;
-webkit-transition-duration: .60s;
}
.linkwithin_title:hover { /*títulos ao passar o mouse*/
color: #c299cf!important;
text-shadow: 1px 1px 1px #ffffff;
-webkit-transition-duration: .60s;
}

Já dei várias explicações, portanto acho que fica fácil editar. 
Era isso, espero que tenham gostado :)

Sem comentários:

Enviar um comentário