20 de fev de 2016

Postagens Relacionadas No Blog (Tutorial)

As postagens relacionadas no Blog ajuda bastante na divulgação das postagens mas antigas, hoje vim ensinar a vocês como colocar esse Widget no seu blog, não é difícil e vou explicar tudo para todos entenderem ok? o resultado vai ficar mas ou menos assim;


1- Antes de tudo você precisa ir nesse site aqui Linkwithin lá você vai preencher os seguintes campos colocando seu e-mail, endereço do blog, a plataforma usada e no final o numero de postagens que você quer que apareça no seu blog. (No meu caso são 4) e depois de preenchido é só clicar no botão azul.


2- Feito isso você será direcionado para outra página como essa abaixo, agora é só clicar em Install Widget para instalar como mostro abaixo.
3 - Logo depois você será direcionado para a página do Blogger onde vai aparecer essa janela aqui, não precisa alterar nada, basta clicar em ADICIONAR WIDGET e já estará instalado.



4- E finalmente para concluir agora é só colar o código para você personalizar como quiser, vá em MODELO e clique em EDITAR HTML.
Depois aperte a tecla Ctrl+F e procure por ]]></b:skin>
ACIMA dessa Tag cole o seguinte código;


/* LINKWITHIN PERSONALIZADO editado por
Luana Oliveira - www.luannaoliveira.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 as áreas que estão marcadas como a cor, a fonte, tamanho etc.
Deixo aqui onde vocês podem pegar os códigos das cores nesse site Tabela De Cores e geralmente eles vão ficar na forma de quadrado, se vocês quiserem que fiquem redondinhos como está no meu blog é só alterar onde está marcado como /* BORDAS REDONDAS */ de 20px para 50px. Visualize e se estiver tudo certinho salve.

É meio trabalhoso mas o resultado é bastante favorável, espero que vocês tenham gostado amores, qualquer dúvida deixa aqui nos comentários. Beijoos !





3 comentários

  1. Essas postagens relacionadas fazem toda diferença né? Porque as pessoas irão ver um post que ela gosta e verão mais do seu blog <3
    www.tudo-em-dobro.com

    ResponderExcluir
  2. Não consegui, bem que vc poderia fazer um video explicando direitinho

    ResponderExcluir
  3. Não consegui, bem que vc poderia fazer um video explicando direitinho

    ResponderExcluir