Tutorial: posts relacionados personalizados para Blogger | O Mundo de Jess

Tutorial: posts relacionados personalizados para Blogger

04 mar 2013

Desde o começo da semana passada, quando eu dei uma mudada em alguns detalhes do blog como os posts relacionados e a paginação, algumas pessoas me pediram ajuda pra fazer igual, e como é super facinho, resolvi fazer um tutorial.

 O código eu encontrei no blog Jackie Dream, e como ele está com algumas falhas, resolvi fazer algumas alterações, então o código que eu irei postar já está pronto pra ser usado no seu blog, só precisará trocar as cores.

Antes de começar, faça um backup do seu theme e salve.


O primeiro passo é adicionar o widget do Linkwithin, vou fazer um passo a passo, mas acredito que a maioria de vocês já o utilizam. Acesse o site do Linkwithin clicando aqui e preencha as opções:


Você será redimensionado para esta página, onde você encontra um tutorial de como instalar o widget.


Escolha seu blog, não altere o título e clique em adicionar wigdet. Depois em layout posicione o widget em baixo da área do post e salve.
Feito isso é hora da parte mais legal, colocar o código HTML :)

Agora em vá em modelo e depois editar html, para facilitar a busca aperte ctrl+f e procure por esse trecho ]]></b:skin>
Agora que você encontrou o código, ANTES ou ACIMA dele, cole esse código:

/* LINKWITHIN PERSONALIZADO editado por
Jess Vieira – www.omundodejess.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 a área que estiver com a escrita indicando, que são cores, fontes e tamanho. Para as cores, eu uso esse site aqui.

Com esse código seus posts relacionados ficarão assim:
 
 














Agora se você quer que eles fiquem redondinhos iguais ao do meu blog, é só mudar a área marcada como /* BORDAS REDONDAS */ de 20px para 50px. Visualize, se estiver tudo ok, salve e voilá.

*Atualização: Pessoal, visitando alguns blogs de quem utilizou a personalização, eu encontrei um errinho de margem, mas acabei de editar a postagem e agora o código está corrigido.

Bem facinho né pessoal? Espero que tenham compreendido e que eu tenha tirado as dúvidas de vocês.
Quem usar o código, comenta aqui pra eu ver como ficou, que tal?
xoxo

47 Comentários

Dinha Vieira 04 de março de 2013 às 16:06

Ah, eu queria fazer isso! Obrigada pelo tutorial, Jess, ficou bem explicadinho e é fácil de fazer *-*

Beijão, Unsaid Things

Responder


lilian alipio 04 de março de 2013 às 16:31

adorei o tutorial, mas tenho medo de tentar e virar uma completa zona.
http://blogradioactive.blogspot.com.br/

Responder


De repente dezoito 04 de março de 2013 às 20:24

Consegui colocar no meu, ficou fofinho! Obrigada!

Responder


liana.trab 04 de março de 2013 às 20:38

Adorei o tutorial! Até me arrisquei e fiz!! O que achou??

http://morethanalovelylife.blogspot.com.br/

Responder


Jhessy 04 de março de 2013 às 17:58

Adorei, preciso de tempo para fazer isso.

Responder


pâm teles 04 de março de 2013 às 23:30

Fica muito bacana, estou usando *o*

Responder


Jess 05 de março de 2013 às 03:20

Oba ♥ Manda o link do seu blog pra eu ver :p

Responder


Jess 05 de março de 2013 às 03:22

Adorei as cores, ficou lindo <3

Responder


Jess 05 de março de 2013 às 03:22

<3 Depois manda o link do seu blog pra eu ver :)

Responder


Julia Nayra 05 de março de 2013 às 14:19

Adorei Jess, vou colocar no meu blog e vai ficar muito bom!
Obrigada mesmo pela sua ajuda, beijinhos flor….

s2

Responder


Julia Nayra 05 de março de 2013 às 19:59

Já coloquei no meu blog, Jess.

