Blogs: Postagens relacionadas.

O post de hoje é um tutorial ensinando a colocar, e personalizar o gadget de postagem relacionadas, ou então o LinkWithin, aquele que fica no rodapé das postagens.

O primeiro passo é entrar no site do LinkWithin (aqui)
Depois preencher os campos de maneira correta.

1. Coloque seu email
2. O Link do seu blog
3. A plataforma que você usa. (Ex: blogger, wordpress)
4. A quantidade de postagens que estarão relacionadas.
5. Clique no ícone azul para gerar o código. 
6. Logo em seguida você será levado para uma página cheia de coisas escritas e algumas imagens, você deverá clicar no primeiro link, onde está escrito Install Widget.

7. Você será redirecionado para uma página igual esta da imagem, verifique se está tudo certo, se o gadget está indo para o blog correto (se você tiver mais de um), e o ultimo passo é só clicar no ícone azul, onde esta escrito adicionar widget. Salve e pronto.

Seu gadget de Postagens Relacionadas já está incluso nas suas postagens. 

Agora esse outro tutorial é opcional, é para personalizar o gadget, e para que isso aconteça você deverá mexer no htlm do seu blog.

1. Você deve ir na página de html do seu blog: no painel de configuração vá em MODELO.
2. Editar html. Vai aparecer uma caixa com o html do seu blog. (Recomendo que se você tem medo de fazer alguma coisa errada fazer um backup antes de mexer no código).
3. Nessa caixa de html você vai procurar pelo seguinte trecho  /* Content. CTRL F > abriu a caixa de pesquisa cole o trecho e ENTER.
4. Depois que achar você vai colocar abaixo do trecho o seguinte código:

.linkwithin_div {
background: #FFE1FF; /* Cor de fundo */
padding: 0 5px;
}
.linkwithin_text {
font-size:22px; /* Tamanho do título do gadget */
color:#FF6EB4; /* Cor do título do gadget */
}
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; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 800px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 12px !important;
}
.linkwithin_posts a:hover {
background: #FFC1C1 !important; /* Cor de fundo ao passar o cursor */
-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 {
/* Bordas redondeadas */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border-style: dashed !important;
}
.linkwithin_title {
color: #FF1493!important; /* Cor dos títulos das postagens */

font-size: 10px !important; /* Tamanho dos títulos das postagens */
line-height: 10px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color:#CD1076 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}

Para alterar a cor do background: background: #FFE1FF; apague o código da cor e troque pela sua.
Cor do titulo do gadget (onde fica escrito postagens relacionadas): color: #FF6EB4; /* Cor do título do gadget */

Agora é só visualizar se estiver tudo correto salvar e pronto. 

O código de personalização foi retirado do Blog da Nah.

Ufá, acabou o post, espero que gostem e usem, qualquer dúvida perguntem.
Um beijão e até mais.

Decidi que não seguirei as regras de uma das ultimas postagens, irei fazer os posts em uma sequencia aleatória, mas pretendo continuar com o mesmo conteúdo dito naquele post.