Tutorial: gadget personalizado de posts relacionados
quarta-feira, fevereiro 04, 2015
Sabem aquele gadget de "Posts relacionados" ou "Veja também" que alguns blogs (incluindo o LNG) possuem? Hoje vou ensinar vocês como adicioná-lo e como personalizar. O resultado será como o do blog:
INSTALANDO O GADGET
Selecione a opção exibida caso seu blog tenha fundo escuro e letras claras.
2. Clique em "Get Widget!"
3. Clique em "Install Widget" na janela que será aberta e posicione o gadget no Layout do seu blog abaixo das postagens, dessa forma:
Depois, é só salvar. Agora vamos para a parte de personalização.
PERSONALIZANDO O GADGET
Algumas vezes o gadget vem em inglês, e o título dele aparecerá como "You might also like". É possível modificar esse título e escrever o que for de nossa preferência. Para isso, basta seguir alguns passos. No Layout do seu blog, abra o gadget e clique em Editar. Abaixo do código exibido, cole o seguinte trecho:
<script>linkwithin_text=' Seu texto aqui '</script>Agora, substitua a parte em negrito pela frase que você deseja exibir. No meu caso, ficou assim:
<script>Por fim, é só salvar.
var linkwithin_site_id = 2293565;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a><script>linkwithin_text='Veja também:'</script>
2. Personalizando o formato, cores e fonte
Eu pessoalmente, não gosto muito da aparência do gadget oferecido pelo LinkWithin. Mas felizmente, é possível modificá-lo! Utilizando CSS, vamos deixar as imagens arredondadas, eliminar a borda que separa as postagens e também optar pelas cores de nossa preferência, assim como a fonte do texto. Para isso, acesse o acesse o Painel do blog > Modelo > Editar HTML e procure (Ctrl+F) por ]]></b:skin>
Antes de ]]></b:skin>, cole o seguinte código:
/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF; /* Cor de fundo */
padding: 0 10px;
}.linkwithin_text {font-size:16px; /* Tamanho do título do gadget */color:#696969; /* 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: 714px !important; /* Tamanho do gadget */}.linkwithin_posts a {border: 0 !important;padding-right: 10px !important;}.linkwithin_posts a:hover {background: #FFFFFF !important; /* Cor de fundo ao passar o cursor */}.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 arredondadas */-webkit-border-radius: 80px !important;-moz-border-radius: 80px;border-radius: 80px;border:0 !important;}.linkwithin_title {color: #BEBEBE !important; /* Cor dos títulos das postagens */font: normal 13px "FrankRuehl", cursive !important; /* Fonte dos títulos das postagens */line-height: 13px !important;text-align:center;text-decoration: none;}.linkwithin_title:hover {color: #FFB6C1 !important; /* Cor dos títulos ao passar o cursor */font-weight:!important;}
Os trechos em negrito correspondem aos itens que vocês podem personalizar, e eu indico essa tabela de cores aqui. Depois, é só salvar :)
29 comentários
Obrigada! Deu certinho aqui, finalmente! O teu tuto foi o único que funcionou comigo até hoje *o* muito obrigada :D
ResponderExcluirxx
http://diariodeumafricana.blogspot.pt
Que bom Sandra, fico feliz :D De nada!
ExcluirComo vc deixou "LEIA TAMBÉM?" Com esses quadros grandes? Eu queria assim!! :) Pode me ajudar?
Excluirhttp://www.divaemaquiada.com.br/
Puxa! Tentei colocar, mas apareceu apenas "Veja também:". O que será que deu errado? Uma ajuda, por favor. uaheuahea :/
ResponderExcluirUé, que estranho ): Tu chegou a esperar um pouco? O meu demorou um pouquinho pra aparecer...
ExcluirNo meu também aconteceu a mesma coisa que oda menina acima :(
ResponderExcluirToda vez que tento fazer este tutorial só aparece o nome "Veja também"
Me ajuda :(
Oi Luana :) Li no site deles que pode demorar algumas horas até o gadget começar a funcionar. O meu no início até mostrava umas propagandas em vez de posts do meu blog, mas depois normalizou. Estou fazendo um teste em outro blog pra ver se vai aparecer, mas faz o teste também e espera um pouco pra ver!
ExcluirObrigada por tudo! Segui seus concelhos, mais já estou esperando ha 2 dias e nada. Fiz tudo certinho e ainda não apareceu. Acho que vou desistir :(
ExcluirDe nada, mas que pena que não deu certo :/ Se eu achar algum tutorial parecido por aí te mando!
ExcluirDeu muito certo.Adorei,ajudou muito.Beijos :3
ResponderExcluirhttp://everything2k.blogspot.com.br/
Oba, que bom que ajudou! Beijos <3
ExcluirObrigadaaa!Me ajudou demais!
ResponderExcluirhttp://enkontrocomk.blogspot.com
~le eu fazendo template novo~
Oba, novo layout! Adoro hehe <3 E de nadaa! Fico feliz que tenha ajudado.
ExcluirO que eu faço? O LinkWithin não tá funcionando nem sem personalização.
ResponderExcluirAline, tu chegou a esperar algum tempo pra ver se o gadget funcionava? Às vezes pode demorar um pouco. Se tu fez isso e mesmo assim não funcionou, infelizmente não sei como te ajudar... Já vi várias pessoas reclamando que não conseguem colocá-lo de jeito nenhum no blog, mas realmente não sei qual pode ser o problema :((
ExcluirPor acaso eu tava vendo esse post de novo. E passei para responder que consegui colocar. Já tava com outro, mas tive que voltar com o linkwithin, mas não personaliza :(
ExcluirObrigada!! vou espera para ver se da certo 😍😍
ResponderExcluirImagina, espero que tenha dado certo <3
ExcluirO meu não deu certo :/ Vou esperar uns dias. Mesmo assim, muito obrigada
ResponderExcluirAi, que pena :( Já pesquisei muito e ainda não descobri o que é, porque pra muita gente dá errado :/ De nada!
Excluir. Ótimo tutorial, perfeito mesmo ..
ResponderExcluir. Mas meu blog ta com um probleminha de não aparecer as miniaturas das postagens relacionadas, só aparece o link assim
FICA MAIS UM POUQUINHO! VEJA TAMBÉM:
- COMO MUDAR A COR DO TEXTO SELECIONADO PELO MOUSE
- SÉRIES QUE AMO: TEEN WOLF
. Já tenti de tudo, e nada pra essas miniaturas aparecerem .. Consegue me ajudar ? Pfv <3
Ah, que pena :(( Mais pessoas já me falaram que não estava funcionando, mas infelizmente não sei o que pode ser. Já testei e não consegui achar nada de errado :// Desculpa!
ExcluirO LinkWithin costuma por como relacionado posts que são só rascunho no blog... Isso é um problema que com o tempo se corrige ou ele vai ficar para sempre apresentando os rascunhos?
ResponderExcluirMoça, nunca tive esse problema, então não sei te responder ): Ele não deveria mostrar os rascunhos, afinal, eles nem foram publicados!
ExcluirAmei essa dica,deu super certo no meu!
ResponderExcluirSe quiser da uma passadinha lá no meu blog http://umjeitooproprio.blogspot.com.br
Que bom que tu gostou ♥♥
ExcluirMuito obrigado!
ResponderExcluirFicou ótimo!
Nossa estou rodando aqui e não consigo um tutorial que dê certo, nem mudando o html. Eu quero que apareça o leia também no post e não na pagina inicial, com o linkwithin aparece na pagina inicial e no post não aparece nada. Se puder me dar uma luz te agradeço.
ResponderExcluirMari, será que dá o mesmo efeito no wordpress?
ResponderExcluir