Dá uma olhadinha?

JULIANAYRA.BLOGSPOT.COM

Beijinhos e você me ajudou muito !

Responder


Drynha Sousa 05 de março de 2013 às 23:41

Sua lindaaaaa.. Obrigada por compartilhar! Estava mesmo procurando como deixar as imagens redondinhas, acho lindo! Mudei lá no blog, obrigada mesmo! *—*

Beijinhos <3

Responder


Suelen Costa Lima 06 de março de 2013 às 14:39

Arrazou muito Jess! <3 Sempre quis ter esse widget mas nunca vi um que fique já prontamente tão lindo ahehaehaeh vou usar futuramente, porque né

<3

Responder


Jess 07 de março de 2013 às 12:53

haha não fica não, ele é fácil e o código ta detalhado caso precise excluir haha

Responder


Jess 07 de março de 2013 às 12:53

Quando fizer me mostra :D

Responder


Jess 07 de março de 2013 às 12:54

Adorei, Ju!

Responder


Jess 07 de março de 2013 às 12:56

Ficou fofo, como tudo no seu blog <3

Responder


Jess 07 de março de 2013 às 12:56

usa sim , Suu <33

Responder


'- Strawberry Piink 07 de março de 2013 às 19:48

Usei e adorei, Jess!
Há muito estava querendo colocar no meu blog, mas nunca achava um tutorial que explicasse direitinho *-*

Obrigada!

Responder


Tátila 08 de março de 2013 às 17:42

Estou usando… muito obrigada! Sempre procurei aprender mas não conseguia encontrar um tutorial tão simples e bem detalhadinho ♥

blog: http://www.alemdemim.com

Responder


Aline Bencke 09 de março de 2013 às 04:02

Muito obrigada pela dica, vou testar *-*

Beijos ♥

Louca Indecisão

Responder


Thuany Santos 19 de março de 2013 às 06:12

Oi Jess! Sou leitora nova aqui e já queria dizer que estou amando o blog! :D eu já tinha o Linkwithin mas não sabia que ele poderia ser personalizado! Adorei! Só estou com uma dúvida: no meu blog, ele sempre relaciona com post’s beeem antigos (há mais de um ano!) isso acontece com o seu também? Achei que mudando agora, ele também mudaria as “relações”, mas não, continua a mesma coisa. :/

Responder


Jess 19 de março de 2013 às 14:12

Sim, por exemplo nessa postagem, ele está mostrando como post relacionado o primeiro que foi publicado no blog :
Esse problema é do próprio gadet Linwithin, aqui as vezes ele mostra certo e as vezes não.
Tem um outro que se chama 2seep ) tenta usar ele, aqui no meu blog devido aos códigos de html não rodou, mas já usei em blog teste e fica bem bonito.

beijo

Responder


Francieli Bittencourt 12 de abril de 2013 às 18:49

Guria, era exatamente isso que eu tava procurando! Nem acreditei quando ficou tudo lindinho, muito obrigada por compartilhar, viu?

Uma dúvida: como mudar aquele título do widget “you might also like:” ?

Beijinho!

Responder


Francieli Bittencourt 14 de junho de 2013 às 18:19

Jess, deixa eu te fazer uma pergunta!

Tu saberia como colocar nessa personalização o efeito hover, aquele que só aparece a cor quando passa o mouse?

Beijinhos e obrigada!!

Responder


Jess 14 de junho de 2013 às 18:25

Sei qual o código, mas nunca usei nos posts relacionados. Posso fazer um teste e se der certo eu posto aqui :)

Responder


Jess 14 de junho de 2013 às 18:32

Ei, não tinha visto essa mensagem :
Para mudar procure por e cole abaixo esse código: linkwithin_text=’escreva aqui seu texto:’ visualize e salve :)

Responder


Francieli Bittencourt 14 de junho de 2013 às 18:35

Eu to tentando acrescentar umas coisas e editar o código que tu nos ofereceu no teu post, mas todas as minhas tentativas estão fracassando! hahahahah

Muito obrigada pela tua atenção, viu?

Responder


Francieli Bittencourt 14 de junho de 2013 às 18:51

Brigadada Jess!!
Esse eu acabei conseguindo, heehe

Responder


Vicktoria Monteese 25 de junho de 2013 às 07:29

Jess, tentei de todas as formas procurar o código no meu template, com ctrl+f, mas não encontra de jeito nenhum. Nem colocando o código e nem colocando “skin”. Me ajuda?

Responder


Jess 26 de junho de 2013 às 19:42

Todo e qualquer theme tem que ter esse código. Dá uma olhada se no seu ele está acima de , ele é ó código que fecha: <![CDATA[/*

Responder


Lu Vilha 12 de janeiro de 2014 às 13:17

Super funcionou, até indiquei esse tutorial como links da semana

http://eunaonascinosanos80.blogspot.com.br/

Responder


Jess 13 de janeiro de 2014 às 23:23

Eba! Fico feliz em saber :)
Obrigada pela indicação :*

Responder


Beatriz Cristina 29 de março de 2014 às 18:13

Não consegui :/

Responder


Jess 30 de março de 2014 às 19:33

Você pode ter apagado ou esquecido de algo. Testei aqui e está tudo ok :(

Responder


Helena Santana 22 de abril de 2014 às 22:01

Oii então eu posso mudar o titulo do gadget?

Responder


Dani Feitosa 23 de abril de 2014 às 23:37

não consigo instalar. tentei de todas as meneiras mas não aparece nada ! ;(

Responder


Helena Santana 25 de abril de 2014 às 23:32

Então, eu coloquei o código, mas não aparece as fotos do post

Responder


Helena Santana 04 de maio de 2014 às 16:58

Oii eu queria saber como eu faço para retirar esse espaço aqui entre o circulo e a imagem, eu queria que a imagem ficasse redonda, mas sem o circulo e o espaço, tem como?

Responder


Lay 27 de julho de 2014 às 05:28

Ei, Jess! Obrigada por compartilhar isso, eu não achava de jeito nenhum. hahah
Você sabe me dizer como eu faço pra colocar tudo centralizado? Se puder eu agradeceria muito!
Obrigada e fico aguardando sua resposta.
Um beijo!
http://www.escritoradosdezesseis.com

Responder


Sabrina Amorim 08 de outubro de 2014 às 16:38

Oii, eu sei que você já fez esse post a muito tempo mais eu tenho uma pergunta:
Como faz para aparecer as imagens das postagens relacionadas?

Responder


Ghaby Macedo 05 de novembro de 2014 às 14:25

o que me incomoda nesse linkwithin é que ele sempre fica em cima dos comentários e botoes de compaetilhamente… tem como ele parecer embaixo???

Responder


Menina 31 de dezembro de 2014 às 17:39

Ficou bem legal, eu deixei a imagem redonda, era o que eu queria mas não estava encontrado como personalizar, eu tinha encontrado um outro tutorial, mas não tinha funcionado. Adorei!

Responder


Lilian pires 28 de janeiro de 2015 às 20:31

Jess amei seu blog!
Usei essa dica e amei ♥♥

Responder

Jess Vieira 29 de janeiro de 2015 às 10:45

Eba! Super feliz em saber ♥

Responder


M-chan 05 de janeiro de 2016 às 16:25

Vou colocar isso no meu blog!
E lá vou eu novamente me afundar em CSS! :v

Responder

Jess Vieira 11 de janeiro de 2016 às 08:10

Uhul! Espero que dê certo <3 :*

Responder


DEIXE UM COMENTÁRIO:

© 2012 - 2015 - O Mundo de Jess - TODOS OS DIREITOS RESERVADOS

Todas as fotografias, textos e design são de propriedade exclusivas de Jess Vieira, exceto quando sinalizado.