domingo, 17 de junho de 2012

Personalizando o gadget de postagens relacionadas

Tumblr_lnoeb9jpw71qasmkco1_500_large
Hooy gente sabem o gadgets de postagens relacionadas do linkwithin? Então a pouco aprendi a personaliza lo no blog ''Dicas Blogger'' lá tem tutoriais incríveis e super recomendo. Enfim a codificação eu peguei de lá e apenas personalizei a minha maneira.

Veja um exemplo do antes e depois (clique)

Antes de começar vocês tem que instalar o linkwithin no blog (momento óbvio) :P pra isso é só conferir este tutorial www

Vá no seu HTML dê um ctrl + f e na barra de pesquisa que apareceu, procure por: ]]></b:skin>

Agora cole o seguinte código 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: 560px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 28px !important;
}
.linkwithin_posts a:hover {
background: #FFFACD !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: #000000 !important; /* Cor dos títulos das postagens */
font-family: 'Sofia', cursive; !important; /* Tipo de fonte dos títulos das postagens */
font-size: 13px !important; /* Tamanho dos títulos das postagens */
line-height: 10px !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;
}


O próprio código já diz o que deve ser feito
:iconcutepandaismybf:
Gostaram? <3

80 comentários :

  1. Adoorei Jackie! Sempre arrasando nos tutoriais minha diwa, continue assim!

    Beeeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  2. Obrigada Jackie! Adorei o tutorial! Um beijo!

    www.blog-sweetluv.blogspot.com

    ResponderExcluir
  3. Jackie, mas fica comic sans... onde muda a fonte e
    Tem como mudar?
    Beijos, obrigada por seguir o blog

    ResponderExcluir
  4. Oi Jackie , que saudade !! Amei o tuto , coloquei nos favoritos !! Participe do sorteio que está rolando no meu blog : http://maniadegarotas2s2.blogspot.com.br/2012/06/sorteio-eu-quero-meu-blog-lindo.html

    Beijos , Dinti
    http://maniadegarotas2s2.blogspot.com

    ResponderExcluir
  5. Adorei Jakie!!
    http://sweetdrens.blogspot.com

    ResponderExcluir
  6. Oi flor,o blog ta lindo!
    Vim convidar você e suas leitoras para um sorteio muito legal!
    Confere lá no Dicas Bel
    dicasbel.blogspot.com.br/
    Sucesso!

    ResponderExcluir
  7. Muito legal o tuto, Jackie, amei!
    Bjs ~> imnanda.blogspot.com

    ResponderExcluir
  8. Adorei o tutorial, Jackie! Tava doida com ele, hsauhsua' :D
    Beijos ♥

    Conspirantes

    ResponderExcluir
  9. Não estou conseguindo colocar no meu blog eu já fiz tudo certinha mais quando vou visualizar aparece o que já estava

    ResponderExcluir
  10. Ótima dica !

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/

    ResponderExcluir
  11. Adorei esse tutorial jackie !já coloquei no meu blog!obrigada!e seu blog cada dia esta ficando lindo!Parabéns!=D
    http://brilhants.blogspot.com.br/

    ResponderExcluir
  12. Não conhecia esse tuto, bem legal!!!
    Beijooo! Seguindo!

    http://blog-vidademenina.blogspot.com.br

    ResponderExcluir
  13. muito útil, vou meter no próximo layout =)
    cat-girl-cg.blogspot.pt

    ResponderExcluir
  14. segue este daqui: http://gf-girlsforever.blogspot.com.br
    VOU FICAR MTO FELIZ \Õ/

    ResponderExcluir
  15. Amei o post. parabéns *---*

    - Visite meu Blog: http://gah-principe-hype.blogspot.com/ veja as novidades bjs

    ResponderExcluir
  16. obrigado pela dica flor, eu fiz no meu e deu certinho.
    ameeeeeeeeeeei :h:

    ResponderExcluir
  17. Nossa, fica lindo mesmo, mas tenho preguiça de colocar linkwitch,kkkk! mas fica perfect!
    Jackie, sou muito fã do Jackie Dream (você sabe <<) e fiz um desenho para você, espero que goste!
    http://fluffy-s2-world.blogspot.com.br/2012/06/desenhos-para-jackie-dream-e-just-lia.html

    ResponderExcluir
  18. Oi Jackie! amei o tuto , concerteza vou usar no blog!

    visita? é novinho! www.conect-girls.blogspot.com

    ResponderExcluir
  19. Fica bem melhor ele personalizado ^^
    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  20. Jackie, tem como vc fazer um link-me para mim?
    Nome do blog= Beleza&Make
    faz do jeito que vc quiser e manda o link pra mim
    www.beleza-e-make.blogspot.com

    ResponderExcluir
  21. Oii flor,adoreii o tutorial e adoreii mais ainda seu blog,ele é lindoo,estou te seguindo,segue de volta??

    http://luxodemeninapink.blogspot.com.br/

    ResponderExcluir
  22. Adoooreeeiii, já coloquei no meu!
    Obrigada mais uma vez, jackie!

    Beijos

    http://brunne-t.blogspost.com

    ResponderExcluir
  23. Oiii jack , bom eu estava fuçando por ai , quando eu vi um blog com o seu post exclusivo , ai vi que pertence há você ! aqui está o link(http://mundobibastico.blogspot.com.br/2012/06/como-irias-para-disneyland.html)

    Beijos, :* http://mdelicada.blogspot.com/

    ResponderExcluir
  24. eu ameimais jackie eu não consegui estes espaços que é para agente colocar algo tipo "cor de fundo" essas coisas eu não faso a minima ideia de como completalos e não for encomodo me passa o link completo sem eu precisar fazer nada

    ResponderExcluir
  25. Oi Jackie, no meu deu tudo certinho, mas ficou 5 links (eu queria só 4) comofas? Beijinhos Vickie ^^
    --->www.chicletevioleta.blogspot.com.br

    ResponderExcluir
  26. Conseguiii Jackie, malz hahahah não tinha vista "tamanho do gadget"!
    Seu blog está cada vez mais lindo♥
    Beijoos, Vickie ^^
    -->www.chicletevioleta.blogspot.com.br

    ResponderExcluir
  27. Amei vzs 1000 ♥ ~risos~
    Queria muito saber como personalizar o linkwithin, obrigada por disponibilizar o tutorial Jackie! *--*

    Beijinhos, Aoi.

    http://kawaii-overdose.blogspot.com.br/

    ResponderExcluir
  28. Obrigada Jackie eu estava procurando demais por isso!
    Queria que você fizesse uma resenha de Tormenta a série de Fallen,li um post dele e amei,se tiver lendo ou se já leu pode contar como foi e tudo mais.
    http://ladyalen.blogspot.com

    ResponderExcluir
  29. amei o teu blog e o design é sublime

    http://poesia-de-uma-vida.blogspot.pt/

    ResponderExcluir
  30. Adorei o tutorial,pena que no meu blog o Linkwithin dá problema.
    http://i-teenbr.net.tc

    ResponderExcluir
  31. Jackie vc arrasa! kk Usei já! beijos lisoeenrolado.tk

    ResponderExcluir
  32. Adorei esse tutorial, estava procurando no google e acabei entrando aqui no JD, nem sabia que tinha aqui o.o -ignore.

    me-and-myfriends.blogspot.com

    ResponderExcluir
  33. Eu amei jackie.Mas no meu blog não deu certo.. eu gostaria de usar esse código :(

    ResponderExcluir
  34. Consegui fazer jackie,amei o código.
    Beijos!

    ResponderExcluir
  35. Oi jackie, eu personalizei o seu próprio código, mudando a letra, as cores e o tamanho, vai lá ver:
    http://euamocaes-original.blogspot.com.br/

    ResponderExcluir
  36. jackie nao deu resultado...........continua igual XS
    http://xicablog.blogspot.pt

    ResponderExcluir
  37. estranho... quando clico em salvar modelo, aparece: AVISO SEU NOVO MODELO NÃO INCLUI OS SEGUINTES WIDGETS: HTML8

    ResponderExcluir
  38. Meu Anjo, que delicia seu site!!!Parabéns!!! Adorei a postagem e foi hiper útil no meu blog. Já estou usando e ficou the best!!!!!!
    Obrigado, sucesso, bjokas
    Ryttanunes

    ResponderExcluir
  39. Ai que cute que fica! Sempre arrasando nos tutoriais! Adoro seu bloog :j:

    ResponderExcluir
  40. AIIIN ! :k: adorei ..
    Coloquei o post no meu blog e deu os seus devidos créditos .. AMEI !!! :l:

    ResponderExcluir
  41. GOSTO DAS DICAS DO SEU BLOG
    MAS ESSE F.A.Q. AI EM CIMA É TUDO FRESCURA, SE EU QUISER PEDIR AFILIAÇÃO EU PEÇO MESMO QUE VOCÊ IGNORE, SE EU QUISER FALAR DO BLOG, EU FALO! MESMO QUE VOCÊ DIGA QUE SERÁ IGNORADOS, SE EU NÃO QUISER FALAR DO POST EU NÃO FALO, E SE EU NÃO QUISER LER O F.A.Q EU NÃO LEIO, UÉ... NÃO VOU NEM PASSAR O LINK DO MEU BLOG, PORQUE SERÁ UM NOJO TER VOCÊ COMO VISITANTE DO MEU BLOG.

    ResponderExcluir
  42. Amei o seu blog linda!
    Esse post foi Mara! rsrs
    Se tiver um tempinho, visita o meu blog! Será um prazer ver um comentário seu lá!
    Seu blog sempre me ajuda nos meus layouts...
    Beijos
    csn-carolina.blogspot.com.br

    ResponderExcluir
  43. @Anônimo Fico feliz que goste das dicas que posto no blog (:

    A faq que disponibilizei não é frescura pelo contrário...

    - Eu recebo TANTOS pedidos de afiliação que ás vezes fica chato ficar falando ''não'' toda hora e mesmo assim ainda pedem :(

    - Se alguém quiser me indicar tag/ selinho ''INDICA UAIII'' eu só não vou responder (não sou obrigada certo?)

    - Poxa se vc tem blog sabe como é HORRÍVEL CRIAR UM POST SUPER LEGAL E uma pessoa ir lá e comentar:
    Nossa adorei o post, me segue de volta?
    VOU IGNORAR MESMO '-'
    Não faço isso com os outros por isso não quero que façam comigo (:


    E O MAIS IMPORTANTE RESPEITO SUA OPINIÃO... MÃÃÃS ''O BLOG É MEU'' SE NÃO ESTÁ SATISFEITA COM AS COISAS AQUI É SIMPLES...
    NÃO VISITE MAIS O ''JACKIE DREAM''

    AAAH PODE DEIXAR NÃO SENTIREI NENHUM PRAZER EM VISITAR SEU BLOG NOJENTO ATÉ MESMO PORQUE CRITICAR EM ANONIMO É MUITO FÁCIL NÉ?

    :l:

    ResponderExcluir
  44. Adorei , mas o meu não da certo sabe o porque ?
    Beijos
    http://meninachicmc.blogspot.com

    ResponderExcluir
  45. Oi Jackie!! Adorei demais seu blog!! O melhor de tutorial que eu já vi!! Realmente vou fazer um post especial no meu blog só pra te agradecer! Só queria abusar um pouquinho da sua boa vontade...Assim, toda vez que eu mesma tenho que editar largura e todas essas coisas, eu travo pq desconheço os códigos (sou uma blogueira recente), vc poderia me indicar algum site com esses códigos?? Obrigada!

    http://animeoikos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hoooy Danny *w*
      Logo, logo vc fica mais acostumada com HTML tá?

      Bom o Kawaii World tem uns tutoriais bem legais >> http://www.kawaii-world.net/

      beijus (:

      Excluir
    2. Muuuuuuito obrigada Jackie!! Vc tem sido uma anja!

      Post 'arigato' pra vc: http://animeoikos.blogspot.com.br/2013/03/arigato-jackie-dream.html

      Excluir
  46. Oi!!!
    Jackie tudo bom?
    Bom eu estou tentando colocar o LinkWithin no
    meu blog porém não aparece a imagem o que faço?

    ResponderExcluir
    Respostas
    1. Não sei sei '-' de vez em quando o site do LinkWithin dá esses bugs mesmo...

      Excluir
  47. Jackie eu não consigo achar a tag pra poder colar o código acima,como faco????

    ResponderExcluir
    Respostas
    1. poxa que pena se vc não achou a tag não tem nem como eu te ajudar :c

      Excluir
  48. Jackie esto com um probleminha, tá mais pra PROBLEMÃO!! Então eu sou meio nova nisso e não entendi mais ou menos onde ponho esse código..

    Beijos Help!
    http://hey-paparazzi.blogspot.com.br/

    ResponderExcluir
  49. Adoreei Jackie, estava louca procurando esse tutorial e já fiz no meu =D
    Amei seu blog, muito lindo!!

    Beijos
    http://www.decorpenduricalhos.com.br/

    ResponderExcluir
  50. Respostas
    1. o meu tbm nao funcionava Kay... ao invez de colar o codigo acima do skin... tenta fazer como eu... cole abaixo dessa linha do html
      /* Widgets

      pra mim deu super certo e funcionou normalmente, espero ter ajudado...bjus
      www.renatamassa.com

      Excluir
  51. Estou usando no meu blog, obrigada pelo tuto <3
    www.amoraoprimeirorimel.com

    ResponderExcluir
  52. Oi como faz para mudar o grossura da borda?

    Nathalia
    http://biquinibolinhas.blogspot.com.br/

    ResponderExcluir
  53. Oi... Tem como eu tirar o "negrito" do título que no meu caso é "Leia mais" ??

    ResponderExcluir
    Respostas
    1. Tem!
      Em font-weight: bolder;
      coloque normal no lugar de bolder

      Excluir
  54. amei esse blog, parabéns ;)
    http://flourishh.blogspot.com

    ResponderExcluir
  55. Jacky... nao sei porque... esse codigo nao funciona no meu blog acima do Skin naooo, tentei de todas as formas kkkk e So funcionou abaixo da linha: /* Widgets
    fica uma dica ai pra quem ta na mesma situaçao <3 Bjus e parabens pelo blog...
    www.renatamassa.com

    ResponderExcluir
  56. Alguém sabe como coloca essa caixa de fundo nos códigos HTML?

    ResponderExcluir
  57. Oii Jackie, amei o tuto, mas infelizmente não achei o ]]> tem outro jeito de personalizar?

    confetedecristal.blogspot.com

    ResponderExcluir
  58. Jackie o linkwithin não está funcionando, a uníca coisa que aparece é a palavrinha,do lado de onde deveria estar as postagens(isso estava acontecendo antes de colocar o css, e depois também)

    ResponderExcluir
  59. ótimo, me ajudou muito

    http://www.vestigiodelivros.com.br/

    ResponderExcluir

.