Personalize seu Linkwithin (gadget de postagens relacionadas para blogs)

 Um dos recursos mais usados em blogs é, certamente, o Linkwithin.

Com ele você pode ganhar mais visualizações em seu blog.

 Aprenda nesse tutorial a personalizá-lo.

O padrão do gadget, exatamente como ele é gerado no site, é simples e básico. Mais ou menos assim:

O tutorial de hoje vai além: vamos aprender como personalizar o gadget Linkwithin.

Ficará assim:

Personalizar o Linkwithin - modelo 1

Comece acessando o painel administrativo de seu blog.

Clique na aba Modelo, escolha Editar html e dentro da caixa de códigos tecle Ctrl+F.

Na barra de busca que abrir cole isso:

]]></b:skin>

Imediatamente acima da tag localizada cole o código abaixo:

----------------------------------------------- */

.linkwithin_div {
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do titulo */
color:#ED6195; /* Cor do titulo */
font-family: 'comic sans ms'; !important; /* Tipo da Fonte */
}
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: 700px !important; /* Largura do gadget de acordo com sua área de postagem*/
}
.linkwithin_posts a {
border: none !important;/* Estilo da borda */
padding-right: 10px !important;

}
.linkwithin_posts a:hover {
background: #fee !important; /* cor de funco ao passar o cursor */
-webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);-moz-box-shadow:0px 1px 7px rgba(0,0,0,.4); box-shadow:0px 1px 7px rgba(0,0,0,.4);
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px;
border-radius: 5px;
}
.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: 0px !important;
-moz-border-radius: 0px;
border-radius: 0px;
border-style: dashed !important;
}
.linkwithin_title {
color: #000 !important; /* Cor dos titulos dos posts */
font-family: 'Verdana'; !important; /* Tipo de fonte titulos posts */
font-size: 12px !important; /* Tamanho titulos das postagens */
line-height: 12px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #f92b4f !important; /* Cor dos titulos das postagens ao passar o cursor */
font-weight: normal !important;
}
/* Fim

----------------------------------------------- */


Deixei marcado no código as alterações de cor e estilo que você poderá fazer.

Depois de pronto é só salvar as alterações.

Simples, né?