In Tutoriais

LinkWithin Personalizado com CSS

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
Créditos: Ciudad Blogger

Related Articles

5 comentários:

  1. Adorei!! Olha estava eu mais uma vez procurando esse código pra personaliza o linkwithin na internet e encontrei teu blog que aliás, super fofo eu adoro esses tons pastel é super 'minha cara meu', daí achei fácil de fazer o tutorial mais fiquei com um pé atrás pq já tinha testado outros códigos personalizados e não deu certo e fiz o teste hoje e amei o resultado, deu super certoO mudei poucas coisas no teu código pq na verdade as cores já estão como eu gosto passa no meu blog pra vc conferir o resultado!

    Bem por enquanto deixei na página inicial depois qr colocar só nas páginas internas e espero que o código não suma com o tempo pq eu tinha colocado um código de páginas numeradas no meu blog de um outro tutorial ( que não foi do seu blog) e ficou super lindo, funcionou muito bem mais com o tempo sumiu, agora eu já encontrei outro código e já instalei novamente páginas numeradas no meu blog espero que td ocorra bem.

    BjoO em muito obrigada por dividir conosco o que vc sabe, e sabe fazer muito bem!

    ResponderExcluir
  2. Help-me,meu link within nao aparece as miniaturas como deveria,aparecem somente as listas de assuntos relacionados.
    Ja na hora da instalação do linkwithin nao pegou direito,nao tem nada a ver com a estilização,nao sei se é conflito de plugins do templte,mas o fato é que nao consigo faze-lo ficar normal,como deveria.
    Alguma dica que possa me ajudar??

    ResponderExcluir
    Respostas
    1. Bom, eu recomendo que você use um código de posts relacionados feito com CSS e HTML que já postei aqui (veja nos Tutoriais na página Posts a postagem Posts Relacionados Usando Apenas HTML e CSS). Nele é possível deixar tudo personalizado e não precisa de site.
      Não entendo muito muito sobre o Linkwithin, mas dando uma olhada pela internet encontrei que uma das coisas que impede que as miniaturas apareçam é com relação a configuração dos feeds; talvez seja isso. Para resolver, veja o post Miniaturas das Imagens não aparecem do site Dicas para Blogs.
      Espero ter ajudado :3
      Bjuss...

      Excluir
  3. Oii então, eu não queria que aparece-se background, aí eu tirei, mas continua do mesmo jeito, um lilás atras com o efeito hover, como eu retiro isso?

    ResponderExcluir
    Respostas
    1. Tenta colocar em background assim: #transparent;
      Vou rever alguns códigos posteriormente ok ^^
      Bjus...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart