02 outubro 2012

Postagens Relacionadas Personalizadas no blog

Tumblr_lx72wefd0u1qgogk2o1_500_large

Oi gente!!! Tudo bem com vocês?
Hoje eu trouxe um tutorial muito procurado por muitos. Inclusive eu procurei a não encontrei muitos que dessem resultado, até que misturei alguns e deu o resultado que vocês podem ver no fim das postagens.
Hoje vou ensinar como colocar o LinkWithin, o gadget de postagens relacionadas, ou o famoso "Leia também".
Além de ensinar a colocá-lo vou ensinar a personalizar as cores dele.
Vamos lá?

Antes de tudo você precisa se cadastrar nesse site aqui (www) e fazer o seguinte:


  Preencha com o seu e-mail, o link do seu blog, a plataforma (no meu caso, o blogger) e em Width escolha quantas postagens relacionadas você deseja. 

  Se seu blog tem o fundo das postagens em tons escuros selecione a opção:  "My blog..."

  Clique em "Get Widget" para gerar o código HTML.

  Cole o código gerado em um gadget Java Script/HTML no painel do blogger.

  Para personalizar o título do gadget, cole o código a seguir depois de </script> dentro do código gerado:
<script>linkwithin_text=' SEU TEXTO AQUI '</script>
 - Você pode colocar títulos como: Leia também, Você também pode gostar de, Outras postagens...

  Para personalizar as cores cole o código a seguir logo abaixo de : 

/* Content
----------------------------------------------- */
/* LinkWithin personalizado
----------------------------------------------- */
.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;
}
Aí está o código do mesmo jeito que eu usei aqui no blog. Para personalizá-lo ao seu gosto siga as instruções que estão no próprio código.

Smartphone_large

  Créditos    





3 comentários:

  1. é bem interessante isso de postagens relacionadas... pretendo colocar em algum lay futuro.. {:
    Morangostambemfalam | blogspot

    ResponderExcluir
  2. Só teve um problema nobre amiga,

    O código no site que você indica não gera. Já tentei por três vezes preenchendo os dados, porém, o resultado é sempre negativo.

    Me dê uma dica de como resolver...

    Abraço

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo