Reino Kawaii

Oie :3 Hoje vamos falar sobre como prender a atenção do leitor mostrando a ele mais opções de postagens, pelas quais talvez se interesse. Isso pode ser feito por meio das postagens relacionadas.
Conheço 3 formas de adicionar posts relacionados em um blog. Neste post vamos usar e personalizar o LinkWithin, e nos próximos posts, mostrarei as demais, para não ficar muito extenso.
O LinkWithin é um dos sites mais conhecidos que fornecem opções para adicionar artigos relacionados em um blog. Por meio dele se obtém um widget pronto, sem trabalho nenhum para o usuário que dele necessitar e sem cadastro. Funciona tanto no Blogger quanto no Wordpress. Veremos como adicioná-lo ao Blogger, já que no caso do Wordpress é bem mais simples, só fazer download e instalar o plugin.
Para adicionar ao seu blogger...
1. Acesse o site, informe um e-mail, sua URL (endereço do blog) e deixe assim:

• Em width você define quantas posts quer que apareça;

• Escolha em Platform a opção Other para pegar direto o código; se você escolhe a opção Blogger, terá que instalar o widget, o que dá no mesmo rsrs...o fato é que com o código em mãos poderá adicioná-lo onde quiser no HTML do seu template.

• Marque "My blog has light text on a dark background" se seu blog tem plano de fundo escuro (preto) e letras claras.

2. Após copiar o código fornecido a você, adicione abaixo da área de postagens em um novo gadget HTML/JavaScript ou entre em Modelo - Editar HTML - marque Expandir Modelos de Widget e cole-o antes de <div class='post-footer'> ou de <div class='post-footer-line post-footer-line-1'>.
3. Por padrão, as postagens relacionadas serão mostradas na página inicial, sem necessidade de abrir o post. Caso você queira que apareçam apenas quando o leitor abrir a postagem, deixe assim:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
COLE AQUI O CÓDIGO DO SEU LINKWITHIN
</b:if> 

4. Se quiser, pode adicionar junto ao código este aqui:

<script>linkwithin_text='Poderá gostar também de:'</script> 

Com ele você altera o texto/mensagem do LinkWithin.
5. Agora a parte boa! Podemos aplicar estilos ao LinkWithin! Isso envolve aplicar efeitos, arredondar imagens, mudar cores dos links e assim por diante. Para isso, adicione o código acima de ]]></b:skin>:

.linkwithin_div {
background: #fff; /* Background */
padding: 0 10px;
}
.linkwithin_text {
font-size:12px; /* Tamanho do titulo */
color:#000; /* Cor do titulo */
text-shadow: 1px 2px 3px #000; /* sombreamento e cor do sombreamento */
font-family: 'Verdana'; !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: 0px !important; /* Largura do gadget de acordo com sua área de postagem*/
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #fee !important; /* Background ao passar o cursor */
-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: 5px !important;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px dotted #fcc !important;/* Estilo da borda */
}
.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: #000 !important; /* Cor dos titulos das postagens ao passar o cursor */
font-weight: bold !important;
} 

Só ir visualizando e editando ao seu gosto, sendo que no próprio código já se vê os pontos principais a serem alterados. Caso queira códigos das cores, veja nesta tabela. É isso por enquanto.
No próximo post trarei outra opção para postagens relacionadas, que na minha opinião, é mais fofa que o LinkWithin :3