Tutorial: Posts relacionados personalizados

http://www.omundodejess.com/2013/03/tutorial-posts-relacionados.html

Desde o começo da semana passada, quando eu dei uma mudada em alguns detalhes do blog como os posts relacionados e a paginação, algumas pessoas me pediram ajuda pra fazer igual, e como é super facinho, resolvi fazer um tutorial.

 O código eu encontrei no blog Jackie Dream, e como ele está com algumas falhas, resolvi fazer algumas alterações, então o código que eu irei postar já está pronto pra ser usado no seu blog, só precisará trocar as cores.

Antes de começar, faça um backup do seu theme e salve.

O primeiro passo é adicionar o widget do Linkwithin, vou fazer um passo a passo, mas acredito que a maioria de vocês já o utilizam.

Acesse o site do Linkwithin clicando aqui e preencha as opções:

Você será redimensionado para esta página, onde você encontra um tutorial de como instalar o widget.

Escolha seu blog, não altere o título e clique em adicionar wigdet. Depois em layout posicione o widget em baixo da área do post e salve.
Feito isso é hora da parte mais legal, colocar o código HTML :)

Agora em vá em modelo e depois editar html, para facilitar a busca aperte ctrl+f e procure por esse trecho ]]></b:skin>
Agora que você encontrou o código, ANTES ou ACIMA dele, cole esse código:

/* LINKWITHIN PERSONALIZADO editado por

Jess Vieira - www.omundodejess.com

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

.linkwithin_div {

background: #F6F1D4; /* COR DE FUNDO */

padding: 0 10px;

}

.linkwithin_text {

font-size:14px; /* TAMANHO DO TITULO DO GADET */

color:#CDA59B; /* COR DO TITULO DO GADET */

font-family: 'Arial', cursive; !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; /* CCOM ISTO ELIMINAMOS O LINK */

}

.linkwithin_posts {

width: 560px !important; /* TAMANHO DO GADET */

}

.linkwithin_posts a {

border: 0 !important;

padding-right:10px !important;

}

.linkwithin_posts a:hover {

background: #D8C1B9 !important; /* COR DO FUNDO AO PASSAR O MOUSE */

-webkit-border-radius: 10px !important; /*BORDAS REDONDAS*/

-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 { /* BORDAS REDONDAS */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

border-style: dashed !important;

}

.linkwithin_title {

color: #494347 !important; /* COR DOS TITULOS DAS POSTAGENS */

font-family: 'Arial', cursive; !important; /* TIPO DE FONTE DOS TITULOS DAS POSTAGENS */

font-size: 12px !important; /* TAMANHO DOS TITULOS DAS POSTAGENS */

line-height: 15px !important;

text-align:center;

text-decoration: none;

}

.linkwithin_title:hover {

color: #F6F1D4 !important; /* COR DOS TITULOS AO PASSAR O MOUSE */

font-weight: bold !important;

}

Altere apenas a área que estiver com a escrita indicando, que são cores, fontes e tamanho. Para as cores, eu uso esse site aqui.

Com esse código seus posts relacionados ficarão assim:

Agora se você quer que eles fiquem redondinhos iguais ao do meu blog, é só mudar a área marcada como /* BORDAS REDONDAS */ de 20px para 50px. Visualize, se estiver tudo ok, salve e voilá.

*Atualização: Pessoal, visitando alguns blogs de quem utilizou a personalização, eu encontrei um errinho de margem, mas acabei de editar a postagem e agora o código está corrigido. 

Bem facinho né pessoal? Espero que tenham compreendido e que eu tenha tirado as dúvidas de vocês.
Quem usar o código, comenta aqui pra eu ver como ficou, que tal?
xoxo