domingo, 27 de janeiro de 2013

Postagens relacionadas com imagens ''redondinhas''


Foto: Melina S.
O recurso de postagens relacionadas é muito fácil de colocar no blog e ele permite que os seus leitores tenha mais facilidade na hora de navegar pelo seu site , dependendo do caso o número de visitas pode até aumentar! 
Aqui no JD eu uso o gadget do linkwithin, mas o personalizei usando esse tutorial www. O código pra deixar a ''postagem relacionada'' redondinha é o mesmo, e eu até ensinei pra algumas leitoras como editar o código e deixar as imagens redondas. Detalhe ensinei por comentário mesmo (risos).   


Mãããs como demanda de pedidos aumentou é mais fácil já fazer um post mantando a curiosidade de vocês né?

1 - Antes de tudo você precisa ter o gadget do linkwithin instalado no seu blog ok? (clique aqui e saiba como).

2 - Agora vá no seu HTML e cole o código abaixo ANTES de  ]]></b:skin>
/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFA500; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:22px; /* Tamanho do título do gadget */
color:#FFAEB9; /* Cor do título do gadget */
font-family: 'Sofia', 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; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 564px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 29px !important;
}
.linkwithin_posts a:hover {
background: #FFFACD !important; /* Cor de fundo ao passar o cursor */
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px;
border-radius: 50px;
}
.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: 50px !important;
-moz-border-radius: 50px;
border-radius: 50px;
border-style: dashed !important;
}
.linkwithin_title {
color: #8B8989 !important; /* Cor dos títulos das postagens */
font-family: 'Sofia', cursive; !important; /* Tipo de fonte dos títulos das postagens */
font-size: 12px !important; /* Tamanho dos títulos das postagens */
line-height: 12px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #FF1493 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}
Visualize. Se tiver tudo ok salve (:

 Fácil né? Espero ter ajudado, beijus! 

51 comentários :

  1. OMG!! # i need! muito fofo esse efeito nas postagens relacionadas, vou usar! Jackie rebloguei o post que fiz em homenagem ao JD no meu antigo blog, agora ele está no novo =D olha ai:

    http://meu-capricho.blogspot.com.br/2013/01/jackie-dream-meu-refugio.html

    ResponderExcluir
  2. o.O
    Que simples!
    E o resultado fica perfeito néh amore?!
    É bem fácil.. quando eu tiver um tempinho juro que faço esse no meu blog --*
    Beijos (:
    http://cenariumfashion.blogspot.com.br

    ResponderExcluir
  3. Achei bem cute *-* ideal mesmo para complementar o designer de blogs no estilo vintage ou mais retrô.. Acho que são esses pequenos detalhes que dão um algo a mais rs

    www.estiloatrevidos.com :)

    ResponderExcluir
  4. Eu queria pedir uma coisa: Como coloca gifs no meio da postagem? Por que tentei, mas só fica esquerdo, direito e centralizado. Eu queria saber como deixar assim no meio das palavras... Explica, por favor?
    Bjo, Sel ;*

    ResponderExcluir
  5. Adorei o tutu :)

    http://blogdaelaniia.blogspot.com.br/

    ResponderExcluir
  6. Eu acho lindooo este efeito, Jackie! :-D
    Obrigada por compartilhar com a gente, minha Linda!!! Ameiiiiiiiii... Xerinho!

    solteiras-noivas-casadas.blogspot.com

    ResponderExcluir
  7. Adorei *-* como sempre você com dicas ótimas. Pena que no meu blog deu um problema :c ja entrei em contato com o linkwinthin e estou esperando respostas :) Fico muito feliz que você tenha gostado das dicas e do desing do meu blog *-* devo muito disso a vc haha :3 bjs
    http://chama-asamiga.blogspot.com.br

    ResponderExcluir
  8. Ai Jack vc é uma fofa mesmo!!! *.*
    Num creio que vc fez o tuto que pedi? Tô boba e alegreeee demais! =D
    Valeu amoreco, vou fazer amanhã no meu blog, pq hoje já tô encerrando aqui.
    Só vim aqui, pq vi que vc tinha postado, daí vim logo conferir..
    Ô menina, valeu grandão heim!
    Bjokas flor

    www.lerepensar.com

    ResponderExcluir
    Respostas
    1. awn por nada guria >.<
      se precisar tô aqui õ/

      beijus!

      Excluir
    2. Jack coloquei o gadget flor, realmente foi bem fácil fazer. E eu smepre me perguntava como o pessoal fazia isso...rsrsrs
      Mas valeu, ficou tão legal! Depois vc confere lá.
      Bjokas

      Excluir
  9. Jackie, já tentei mil vezes colocar o LinkWithin, mas nunca aparece nada das imagens ou se quer o titulo da postagem. O que eu faço?

    Beijos, Laura
    http://coisasdeumagarotacrescidinha.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É de vez em quando o LinkWithin gosta de testar nossa paciência :(

      Faz assim... Você vai seguir todos os passos do tutorial que eu indiquei no post, só que ao invés de deixar o próprio LinkWithin instalar o gadget, vc mesma vai fazer isso olha:

      http://imgur.com/F08m7p7

      Espero ter ajudado beijus!

      Excluir
  10. Amei! Meu blog só é legal por causa das suas dicas! http://thekawaiilandia.blogspot.com.br/

    ResponderExcluir
  11. Olá gosto muito do seu blog eu estou divulgando seu blog no meu blog :)
    http://monsterhaah.blogspot.com.br/

    ResponderExcluir
  12. Jackie que bom que vc gostou do selinho bjss . www.mymomentsz.blogspot.com

    ResponderExcluir
  13. linda amei esse tuto to usando bezosssssssssssssssssss

    http://guriabunitabykhen.blogspot.com.br/

    ResponderExcluir
  14. Oi Jack!
    Amei esse tutorial! Super fácil. ^^
    Eu estava usando o outro que você ensinou, agora já coloquei esse. rs

    BjO
    http://the-sook.blogspot.com.br/

    ResponderExcluir
  15. Essa foto é da Melina Souza, coloque os créditos por favor: http://melinasouza.com/2013/01/09/caderno-para-organizar-suas-financas/

    ResponderExcluir
  16. Foto da Melina Souza, cadê os créditos?
    http://melinasouza.com/2013/01/09/caderno-para-organizar-suas-financas/

    ResponderExcluir
  17. Oi linda eu adorei o tuto segue la meu blog por favo :
    http://justttgirl.blogspot.com.br/

    ResponderExcluir
  18. http://justttgirl.blogspot.com.br/ segue lindaas obrigado e eu amooo seu blg éer lindo de munitooh

    ResponderExcluir
  19. Olá!

    Jackie eu fiz esse tuto no meu blog antigo e deu certo, mas estou tentando fazer nesse e não esta funcionando... Você tem alguma hipótese do porque?

    Beijos ;*

    ResponderExcluir
    Respostas
    1. Talvez vc tenha muitos scripts no html... Mas na verdade não sei :x

      Excluir
  20. olah, o tutorial é otimo mas preciso de ajuda fiz tudo certinho mas não houve nenuma mudança no meu você pode me ajudar, quero muito fazer isso no meu.

    ResponderExcluir
    Respostas
    1. Não houve nenhuma mudança? Então vc já usava esse script só que não redondinho? Quando é assim apaga o código antigo e cola esse no lugar

      Beijos

      Excluir
  21. Amei ai que tudo, muito bom ficou lindo ja estou seguindo

    ResponderExcluir
  22. Infelizmente não consigo de maneira alguma colocar o Linkwithin no meu blog.

    mas obrigado pela dica.

    Te convido a conhecer meu novo blog

    Máfia de Batom Vermelho

    ResponderExcluir
  23. Oi jackie , configurei para aparecer 4 posts no blog , mas depois que instalei o segundo código ficaram cinco , o que acaba deixando desorganizado . como faz pra deixar só 4?

    ResponderExcluir
  24. Olá Jackie,amei o tuto e já coloquei no meu blog,obrigada por disponibilizar,bjs...

    ResponderExcluir
  25. Eu fiz a partir de um outro tutorial que vi aqui e deu super certo, foi só aumentar o border radius. o problema com esse linkwithn é que ele fica acima dos comentários... tem como colocar ele abaixo? tipo, aparecer depois do link pra comentar e dos botões de compartilhar...
    www.gabrielamacedo.com

    ResponderExcluir
    Respostas
    1. Ter tem, mas ai no caso vc teria que saber editar o código para fazer isso *~*

      Excluir
  26. Oi Jackie! Conheci você por este post e adorei o blog, parabéns! Só estou com um probleminha, gostaria de saber se você pode me ajudar... O meu não deu certo, fiz certinho como falou, mas ele fica aparecendo como texto :´( ... pq será?

    Me ajuda? Obrigada. :(

    ResponderExcluir
    Respostas
    1. Oi Mari, muito obrigada <3
      Então, não sei dizer ao certo qual o problema, mas aposto uma pizza que é no servidor do próprio linkwithin. Ele só funciona quando quer, até desistir de usar Zzzzzzzz

      Beijos guria <3

      Excluir
  27. Oi eu coloquei no blog mas o título ficou em inglês, preto e com outra letra e não funcionou so apareceram os títulos

    ResponderExcluir
  28. Oi eu tentei fazer no meu blog mas o título ficou com uma outra letra e os links das outras postagens não apareceram

    ResponderExcluir
  29. Adoreeeei o tuto! To colocando agora aqui no meu.. Obrigada florzinha *-*

    http://primaveraconstante.blogspot.com

    ResponderExcluir
  30. Jackie eu sou meio lerda coom isso... O meus posts todos têm imagem, mas depois de seguir o tutorial só apareceram pra mim os links das postagens, sem nenhuma foto, nem redonda nem de jeito nenhum... O que eu faço?

    ResponderExcluir
    Respostas
    1. Você seguiu os tutorial certinho Van?
      Qualquer coisa to aqui pra ajudar ;D

      beijos <3

      Excluir
  31. Oi Jackie, tem alguma forma de centralizar as imagens? a largura de postagem do meu blog é meio grande e as imagens ficaram muito na lateral, gostaria de centralizar, tem como?

    www.jessycasoaress.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ter tem, mas infelizmente não manjo tanto assim ;/

      Excluir
  32. Oiii! Adorei seu blog! *--*
    Então, no meu blog só aparecem quatro miniaturas. Não consigo colocar 5 de jeito nenhum... :(
    Aí fica um espaço enorme do lado.
    Já tentei aumentar as imagens para ocupar esse espaço, mas fica horrível.. kkkkk

    Sabe o que pode ser?
    Obrigada! :)

    ResponderExcluir
    Respostas
    1. Oi mel, é só selecionar uma uma miniatura no linkwithin, provavelmente selecionou só 4.

      Beijos (:

      Excluir
  33. Muito obrigada!Já faz um tempo que procuro este tutorial!
    Abraços!

    justnalandisses.blogspot.com.br

    ResponderExcluir
  34. Eu Gostei muito estou seguido seu blog amei beijosssss

    ResponderExcluir
  35. Gostei, mas não estou conseguindo fazer, pois instalei o widget e coloquei debaixo da postagem, salvei depois coloquei esse código antes de }]]skin (algo assim)
    ai eu salvo e não funciona porque o widget some T_T
    o que poderia ser???
    Obrigada!

    http://enfermageandoporamoreorgulho.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ju, pode ser por inúmeros motivos... Conflito com muitos scripts é o mais comum.

      Excluir
  36. SOCORRO!
    Já tentei umas 4 vezes com códigos diferente e essa é a primeira vez que tento com o LinkWihtin, mas mesmo assim acontece a mesma coisa: as imagens não ficam redondas nem a pau!

    Você sabe o que pode estar errado?? Não sei mais o que fazer.

    <a href="http://vivendomilvidas.blogspot.com.br/>Sala de Leitura</a>

    ResponderExcluir
    Respostas
    1. Não sei Lu, diversos fatores podem estar dando errado. O mais comum é quando tem diversos scripts do HTML e acaba gerando conflito.

      Excluir

.